/* VPN Club panel reskin (2026-08-25) — match vpnclub.app (Tailwind slate/blue).
 * Loaded after dist/css/app.css from resources/views/spa.blade.php.
 * Rollback: remove the <link> in spa.blade.php. */

:root { color-scheme: dark; }
html, body { background: #0f172a; }

/* main-site font stack (replaces Nunito) */
.v-application {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}

/* Tailwind-ish component shaping */
.v-btn { text-transform: none; letter-spacing: normal; border-radius: 8px; font-weight: 600; }
.v-card, .v-sheet--outlined, .v-dialog > .v-card { border-radius: 12px; }
.v-text-field--outlined fieldset { border-radius: 8px; }

/* primary CTAs get the site's blue->indigo gradient */
.v-application .v-btn.v-btn--has-bg.primary {
  background-image: linear-gradient(90deg, #3b82f6, #6366f1) !important;
}

/* dark surfaces tuned to the site's slate scale */
.v-application.theme--dark { background: #0f172a !important; }
.theme--dark.v-card, .theme--dark.v-sheet:not(.v-app-bar):not(.v-toolbar):not(.v-navigation-drawer) {
  background-color: #1e293b;
}
.theme--dark.v-app-bar.v-toolbar.v-sheet, .theme--dark.v-toolbar.v-sheet { background-color: #0b1120; }
.theme--dark.v-navigation-drawer { background-color: #0b1120; }
.theme--dark.v-footer { background-color: #080c1a; }
.theme--dark.v-data-table, .theme--dark.v-tabs > .v-tabs-bar, .theme--dark.v-expansion-panel {
  background-color: #1e293b;
}
.theme--dark.v-list { background: #1e293b; }
.theme--dark.v-divider { border-color: rgba(148, 163, 184, .16); }

/* dark scrollbars */
* { scrollbar-color: #334155 #0f172a; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* keep link color on-brand */
.v-application.theme--dark a:not(.v-btn):not(.v-tab):not(.v-list-item) { color: #60a5fa; }

/* hero band: the SPA inlines a white background here when no banner image is set —
 * force the main site's dark hero gradient instead (!important beats inline styles) */
.v-application .banner.v-sheet {
  background: linear-gradient(180deg, #0f172a 0%, #0b1226 55%, #080c1a 100%) !important;
}

/* the vendor hardcodes a few client-area components as theme--light (white stat cards,
 * their icons, and block buttons) — pull them into the dark scheme */
.v-application.theme--dark .v-card.theme--light,
.v-application.theme--dark .v-sheet.theme--light:not(.v-app-bar):not(.v-toolbar) {
  background-color: #1e293b !important;
  color: rgba(255, 255, 255, .87) !important;
}
.v-application.theme--dark .v-card.theme--light .v-card__title,
.v-application.theme--dark .v-card.theme--light .v-card__text,
.v-application.theme--dark .v-card.theme--light .v-card__subtitle {
  color: rgba(255, 255, 255, .87) !important;
}
.v-application.theme--dark .v-icon.theme--light { color: #60a5fa !important; }
.v-application.theme--dark .v-btn.theme--light.v-btn--has-bg:not(.v-btn--outlined):not(.v-btn--text) {
  background-color: #3b82f6 !important; color: #fff !important;
}
.v-application.theme--dark .v-data-table.theme--light,
.v-application.theme--dark .v-data-table.theme--light th,
.v-application.theme--dark .v-data-table.theme--light td {
  background-color: #1e293b !important; color: rgba(255,255,255,.87) !important;
}

/* --- store/pricing polish (v4) --- */
/* product-group tabs: float on the page instead of a black bar */
.v-application.theme--dark .v-tabs > .v-tabs-bar,
.v-application.theme--dark .v-tabs-bar { background-color: transparent !important; }
.v-application.theme--dark .v-tabs-bar .v-tab { letter-spacing: .02em; }

/* pricing/product cards: subtle border, rounded banner image, hover lift */
.v-application.theme--dark .v-card.v-sheet--outlined {
  border: 1px solid rgba(148, 163, 184, .14);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.v-application.theme--dark .v-card.v-sheet--outlined:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, .55);
  box-shadow: 0 16px 40px -12px rgba(2, 6, 23, .8);
}
.v-application.theme--dark .v-card .v-image { border-radius: 8px; }

/* card CTAs (vendor forces theme--light block buttons) get the brand gradient */
.v-application.theme--dark .v-card .v-btn.theme--light.v-btn--has-bg:not(.v-btn--outlined):not(.v-btn--text) {
  background-image: linear-gradient(90deg, #3b82f6, #6366f1) !important;
}

/* pricing-card "Buy Now" (outlined blue) -> solid brand-gradient CTA */
.v-application.theme--dark .v-card.v-sheet--outlined .v-btn.v-btn--outlined.v-btn--block.primary--text {
  background-image: linear-gradient(90deg, #3b82f6, #6366f1);
  border: none;
  color: #fff !important;
}

/* --- client nav simplification (2026-08-25): keep buy / pay / configs / support --- */
.v-navigation-drawer a[href="/orders"],
.v-navigation-drawer a[href="/announcements"],
.v-navigation-drawer a[href="/user/knowledgebase"],
.v-navigation-drawer a[href="/creditcards"],
.v-navigation-drawer a[href="/credits-history"] { display: none !important; }
/* order: Dashboard, Buy VPN, My VPN, Billing, Apps, Support (others sink below) */
.v-navigation-drawer .v-list { display: flex; flex-direction: column; }
.v-navigation-drawer .v-list a[href] { order: 50; }
.v-navigation-drawer .v-list a[href="/dashboard"] { order: 1; }
.v-navigation-drawer .v-list a[href="/store"] { order: 2; }
.v-navigation-drawer .v-list a[href="/services"] { order: 3; }
.v-navigation-drawer .v-list a[href="/invoices"] { order: 4; }
.v-navigation-drawer .v-list a[href="/downloads"] { order: 5; }
.v-navigation-drawer .v-list a[href="/tickets"] { order: 6; }
/* (dashboard stat cards are handled by the .vc-dash-page rules below) */
/* dashboard: hide the announcements/news card too (Announcements is hidden from nav) */
.v-application.theme--dark .v-main .v-card:has(a[href="/announcements"]) { display: none; }

/* --- clickable table rows (2026-08-25): a row whose only action is one button opens on click --- */
.v-application.theme--dark .v-data-table tbody tr.vc-rowlink { cursor: pointer; }
.v-application.theme--dark .v-data-table tbody tr.vc-rowlink:hover td {
  background: rgba(59, 130, 246, .10);
}

/* dashboard: active-service card first; service rows clickable; green chip readable */
.v-application.theme--dark .v-main .row > [class*="col"]:has(a[href^="/service/view/"]) { order: -1; }
.v-application.theme--dark .v-main .v-list-item.vc-rowlink { cursor: pointer; border-radius: 8px; }
.v-application.theme--dark .v-main .v-list-item.vc-rowlink:hover { background: rgba(59, 130, 246, .10); }
.v-application.theme--dark .v-chip.success, .v-application.theme--dark .v-chip.green {
  color: #052e16 !important; font-weight: 600;
}

/* --- downloads page grid (2026-08-25) --- */
.vc-dl-page .v-card:has(.mdi-folder):not(.vc-dl-card) { display: none; }
#vc-downloads { padding: 8px 4px 32px; clear: both; display: block; width: 100%; }
.vc-dl-note { background: #1e293b; border: 1px solid rgba(148,163,184,.14); border-left: 3px solid #3b82f6; border-radius: 8px; padding: 12px 16px; margin: 8px 0 4px; }
.vc-dl-note a { color: #60a5fa; }
.vc-dl-h { margin: 28px 0 4px; font-size: 1.25rem; }
.vc-dl-subnote { color: #94a3b8; font-size: .85rem; }
.vc-dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 10px; }
.vc-dl-card { border: 1px solid rgba(148,163,184,.14) !important; border-radius: 12px !important; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; transition: transform .25s ease, border-color .25s ease; }
.vc-dl-card:hover { transform: translateY(-3px); border-color: rgba(59,130,246,.55) !important; }
.vc-dl-ic { font-size: 32px !important; color: #60a5fa !important; margin-bottom: 6px; }
.vc-dl-t { font-weight: 700; }
.vc-dl-s { color: #94a3b8; font-size: .82rem; margin-bottom: 10px; }
.vc-dl-btn { display: inline-block; padding: 7px 16px; border-radius: 8px; background-image: linear-gradient(90deg, #3b82f6, #6366f1); color: #fff !important; font-weight: 600; font-size: .85rem; text-decoration: none; margin-top: auto; }

/* --- service view: OVPN server grid + tidy (2026-08-25) --- */
html.vc-harvest .v-dialog__content { opacity: 0 !important; pointer-events: none !important; }
.vc-dead-dialog { display: none !important; }
.v-btn.vc-src-btn { display: none !important; }
#vc-ovpn { margin: 26px 0 34px; clear: both; display: block; width: 100%; }
.vc-ovpn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vc-ovpn-h { margin: 0 0 2px; font-size: 1.25rem; }
.vc-ovpn-sub { color: #94a3b8; font-size: .85rem; }
.vc-ovpn-count { color: #94a3b8; font-size: .8rem; white-space: nowrap; }
.vc-ovpn-search { width: 100%; margin: 12px 0; padding: 10px 14px; border-radius: 8px;
  background: #0b1120; color: #e2e8f0; border: 1px solid rgba(148,163,184,.2); font-size: .9rem; }
.vc-ovpn-search:focus { outline: none; border-color: #3b82f6; }
.vc-ovpn-loading { color: #94a3b8; font-size: .85rem; padding: 10px 0; }

/* our own cloned server cards (the vendor's rows stay untouched inside their hidden dialog) */
.vc-ovpn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.vc-ovpn-card { background: #1e293b; border: 1px solid rgba(148,163,184,.14); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  transition: transform .2s ease, border-color .2s ease; }
.vc-ovpn-card:hover { transform: translateY(-3px); border-color: rgba(59,130,246,.55); }
.vc-ovpn-name { font-weight: 700; color: #e2e8f0; }
.vc-ovpn-btn { width: 100%; padding: 8px 12px; border: none; border-radius: 8px; cursor: pointer;
  font-weight: 600; font-size: .85rem; color: #fff;
  background-image: linear-gradient(90deg, #3b82f6, #6366f1); }
.vc-ovpn-btn:hover { filter: brightness(1.08); }

/* tidy: star-wall feature list -> checklist */
.vc-feat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; }
.vc-feat { position: relative; padding-left: 20px; color: #cbd5e1; font-size: .88rem !important;
  font-weight: 400 !important; line-height: 1.75; margin: 0 !important; }
.vc-feat::before { content: "\2713"; position: absolute; left: 0; color: #22c55e; font-weight: 700; }

/* copy buttons on credential values */
.vc-copy { margin-left: 10px; padding: 2px 10px; font-size: .72rem; font-weight: 600; border-radius: 6px;
  background: rgba(59,130,246,.16); color: #93c5fd; border: 1px solid rgba(59,130,246,.35); cursor: pointer; }
.vc-copy:hover { background: rgba(59,130,246,.3); color: #fff; }

/* --- injected sections span a full row of the vendor's flex container ---
 * DO NOT force the vendor container to display:block - it is itself a flex ITEM of
 * .v-main__wrap, so blockifying it collapses the whole page to min-content width
 * (columns went to ~0px and text wrapped one character per line). Instead just tell
 * our own sections to occupy a full flex line. */
.v-main .container.fill-height:has(#vc-downloads),
.v-main .container.fill-height:has(#vc-ovpn) {
  align-items: flex-start !important;
  align-content: flex-start !important;
  padding-top: 12px;
}
#vc-downloads, #vc-ovpn {
  flex: 1 1 100%;
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* --- customer dashboard rebuild (2026-08-25) --- */
/* invoices + tickets live in the left menu; keep the landing page focused */
.vc-dash-page .v-card:has(a[href="/invoices"]),
.vc-dash-page .v-card:has(a[href="/tickets"]),
.vc-dash-page .v-card:has(a[href="/tickets/open"]),
.vc-dash-page .v-card:has(a[href="/orders"]),
.vc-dash-page .v-card:has(a[href="/announcements"]),
.vc-dash-page .v-card:has(a[href^="/service/view/"]) { display: none !important; }

#vc-dash { flex: 1 1 100%; width: 100%; max-width: 1100px; margin: 0 auto 8px; }
.vc-dash-sec { margin: 0 0 26px; }
.vc-dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vc-dash-h { margin: 0 0 6px; font-size: 1.25rem; }
.vc-dash-plan { color: #94a3b8; font-size: .85rem; }
.vc-dash-more { color: #60a5fa; font-size: .82rem; text-decoration: none; }
.vc-dash-more:hover { text-decoration: underline; }
.vc-dash-note { color: #94a3b8; font-size: .84rem; margin: 4px 0 10px; }

.vc-dash-box { background: #1e293b; border: 1px solid rgba(148,163,184,.14);
  border-left: 3px solid #3b82f6; border-radius: 12px; padding: 16px 18px; }
.vc-dash-creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; }
.vc-dash-cred { display: flex; align-items: center; gap: 10px; }
.vc-dash-lbl { color: #94a3b8; font-size: .8rem; min-width: 74px; }
.vc-dash-val { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem; color: #e2e8f0; letter-spacing: .02em; }
.vc-dash-cta { display: inline-block; text-align: center; text-decoration: none; margin-top: 12px; }

.vc-dash-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.vc-dash-plan-card { display: block; text-decoration: none; background: #1e293b;
  border: 1px solid rgba(148,163,184,.14); border-radius: 12px; padding: 16px;
  transition: transform .2s ease, border-color .2s ease; }
.vc-dash-plan-card:hover { transform: translateY(-3px); border-color: rgba(59,130,246,.55); }
.vc-dash-price { font-size: 1.5rem; font-weight: 800; color: #fff;
  background-image: linear-gradient(90deg, #60a5fa, #818cf8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vc-dash-term { font-weight: 700; color: #e2e8f0; margin-top: 2px; }
.vc-dash-sub { color: #94a3b8; font-size: .78rem; }

.vc-dash-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.vc-dash-app { background: #1e293b; border: 1px solid rgba(148,163,184,.14); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.vc-dash-app-t { font-weight: 700; color: #e2e8f0; font-size: .92rem; }
.vc-dash-app .vc-ovpn-btn { text-align: center; text-decoration: none; display: block; }

/* 2026-09-30: sidebar logo -> VPN Club (new filename beats cached smarterlogo.png), hide vendor version line */
.v-navigation-drawer__prepend .v-image__image[style*="smarterlogo.png"] { background-image: url("/images/vpnclub-panel-logo.png?v=1") !important; background-size: contain !important; background-position: left center !important; }
.v-navigation-drawer__prepend .overline.grey--text { display: none !important; }   /* vendor version line, admin + client sidebars */

/* crypto payments (2026-10-01) */
#vc-crypto { flex: 1 1 100%; margin: 0 0 16px; }
.vc-crypto-card { background: linear-gradient(135deg, #1e293b, #172033); border: 1px solid rgba(59,130,246,.35); border-radius: 14px;
  padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vc-crypto-t { font-weight: 700; color: #e2e8f0; font-size: 1.05rem; }
.vc-crypto-s { color: #94a3b8; font-size: .88rem; margin-top: 2px; max-width: 60ch; }
.vc-crypto-err { color: #fca5a5; font-size: .85rem; margin-top: 6px; }
.vc-crypto-btn { background: linear-gradient(135deg, #f59e0b, #f97316); color: #111827; font-weight: 700; border: 0; border-radius: 10px;
  padding: 10px 20px; cursor: pointer; white-space: nowrap; }
.vc-crypto-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }