/*
 * top-stars-ds.css
 * ═══════════════════════════════════════════════════════════════
 * Top Stars — Global Design System
 * Extends the Cerulean base theme. ADDITIVE ONLY.
 * Does not change routes, logic, or functional behavior.
 * ═══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────
   1. DESIGN TOKENS (extend existing :root variables)
   ───────────────────────────────────────────────────────────── */
:root {
  /* Accent */
  --ts-accent:          yellow;
  --ts-accent-rgb:      255, 255, 0;
  --ts-accent-dim:      rgba(255, 255, 0, .15);
  --ts-accent-dim2:     rgba(255, 255, 0, .08);

  /* Surfaces */
  --ts-s1:   #1a1b20;          /* = --primary-color        */
  --ts-s2:   #292a2f;          /* = --primary-lighter-color */
  --ts-s3:   #1c1c1e;          /* = --form-bg-color         */
  --ts-s4:   #212228;          /* mid-tone surface          */

  /* Borders */
  --ts-border:        rgba(255, 255, 255, .07);
  --ts-border-soft:   rgba(255, 255, 255, .04);
  --ts-border-accent: rgba(255, 255, 0,  .35);

  /* Text */
  --ts-text-1:  rgba(255, 255, 255, .93);
  --ts-text-2:  rgba(255, 255, 255, .65);
  --ts-text-3:  rgba(255, 255, 255, .38);

  /* Radius */
  --ts-r-xs:   6px;
  --ts-r-sm:   10px;
  --ts-r-md:   14px;
  --ts-r-lg:   18px;
  --ts-r-xl:   24px;
  --ts-r-pill: 999px;

  /* Shadows */
  --ts-shadow-xs:   0 1px 4px  rgba(0, 0, 0, .30);
  --ts-shadow-sm:   0 3px 12px rgba(0, 0, 0, .35);
  --ts-shadow-md:   0 6px 24px rgba(0, 0, 0, .40);
  --ts-shadow-lg:   0 12px 40px rgba(0, 0, 0, .50);
  --ts-glow:        0 0 18px   rgba(255, 255, 0, .18);
  --ts-glow-sm:     0 0 10px   rgba(255, 255, 0, .12);

  /* Transitions */
  --ts-t-fast:   0.15s ease;
  --ts-t-base:   0.22s ease;
  --ts-t-slow:   0.35s ease;

  /* Spacing */
  --ts-gap-xs: .35rem;
  --ts-gap-sm: .6rem;
  --ts-gap-md: 1rem;
  --ts-gap-lg: 1.5rem;
  --ts-gap-xl: 2rem;
}


/* ─────────────────────────────────────────────────────────────
   2. TYPOGRAPHY SYSTEM
   ───────────────────────────────────────────────────────────── */

/* Smooth font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Heading hierarchy — consistent across all pages */
h1, .h1 { font-size: clamp(1.5rem, 4vw, 2rem);   font-weight: 700; line-height: 1.25; color: var(--ts-text-1); }
h2, .h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 600; line-height: 1.3;  color: var(--ts-text-1); }
h3, .h3 { font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 600; line-height: 1.35; color: var(--ts-text-1); }
h4, .h4 { font-size: 1.05rem;  font-weight: 600; color: var(--ts-text-1); }
h5, .h5 { font-size: 0.95rem;  font-weight: 600; color: var(--ts-text-2); }
h6, .h6 { font-size: 0.85rem;  font-weight: 600; color: var(--ts-text-2); }

/* Paragraph rhythm */
p { line-height: 1.75; color: var(--ts-text-2); }

/* Highlight / accent text */
.ts-accent       { color: var(--ts-accent) !important; }
.ts-text-muted   { color: var(--ts-text-3) !important; }
.ts-text-soft    { color: var(--ts-text-2) !important; }
.ts-text-strong  { color: var(--ts-text-1) !important; }

/* Section label (small caps label above titles) */
.ts-section-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ts-accent);
  margin-bottom: .4rem;
}


/* ─────────────────────────────────────────────────────────────
   3. SCROLLBAR — consistent across all surfaces
   ───────────────────────────────────────────────────────────── */
/* Firefox scrollbar */
* {
  scrollbar-width: thin;                         /* Firefox 64+ */
  scrollbar-color: var(--ts-s2) var(--ts-s1);   /* Firefox 64+ */
}
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--ts-s1); }
::-webkit-scrollbar-thumb { background: var(--ts-s2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a3b42; }


/* ─────────────────────────────────────────────────────────────
   4. BUTTON SYSTEM
   ───────────────────────────────────────────────────────────── */

/* Global transition baseline */
.btn {
  transition: background var(--ts-t-base),
              color      var(--ts-t-base),
              transform  var(--ts-t-base),
              box-shadow var(--ts-t-base),
              opacity    var(--ts-t-base) !important;
  will-change: transform, box-shadow;
  position: relative;
  overflow: hidden;
  letter-spacing: .01em;
}

/* Lift effect on hover */
.btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: var(--ts-shadow-md) !important;
}
.btn:not(:disabled):active {
  transform: translateY(0);
  box-shadow: var(--ts-shadow-xs) !important;
}

/* Primary (yellow) — add glow on hover */
.btn-primary:not(:disabled):hover,
.btn-primary:not(:disabled):focus {
  box-shadow: var(--ts-shadow-md), var(--ts-glow) !important;
}

/* Secondary */
.btn-secondary {
  background: var(--ts-s4) !important;
  border: 1px solid var(--ts-border) !important;
  color: var(--ts-text-1) !important;
}
.btn-secondary:not(:disabled):hover {
  background: var(--ts-s2) !important;
  border-color: var(--ts-border-accent) !important;
  color: var(--ts-accent) !important;
}

/* Outline-style ghost button */
.btn-outline-accent {
  background: transparent;
  border: 1px solid var(--ts-border-accent) !important;
  color: var(--ts-accent);
  border-radius: var(--ts-r-sm);
  padding: .45rem 1rem;
  font-weight: 600;
  font-size: .88rem;
}
.btn-outline-accent:hover {
  background: var(--ts-accent-dim);
  color: var(--ts-accent);
}

/* Danger */
.btn-danger:not(:disabled):hover {
  box-shadow: 0 6px 20px rgba(220,53,69,.4) !important;
}

/* Success */
.btn-success:not(:disabled):hover {
  box-shadow: 0 6px 20px rgba(103, 224, 118, .35) !important;
}

/* Small / Extra-small consistency */
.btn-sm { padding: .35rem .8rem !important; font-size: .82rem !important; border-radius: var(--ts-r-xs) !important; }
.btn-xs { padding: .2rem  .6rem !important; font-size: .76rem !important; border-radius: var(--ts-r-xs) !important; }
.btn-lg { padding: .65rem 1.4rem !important; font-size: 1rem !important; }

/* Block button spacing */
.btn-block + .btn-block { margin-top: .6rem; }

/* Focus ring — visible but themed */
.btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--ts-accent-rgb), .22) !important;
}


/* ─────────────────────────────────────────────────────────────
   5. CARD SYSTEM
   ───────────────────────────────────────────────────────────── */

.g-card {
  border: 1px solid var(--ts-border) !important;
  box-shadow: var(--ts-shadow-sm) !important;
  transition: border-color var(--ts-t-base),
              box-shadow   var(--ts-t-base),
              transform    var(--ts-t-slow) !important;
}

/* Hover lift — opt-in via .g-card-hover */
.g-card-hover:hover {
  border-color: var(--ts-border-accent) !important;
  box-shadow: var(--ts-shadow-md), var(--ts-glow-sm) !important;
  transform: translateY(-3px);
}

/* Header divider improvement */
.g-card-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  letter-spacing: .01em;
}
.g-card-header i { color: var(--ts-accent); font-size: 1.1em; flex-shrink: 0; }

/* G-Divider — extend accent line to be animatable */
.g-divider { transition: width var(--ts-t-slow); }

/* Stat / metric cards */
.ts-stat-card {
  background: var(--ts-s2);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-r-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color var(--ts-t-base), box-shadow var(--ts-t-base), transform var(--ts-t-base);
}
.ts-stat-card:hover {
  border-color: var(--ts-border-accent);
  box-shadow: var(--ts-shadow-sm), var(--ts-glow-sm);
  transform: translateY(-2px);
}
.ts-stat-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--ts-r-md);
  background: var(--ts-accent-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--ts-accent);
}
.ts-stat-value {
  font-size: 1.4rem; font-weight: 700; color: var(--ts-text-1); line-height: 1.1;
}
.ts-stat-label {
  font-size: .78rem; color: var(--ts-text-3); margin-top: .15rem;
  text-transform: uppercase; letter-spacing: .06em;
}


/* ─────────────────────────────────────────────────────────────
   6. FORM CONTROLS
   ───────────────────────────────────────────────────────────── */

/* Focus state — yellow glow ring */
.form-group .form-control:focus {
  border-color: rgba(var(--ts-accent-rgb), .5) !important;
  box-shadow: 0 0 0 3px rgba(var(--ts-accent-rgb), .12) !important;
  outline: none !important;
  color: #fff !important;
  transition: border-color var(--ts-t-base), box-shadow var(--ts-t-base);
}

/* Select element */
select.form-control { cursor: pointer; }
select.form-control option {
  background: var(--ts-s3);
  color: var(--ts-text-1);
}

/* Textarea */
textarea.form-control { min-height: 110px; resize: vertical; }

/* Input label spacing */
.form-group label {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: .4rem;
  color: var(--ts-text-2);
}

/* Input group addon */
.input-group-text {
  background: var(--ts-s3) !important;
  border: 1px solid var(--ts-border) !important;
  color: var(--ts-text-2) !important;
}

/* Checkbox / radio custom */
.custom-control-label { color: var(--ts-text-2); cursor: pointer; }
.custom-control-label:hover { color: var(--ts-text-1); }


/* ─────────────────────────────────────────────────────────────
   7. TABLE SYSTEM
   ───────────────────────────────────────────────────────────── */

/* Table base */
.table {
  color: var(--ts-text-1) !important;
  border-collapse: collapse;
}

/* thead */
.table thead th,
.table th {
  color: var(--ts-text-3) !important;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ts-border) !important;
  padding: .65rem .85rem;
  background: transparent !important;
  white-space: nowrap;
}

/* tbody rows */
.table tbody td {
  border-color: var(--ts-border-soft) !important;
  vertical-align: middle;
  padding: .65rem .85rem;
  font-size: .9rem;
  transition: background var(--ts-t-fast);
}

/* Row hover */
.table tbody tr:hover td {
  background: rgba(255, 255, 255, .03) !important;
}

/* Striped — lighter variant */
.table-striped tbody tr:nth-of-type(even) td {
  background: rgba(255, 255, 255, .02) !important;
}

/* Responsive table wrapper — smooth horizontal scroll */
.table-responsive {
  border-radius: var(--ts-r-md);
  overflow-x: auto;
}


/* ─────────────────────────────────────────────────────────────
   8. BADGE SYSTEM
   ───────────────────────────────────────────────────────────── */

.badge {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: var(--ts-r-xs);
  padding: .28em .6em;
  line-height: 1.4;
  vertical-align: middle;
}
.badge-success {
  background: rgba(103, 224, 118, .15) !important;
  color: #67e076 !important;
  border: 1px solid rgba(103, 224, 118, .25);
}
.badge-danger {
  background: rgba(220, 53, 69, .15) !important;
  color: #ff6b7a !important;
  border: 1px solid rgba(220, 53, 69, .25);
}
.badge-warning {
  background: rgba(255, 193, 7, .15) !important;
  color: #ffc107 !important;
  border: 1px solid rgba(255, 193, 7, .25);
}
.badge-info {
  background: rgba(23, 162, 184, .15) !important;
  color: #54d9e8 !important;
  border: 1px solid rgba(23, 162, 184, .25);
}
.badge-primary {
  background: var(--ts-accent-dim) !important;
  color: var(--ts-accent) !important;
  border: 1px solid var(--ts-border-accent);
}
.badge-secondary {
  background: rgba(255, 255, 255, .07) !important;
  color: var(--ts-text-2) !important;
  border: 1px solid var(--ts-border);
}

/* Pill badge */
.badge-pill { border-radius: var(--ts-r-pill) !important; }


/* ─────────────────────────────────────────────────────────────
   9. ALERT SYSTEM
   ───────────────────────────────────────────────────────────── */

.alert {
  border-radius: var(--ts-r-md) !important;
  border: none !important;
  font-size: .9rem;
  padding: .85rem 1.2rem;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}
.alert::before {
  font-family: 'remixicon';
  font-size: 1.1rem;
  line-height: 1.4;
  flex-shrink: 0;
}
.alert-success {
  background: rgba(103, 224, 118, .1) !important;
  color: #84e891 !important;
  border-left: 3px solid #67e076 !important;
}
.alert-success::before { content: '\EB7B'; color: #67e076; } /* ri-checkbox-circle-line */
.alert-danger, .alert-error {
  background: rgba(220, 53, 69, .1) !important;
  color: #ff8a95 !important;
  border-left: 3px solid #dc3545 !important;
}
.alert-danger::before { content: '\EA0E'; color: #dc3545; } /* ri-close-circle-line */
.alert-warning {
  background: rgba(255, 193, 7, .1) !important;
  color: #ffd55a !important;
  border-left: 3px solid #ffc107 !important;
}
.alert-warning::before { content: '\EA6C'; color: #ffc107; } /* ri-error-warning-line */
.alert-info {
  background: rgba(23, 162, 184, .1) !important;
  color: #54d9e8 !important;
  border-left: 3px solid #17a2b8 !important;
}
.alert-info::before { content: '\EE59'; color: #17a2b8; } /* ri-information-line */

.alert .close {
  color: inherit !important;
  opacity: .5;
  font-size: 1.1rem;
  padding: 0;
  margin-left: auto;
  align-self: flex-start;
}
.alert .close:hover { opacity: 1; }


/* ─────────────────────────────────────────────────────────────
   10. NAVIGATION — SIDEBAR IMPROVEMENTS
   ───────────────────────────────────────────────────────────── */

/* Sidebar menu link — smoother transitions */
.app-sidebar .sidebar-menu li a.menu-link {
  transition: background var(--ts-t-base),
              color     var(--ts-t-base),
              padding   var(--ts-t-base) !important;
}

/* Active state — yellow left border + subtle glow bg */
.app-sidebar .sidebar-menu li.active > a.menu-link {
  background: linear-gradient(90deg,
    rgba(255,255,0,.12) 0%,
    rgba(255,255,0,.04) 100%) !important;
  border-right: 4px solid var(--ts-accent) !important;
  color: var(--ts-accent) !important;
  font-weight: 600;
}

/* Hover state */
.app-sidebar .sidebar-menu li:not(.active) a.menu-link:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--ts-accent) !important;
  padding-left: 22px !important;
}

/* Menu icon alignment */
.app-sidebar .sidebar-menu li a.menu-link .menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--ts-t-base);
}
.app-sidebar .sidebar-menu li.active a.menu-link .menu-icon,
.app-sidebar .sidebar-menu li a.menu-link:hover .menu-icon {
  transform: scale(1.12);
}

/* App header — subtle bottom shadow */
.app-header {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4) !important;
}

/* Header buttons — consistent hover */
.app-header .header-btn {
  transition: opacity var(--ts-t-base) !important;
}
.app-header .header-btn:hover {
  opacity: 1 !important;
}


/* ─────────────────────────────────────────────────────────────
   11. DROPDOWN MENUS
   ───────────────────────────────────────────────────────────── */

.dropdown-menu {
  animation: ts-drop-in var(--ts-t-base) ease forwards;
  box-shadow: var(--ts-shadow-md) !important;
  background: var(--ts-s3) !important;
  border: 1px solid var(--ts-border) !important;
}

@keyframes ts-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  color: var(--ts-text-2) !important;
  transition: background var(--ts-t-fast), color var(--ts-t-fast);
  font-size: .88rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--ts-text-1) !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--ts-accent-dim) !important;
  color: var(--ts-accent) !important;
}


/* ─────────────────────────────────────────────────────────────
   12. MODAL SYSTEM
   ───────────────────────────────────────────────────────────── */

/* Backdrop */
.modal-backdrop.show {
  opacity: .65 !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Dialog animation */
.modal.fade .modal-dialog {
  transition: transform var(--ts-t-slow), opacity var(--ts-t-slow) !important;
  transform: translateY(-20px) scale(.97);
  opacity: 0;
}
.modal.show .modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Modal content */
.modal-content {
  background: var(--ts-s2) !important;
  border: 1px solid var(--ts-border) !important;
  box-shadow: var(--ts-shadow-lg) !important;
}
.modal-header {
  border-bottom: 1px solid var(--ts-border) !important;
  padding: 1.1rem 1.4rem !important;
}
.modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ts-text-1);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.modal-body { padding: 1.2rem 1.4rem !important; }
.modal-footer {
  border-top: 1px solid var(--ts-border) !important;
  padding: .85rem 1.4rem !important;
  gap: .5rem;
  display: flex;
  justify-content: flex-end;
}

/* Close button */
.modal .close,
button.close {
  color: var(--ts-text-2) !important;
  opacity: .7;
  font-size: 1.4rem;
  transition: color var(--ts-t-fast), opacity var(--ts-t-fast) !important;
  background: none !important;
  border: none !important;
  padding: 0;
  cursor: pointer;
}
.modal .close:hover,
button.close:hover {
  color: #fff !important;
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────────
   13. LINK CONSISTENCY
   ───────────────────────────────────────────────────────────── */

a {
  transition: color var(--ts-t-fast), opacity var(--ts-t-fast);
}
a:hover { text-decoration: none; }

/* Yellow accent links */
.ts-link, .text-primary {
  color: var(--ts-accent) !important;
  transition: opacity var(--ts-t-fast) !important;
}
.ts-link:hover, .text-primary:hover { opacity: .8 !important; }


/* ─────────────────────────────────────────────────────────────
   14. STATUS COLORS — order status pills
   ───────────────────────────────────────────────────────────── */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .7rem;
  border-radius: var(--ts-r-pill);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.status-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Order-specific statuses — matched to common SMM panel values */
.status-completed, .badge-success   { color: #67e076; background: rgba(103,224,118,.12); border: 1px solid rgba(103,224,118,.22); }
.status-processing                  { color: #54d9e8; background: rgba(23,162,184,.12);  border: 1px solid rgba(23,162,184,.22); }
.status-pending                     { color: #ffc107; background: rgba(255,193,7,.12);   border: 1px solid rgba(255,193,7,.22); }
.status-cancelled, .badge-danger    { color: #ff6b7a; background: rgba(220,53,69,.12);   border: 1px solid rgba(220,53,69,.22); }
.status-partial                     { color: #ff9a3c; background: rgba(255,154,60,.12);  border: 1px solid rgba(255,154,60,.22); }


/* ─────────────────────────────────────────────────────────────
   15. PAGE-ENTRY ANIMATION
   ───────────────────────────────────────────────────────────── */

@keyframes ts-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.app-content > .container,
.app-content > .container-fluid {
  animation: ts-fade-up .3s ease both;
}

/* Staggered card animation */
.g-card:nth-child(1) { animation: ts-fade-up .3s .03s ease both; }
.g-card:nth-child(2) { animation: ts-fade-up .3s .06s ease both; }
.g-card:nth-child(3) { animation: ts-fade-up .3s .09s ease both; }
.g-card:nth-child(4) { animation: ts-fade-up .3s .12s ease both; }


/* ─────────────────────────────────────────────────────────────
   16. PANEL BODY (existing component refinement)
   ───────────────────────────────────────────────────────────── */

.panel-body {
  border: 1px solid var(--ts-border) !important;
  transition: border-color var(--ts-t-base);
}
.panel-body:focus-within {
  border-color: rgba(var(--ts-accent-rgb), .35) !important;
}


/* ─────────────────────────────────────────────────────────────
   17. SC-BADGE (header social contact pills)
   ───────────────────────────────────────────────────────────── */

.sc-badge {
  border: 1px solid var(--ts-border);
  transition: border-color var(--ts-t-base), box-shadow var(--ts-t-base);
}
.sc-badge:hover {
  border-color: var(--ts-border-accent);
  box-shadow: var(--ts-glow-sm);
}


/* ─────────────────────────────────────────────────────────────
   18. CUSTOM NAV TABS (cstm-nav)
   ───────────────────────────────────────────────────────────── */

.cstm-nav .nav-item .nav-link {
  transition: color var(--ts-t-base) !important;
}
.cstm-nav .nav-item .nav-link .icon {
  transition: background var(--ts-t-base), color var(--ts-t-base) !important;
}
.cstm-nav .nav-item .nav-link:hover .icon {
  background: var(--ts-accent-dim) !important;
  color: var(--ts-accent) !important;
}


/* ─────────────────────────────────────────────────────────────
   19. EMPTY / ZERO-STATE COMPONENT
   ───────────────────────────────────────────────────────────── */

.ts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ts-text-3);
}
.ts-empty-icon {
  font-size: 3rem;
  color: var(--ts-text-3);
  margin-bottom: 1rem;
  opacity: .5;
}
.ts-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ts-text-2);
  margin-bottom: .35rem;
}
.ts-empty-sub {
  font-size: .85rem;
  color: var(--ts-text-3);
  max-width: 320px;
  line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────
   20. SKELETON LOADER (for async content)
   ───────────────────────────────────────────────────────────── */

/* Shimmer uses transform:translateX on a pseudo-element — stays on compositor,
   avoids the background-position Paint trigger. */
@keyframes ts-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX( 100%); }
}
.ts-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--ts-s2);
  border-radius: var(--ts-r-sm);
  display: block;
}
.ts-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .06) 50%,
    transparent 100%
  );
  animation: ts-shimmer 1.4s ease infinite;
  will-change: transform;
}
.ts-skeleton-text  { height: .85rem; margin-bottom: .5rem; }
.ts-skeleton-title { height: 1.2rem; width: 60%; margin-bottom: .75rem; }
.ts-skeleton-btn   { height: 40px; width: 120px; }


/* ─────────────────────────────────────────────────────────────
   21. UTILITY HELPERS
   ───────────────────────────────────────────────────────────── */

/* Subtle dividers */
.ts-divider {
  border: none;
  border-top: 1px solid var(--ts-border);
  margin: 1.5rem 0;
}
.ts-divider-accent {
  border-top-color: var(--ts-border-accent);
}

/* Truncate long text */
.ts-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Clickable row cursor */
.ts-clickable { cursor: pointer; }

/* Glass surface — for overlays */
.ts-glass {
  background: rgba(26, 27, 32, .75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--ts-border);
}

/* Accent dot indicator */
.ts-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ts-accent);
}
.ts-dot-green  { background: #67e076; }
.ts-dot-red    { background: #ff6b7a; }
.ts-dot-yellow { background: var(--ts-accent); }
.ts-dot-blue   { background: #54d9e8; }
.ts-dot-orange { background: #ff9a3c; }


/* ─────────────────────────────────────────────────────────────
   22. RESPONSIVE FIXES
   ───────────────────────────────────────────────────────────── */

/* App content — reduce padding on tablets */
@media (max-width: 1024px) {
  .app-content { padding-left: 0; }
}

/* Mobile — full-width tables, compact cards */
@media (max-width: 768px) {
  .g-card .g-card-body { padding: 14px 16px !important; }

  /* Only apply stacked layout on tables that opt-in via .rwd-table
     (avoids breaking #serv-table and other tables with their own mobile rules) */
  .rwd-table thead { display: none; }
  .rwd-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem .85rem;
    border-bottom: 1px solid var(--ts-border-soft);
    font-size: .85rem;
  }
  .rwd-table tbody td::before {
    content: attr(data-title);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ts-text-3);
    flex-shrink: 0;
    margin-right: .75rem;
  }
  .rwd-table tbody tr { display: block; margin-bottom: .5rem; border-radius: var(--ts-r-md); overflow: hidden; }

  .btn-block-mobile { display: block !important; width: 100% !important; }
  .modal-dialog { margin: .75rem; }
}

@media (max-width: 480px) {
  .g-card .g-card-body { padding: 12px !important; }
  h1, .h1 { font-size: 1.35rem; }
  h2, .h2 { font-size: 1.15rem; }
  .ts-stat-card { padding: .9rem 1rem; }
  .ts-stat-value { font-size: 1.2rem; }
}


/* ─────────────────────────────────────────────────────────────
   23. PRINT — hide non-essential chrome
   ───────────────────────────────────────────────────────────── */

@media print {
  .app-sidebar,
  .app-header,
  .app-navbar,
  .btn { display: none !important; }
  .app-content { padding: 0 !important; }
  .g-card { border: 1px solid #ccc !important; box-shadow: none !important; }
}