/*
 * Theme Studio — client portal skin.
 *
 * Injected via app_customers_head. The portal uses the same Bootstrap primitives
 * as the admin, so the same tokens apply. Kept a touch more conservative because
 * portal templates vary more between installs. Scoped under html.ts-skin.
 */

html.ts-skin body.customers {
  font-family: var(--ts-font);
  -webkit-font-smoothing: antialiased;
  background-color: var(--ts-bg);
  color: var(--ts-text);
}
html.ts-skin body.customers h1,
html.ts-skin body.customers h2,
html.ts-skin body.customers h3,
html.ts-skin body.customers h4 { color: var(--ts-ink); letter-spacing: -.01em; }

/* Top portal navbar. */
html.ts-skin body.customers .navbar-default,
html.ts-skin body.customers #top-bar {
  background-color: var(--ts-navbar-bg);
  border-bottom: 1px solid var(--ts-navbar-border);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
}
html.ts-skin body.customers .navbar-default .navbar-nav > li > a { color: var(--ts-text-2); }
html.ts-skin body.customers .navbar-default .navbar-nav > .active > a,
html.ts-skin body.customers .navbar-default .navbar-nav > li > a:hover { color: var(--ts-accent-text); background-color: transparent; }

/* Cards / panels. */
html.ts-skin body.customers .panel,
html.ts-skin body.customers .panel_s {
  background-color: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-r-lg);
  box-shadow: var(--ts-shadow-sm);
}
html.ts-skin body.customers .panel-heading { background-color: var(--ts-surface); border-bottom: 1px solid var(--ts-border); color: var(--ts-ink); }
html.ts-skin body.customers .well { background-color: var(--ts-surface-sunken); border: 1px solid var(--ts-border); border-radius: var(--ts-r-md); box-shadow: none; }

/* Buttons. */
html.ts-skin body.customers .btn { border-radius: var(--ts-r-sm); font-weight: 500; }
html.ts-skin body.customers .btn-primary,
html.ts-skin body.customers .btn-info {
  background-color: var(--ts-accent);
  border-color: var(--ts-accent);
  color: var(--ts-on-accent);
}
html.ts-skin body.customers .btn-primary:hover,
html.ts-skin body.customers .btn-info:hover { background-color: var(--ts-accent-hover); border-color: var(--ts-accent-hover); }
html.ts-skin body.customers .btn-default { background-color: var(--ts-surface); border-color: var(--ts-border-strong); color: var(--ts-text); }

/* Forms. */
html.ts-skin body.customers .form-control {
  background-color: var(--ts-surface);
  border: 1px solid var(--ts-border-strong);
  border-radius: var(--ts-r-sm);
  color: var(--ts-ink);
  box-shadow: none;
}
html.ts-skin body.customers .form-control:focus { border-color: var(--ts-accent); box-shadow: var(--ts-ring-focus); }
html.ts-skin body.customers .control-label,
html.ts-skin body.customers label { color: var(--ts-text-2); font-weight: 500; }

/* Tables. */
html.ts-skin body.customers .table > thead > tr > th { background-color: var(--ts-surface-alt); border-bottom: 1px solid var(--ts-border); color: var(--ts-text-2); font-weight: 600; }
html.ts-skin body.customers .table > tbody > tr > td { border-top: 1px solid var(--ts-hairline); }

/* Links + accent. */
html.ts-skin body.customers a:not(.btn) { color: var(--ts-accent-text); }
html.ts-skin body.customers .text-primary { color: var(--ts-accent-text); }
html.ts-skin body.customers .label { border-radius: var(--ts-r-pill); }

/* DARK. */
html.ts-skin[data-theme="dark"] body.customers { background-color: var(--ts-bg); color: var(--ts-text); }
html.ts-skin[data-theme="dark"] body.customers .panel,
html.ts-skin[data-theme="dark"] body.customers .panel_s,
html.ts-skin[data-theme="dark"] body.customers .panel-heading { background-color: var(--ts-surface); border-color: var(--ts-border); }
html.ts-skin[data-theme="dark"] body.customers .form-control { background-color: var(--ts-surface-alt); border-color: var(--ts-border-strong); color: var(--ts-ink); }
html.ts-skin[data-theme="dark"] body.customers .table > tbody > tr > td { border-color: var(--ts-hairline); color: var(--ts-text); }
html.ts-skin[data-theme="dark"] body.customers .tw-bg-white,
html.ts-skin[data-theme="dark"] body.customers .tw-bg-neutral-100 { background-color: var(--ts-surface) !important; }