/**
 * GCT — modelos visuais (Configurações → Parâmetros → visual_modelo).
 * Modelo 1 = visual padrão (sem overrides). 2–5 mudam o degradê e as grades,
 * sempre na identidade Dataryon (ciano #06b6d4 / #0891b2 / violeta #a855f7).
 */

/* ——— Variáveis por modelo ——— */
body.gct-visual-2 {
  --gct-v-accent: #06b6d4;
  --gct-v-accent-deep: #0c4a6e;
  --gct-v-header-from: #ecfeff;
  --gct-v-header-to: #cffafe;
  --gct-v-header-line: #06b6d4;
  --gct-v-header-color: #0c4a6e;
  --gct-v-zebra: rgba(34, 211, 238, 0.05);
  --gct-v-grid: rgba(15, 23, 42, 0.075);
  --gct-v-hover: linear-gradient(90deg, rgba(6, 182, 212, 0.1), rgba(34, 211, 238, 0.03));
  --gct-v-frame: rgba(6, 182, 212, 0.28);
  --gct-v-rail: #06b6d4;
  --gct-v-card-glow: 0 22px 48px rgba(8, 47, 73, 0.22);
}

body.gct-visual-3 {
  --gct-v-accent: #a855f7;
  --gct-v-accent-deep: #0e7490;
  --gct-v-header-from: #faf5ff;
  --gct-v-header-to: #ecfeff;
  --gct-v-header-line: #a855f7;
  --gct-v-header-color: #0c4a6e;
  --gct-v-zebra: rgba(233, 213, 255, 0.28);
  --gct-v-grid: rgba(120, 53, 15, 0.08);
  --gct-v-hover: linear-gradient(90deg, rgba(6, 182, 212, 0.08), rgba(168, 85, 247, 0.08));
  --gct-v-frame: rgba(168, 85, 247, 0.28);
  --gct-v-rail: #a855f7;
  --gct-v-card-glow: 0 22px 48px rgba(28, 18, 4, 0.2);
}

body.gct-visual-4 {
  --gct-v-accent: #22d3ee;
  --gct-v-accent-deep: #0e7490;
  --gct-v-header-from: #ecfeff;
  --gct-v-header-to: #ffffff;
  --gct-v-header-line: #22d3ee;
  --gct-v-header-color: #164e63;
  --gct-v-zebra: rgba(236, 254, 255, 0.9);
  --gct-v-grid: rgba(21, 94, 117, 0.08);
  --gct-v-hover: linear-gradient(90deg, rgba(34, 211, 238, 0.1), rgba(6, 182, 212, 0.04));
  --gct-v-frame: rgba(34, 211, 238, 0.26);
  --gct-v-rail: #22d3ee;
  --gct-v-card-glow: 0 20px 44px rgba(8, 47, 73, 0.16);
}

body.gct-visual-5 {
  --gct-v-accent: #67e8f9;
  --gct-v-accent-deep: #082f49;
  --gct-v-header-from: #155e75;
  --gct-v-header-to: #0c4a6e;
  --gct-v-header-line: #a5f3fc;
  --gct-v-header-color: #ecfeff;
  --gct-v-zebra: rgba(15, 23, 42, 0.035);
  --gct-v-grid: rgba(15, 23, 42, 0.1);
  --gct-v-hover: linear-gradient(90deg, rgba(6, 182, 212, 0.12), rgba(15, 23, 42, 0.03));
  --gct-v-frame: rgba(12, 74, 110, 0.45);
  --gct-v-rail: #67e8f9;
  --gct-v-card-glow: 0 24px 56px rgba(2, 6, 23, 0.38);
}

/* ——— Fundos (app) ——— */
html:has(body.gct-visual-2) { background-color: #020617; }
html:has(body.gct-visual-3) { background-color: #07111f; }
html:has(body.gct-visual-4) { background-color: #083344; }
html:has(body.gct-visual-5) { background-color: #020617; }

body.wash-app.gct-visual-2 {
  background-color: #020617;
  background-image:
    radial-gradient(ellipse 95% 70% at 12% -8%, rgba(34, 211, 238, 0.5), transparent 52%),
    radial-gradient(ellipse 70% 55% at 100% 8%, rgba(6, 182, 212, 0.22), transparent 48%),
    radial-gradient(ellipse 80% 45% at 48% 108%, rgba(8, 47, 73, 0.95), transparent 52%),
    linear-gradient(168deg, #020617 0%, #082f49 36%, #0c4a6e 70%, #0f172a 100%);
}

body.wash-app.gct-visual-3 {
  background-color: #07111f;
  background-image:
    radial-gradient(ellipse 85% 60% at 88% -8%, rgba(168, 85, 247, 0.34), transparent 52%),
    radial-gradient(ellipse 90% 70% at 8% 0%, rgba(6, 182, 212, 0.42), transparent 50%),
    radial-gradient(ellipse 55% 40% at 50% 100%, rgba(168, 85, 247, 0.2), transparent 50%),
    linear-gradient(158deg, #020617 0%, #0f172a 38%, #1e1b4b 68%, #312e81 100%);
}

body.wash-app.gct-visual-4 {
  background-color: #083344;
  background-image:
    radial-gradient(ellipse 110% 80% at 50% -28%, rgba(103, 232, 249, 0.55), transparent 56%),
    radial-gradient(ellipse 60% 45% at 0% 85%, rgba(6, 182, 212, 0.22), transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(34, 211, 238, 0.2), transparent 48%),
    linear-gradient(175deg, #082f49 0%, #155e75 42%, #155e75 78%, #0e7490 100%);
}

body.wash-app.gct-visual-5 {
  background-color: #020617;
  background-image:
    radial-gradient(ellipse 55% 48% at 0% 0%, rgba(6, 182, 212, 0.42), transparent 52%),
    radial-gradient(ellipse 50% 55% at 100% 100%, rgba(12, 74, 110, 0.55), transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(15, 23, 42, 0.35), transparent 70%),
    linear-gradient(180deg, #020617 0%, #0c4a6e 48%, #020617 100%);
}

body.wash-app.gct-visual-2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%2367e8f9' stroke-opacity='0.07'%3E%3Cpath d='M0 36h72M36 0v72'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.85;
}

body.wash-app.gct-visual-3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23c084fc' stroke-opacity='0.08'%3E%3Cpath d='M-8 28l28-28M0 56l56-56M28 56l28-28'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.7;
}

body.wash-app.gct-visual-4::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045'%3E%3Cpath d='M0 40h40M40 0v40'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.95;
}

body.wash-app.gct-visual-5::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='1' cy='1' r='0.8' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E");
  opacity: 1;
}

/* ——— Fundos (login / auth) ——— */
body.wash-auth.gct-visual-2 {
  background-color: #020617;
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -18%, rgba(34, 211, 238, 0.55), transparent 55%),
    radial-gradient(ellipse 70% 55% at 110% 60%, rgba(6, 182, 212, 0.28), transparent 48%),
    radial-gradient(ellipse 55% 45% at -8% 90%, rgba(8, 47, 73, 0.7), transparent 50%),
    linear-gradient(165deg, #020617 0%, #082f49 42%, #0c4a6e 100%);
}

body.wash-auth.gct-visual-3 {
  background-color: #07111f;
  background-image:
    radial-gradient(ellipse 90% 65% at 80% -10%, rgba(168, 85, 247, 0.4), transparent 52%),
    radial-gradient(ellipse 90% 70% at 10% 0%, rgba(6, 182, 212, 0.48), transparent 50%),
    linear-gradient(160deg, #020617 0%, #0f172a 45%, #2e1065 100%);
}

body.wash-auth.gct-visual-4 {
  background-color: #083344;
  background-image:
    radial-gradient(ellipse 110% 80% at 50% -22%, rgba(103, 232, 249, 0.58), transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 80%, rgba(34, 211, 238, 0.22), transparent 50%),
    linear-gradient(175deg, #082f49 0%, #155e75 50%, #0e7490 100%);
}

body.wash-auth.gct-visual-5 {
  background-color: #020617;
  background-image:
    radial-gradient(ellipse 70% 55% at 0% 0%, rgba(6, 182, 212, 0.48), transparent 52%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(12, 74, 110, 0.5), transparent 50%),
    linear-gradient(180deg, #020617 0%, #0c4a6e 50%, #020617 100%);
}

/* ——— Grades / tabelas (modelos 2–5) ——— */
body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .table-responsive,
body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .gct-data-card,
body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .gct-users-card {
  border: 1px solid var(--gct-v-frame);
  border-top: 2px solid var(--gct-v-accent);
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    var(--gct-v-card-glow);
  overflow: hidden;
}

body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5)
  .gct-data-card
  .table-responsive,
body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5)
  .gct-users-card
  .table-responsive {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .table {
  --bs-table-border-color: var(--gct-v-grid);
  border-collapse: separate;
  border-spacing: 0;
}

body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .table > :not(caption) > * > * {
  border-right: 1px solid var(--gct-v-grid);
}

body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5)
  .table
  > :not(caption)
  > *
  > *:last-child {
  border-right: none;
}

body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .table thead th,
body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .gct-data-table thead th,
body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .gct-users-table thead th,
body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .gct-report-table thead th,
body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .gct-param-table th {
  background: linear-gradient(180deg, var(--gct-v-header-from), var(--gct-v-header-to)) !important;
  color: var(--gct-v-header-color) !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 -2px 0 var(--gct-v-header-line);
  letter-spacing: 0.04em;
  font-weight: 700;
}

body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .table tbody tr:nth-child(even) > * {
  background-color: var(--gct-v-zebra);
}

body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .table-hover > tbody > tr:hover > *,
body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .table tbody tr:hover > * {
  --bs-table-accent-bg: transparent;
  background: var(--gct-v-hover) !important;
}

body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5)
  .table
  tbody
  tr:hover
  > *:first-child {
  box-shadow: inset 3px 0 0 var(--gct-v-rail);
}

body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .table tfoot td,
body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5) .table tfoot th {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important;
  border-top: 2px solid var(--gct-v-header-line) !important;
  font-weight: 700;
}

body.gct-visual-5 .gct-param-chave code {
  background: rgba(15, 23, 42, 0.08);
  color: #334155;
}

@media print {
  body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5),
  body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5).wash-app,
  body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5).wash-auth {
    background: #fff !important;
  }
  body:is(.gct-visual-2, .gct-visual-3, .gct-visual-4, .gct-visual-5)::before {
    display: none !important;
  }
}