/*
 * Siwar skin for the Media Buying Dashboard.
 *
 * The dashboard ships as a light, teal Salla replica. This file is the only
 * thing that recolours it to the Siwar palette; styles.css and the markup are
 * left as they came, so the app can be replaced with a newer build by dropping
 * the folder in and re-adding the one <link> below it.
 *
 * Everything here is a colour. No layout, spacing or type is touched.
 */

:root {
  /* Siwar surfaces */
  --bg: #06070a;
  --panel: #0c0d15;
  --panel-2: #0f1119;
  --ink: #ececef;
  --head: #f4f4f6;
  --muted: #8b8b95;
  --line: rgba(236, 236, 239, 0.10);
  --line-2: rgba(236, 236, 239, 0.16);

  /* The sidebar was teal; here it is the site's own near-black with an
     accent-lit active row. */
  --teal: #090a12;
  --teal-2: color-mix(in srgb, #0030ff 26%, #090a12);

  /* Mint tints become accent tints. */
  --mint: color-mix(in srgb, #0030ff 55%, transparent);
  --mint-2: color-mix(in srgb, #0030ff 22%, transparent);
  --mint-3: color-mix(in srgb, #0030ff 12%, transparent);

  --accent: #0030ff;
  --chart-bar: #0030ff;
  --green: #2fd6a5;
  --red: #ff6b6b;
  --amber: #f5b445;
}

html, body { background: var(--bg); color: var(--ink); }

/* ------------------------------------------------------------- sidebar - */

.sidebar { background: var(--teal); color: #b9bcc9; border-inline-start: 1px solid var(--line); }
.brand img { filter: brightness(0) invert(1); opacity: .92; }
.store { border-bottom-color: var(--line); }
.store b { color: var(--head); }
.store-av { background: linear-gradient(140deg, var(--accent), #0a1a6b); }
.store .pro { background: var(--accent); color: #fff; }
.nav a { color: #b9bcc9; }
.nav a:hover { background: rgba(236, 236, 239, .06); color: var(--head); }
.nav a.on { background: var(--teal-2); color: #fff; }
.nav .sec { color: #6f7385; }
.side-foot, .stores, .storebadge { border-color: var(--line); color: #9a9eb0; }

/* --------------------------------------------------------------- shell - */

.topbar { background: rgba(6, 7, 10, .86); border-bottom-color: var(--line); backdrop-filter: blur(12px); }
.search { background: var(--panel-2); border-color: var(--line); }
.search input { color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.search .go { background: var(--accent); color: #fff; }
.search .go i { color: #fff; }
.search-type { color: var(--muted); border-inline-end-color: var(--line); }
.chip { background: var(--panel); border-color: var(--line); color: var(--ink); }
.chip.dark { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.cal select { background: transparent; color: var(--ink); }
.chip.cal select option { background: #0c0d15; color: var(--ink); }
.icon-btn { background: var(--panel); border-color: var(--line); color: var(--ink); }
.avatar { background: #171a26; color: var(--ink); }
.crumbs { color: var(--muted); }
.crumbs b { color: var(--head); }
.help { background: var(--mint-3); border-color: var(--mint); color: #b9c4ff; }
.hamburger { color: var(--ink); }

/* --------------------------------------------------------------- cards - */

.card,
.kpi,
.stat-card,
.rtab { background: var(--panel); border-color: var(--line); color: var(--ink); }

.card h3, .head h3 { color: var(--head); }
.card .sub { color: var(--muted); }

.kpi .ic { background: var(--mint-3); }
.kpi .ic i, .msum-stat .ic i, .alert-ic i, .group-card .gi i { color: #7f95ff; }
.stat-card .si i { color: var(--muted); }

.rtab { color: var(--ink); }
.rtab:hover { border-color: var(--mint); background: var(--mint-3); }
.rtab.on { border-color: var(--accent); background: var(--mint-3); color: #b9c4ff; }

.hero {
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel) 62%);
  border-color: var(--mint);
}
.hero h2 { color: var(--head); }
.hero p { color: var(--muted); }
.hero-stat { background: var(--accent); color: #fff; box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 35%, transparent); }

/* -------------------------------------------------------------- tables - */

th { background: var(--panel-2); color: var(--muted); }
td { color: var(--ink); }
th, td { border-bottom-color: var(--line); }
tbody tr:hover { background: rgba(236, 236, 239, .035); }
tfoot td { background: var(--panel-2); color: var(--head); }
.thumb { background: #171a26; }
.bar { background: #171a26; }
.rank { border-bottom-color: var(--line); }

.badge.g { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.badge.r { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.badge.a { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }

.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.delta .m { color: var(--muted); }

/* --------------------------------------------------- buttons and forms - */

.btn { background: var(--panel); border-color: var(--line-2); color: var(--ink); }
.btn:hover { border-color: var(--accent); }
.btn.d { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.x { background: transparent; border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
.tabs .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

input, select, textarea {
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
select option { background: #0c0d15; color: var(--ink); }

/* Rows and panels that carried a light hover or tint. */
.order-row:hover, .cust-row:hover { background: rgba(236, 236, 239, .035); }
.panel-head h3 { color: var(--head); }
.msum-stat b { color: var(--head); }
.msum-stat span { color: var(--muted); }
.more { color: #7f95ff; }
.muted { color: var(--muted); }

/* Print keeps the light treatment; a dark page wastes ink. */
@media print {
  html, body { background: #fff; color: #12303a; }
}

/* ------------------------------------------------------------- embedded - */

/*
 * The dashboard is shown inside a frame on the home page, where a scrollbar
 * down the side of it is a browser chrome artefact sitting in the middle of a
 * designed section. Hidden, not disabled: the frame still scrolls by wheel,
 * trackpad, touch and keyboard.
 */
html {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}