/* ===========================================================================
   Classic-only chrome.

   The tokens already make Classic grey, dense and square. What is left is the
   furniture the old panels have and the Modern skin does not: a round brand
   badge over the dark rail, a row of icon tiles on the dashboard, the
   export/search toolbar above every table, and small coloured action buttons
   on each row. Everything here is scoped to [data-skin="classic"].
   =========================================================================== */

[data-skin="classic"] .shell {
  grid-template-areas: "brandbar topbar" "sidebar main";
}

/* The dark rail runs the full height, with the badge sitting in it. */
[data-skin="classic"] .brandbar {
  justify-content: center;
  height: var(--topbar-h);
  border-bottom: 1px solid #000;
}
[data-skin="classic"] .brandbar .bname { font-size: .9rem; letter-spacing: .04em; }

[data-skin="classic"] .sidebar { border-right: 1px solid #000; }

[data-skin="classic"] .welcome {
  text-align: center;
  padding: 1.1rem .75rem .9rem !important;
  border-bottom: 1px solid #000 !important;
}
[data-skin="classic"] .welcome .badge-round {
  width: 5.4rem; height: 5.4rem; margin: 0 auto .7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3b3b3b, #141414 70%);
  border: 1px solid #4a4a4a;
  box-shadow: inset 0 1px 0 #ffffff1a, 0 2px 6px #0006;
  display: grid; place-items: center;
}
[data-skin="classic"] .welcome .badge-round img { width: 3.1rem; height: auto; }
[data-skin="classic"] .welcome .hi { font-size: 11px; color: #bdbdbd; }
[data-skin="classic"] .welcome .hi b { display: block; color: #fff; font-size: 12px; }
[data-skin="classic"] .welcome .tier {
  background: none; border: 0; color: #e8e8e8;
  padding: 0; margin-top: .15rem; font-size: 11px; letter-spacing: .02em;
  text-transform: none; font-family: var(--font-body);
}
[data-skin="classic"] .welcome .clock { color: #8f8f8f; font-size: 10px; }

/* Nav sections look like pressed bars. */
[data-skin="classic"] .nav-section { padding: 0; }
[data-skin="classic"] .nav-section > .nav-head {
  padding: .62rem .8rem;
  border-top: 1px solid #000; border-bottom: 1px solid #3a3a3a;
  background: linear-gradient(180deg, #343434, #262626);
  color: #d2d2d2; letter-spacing: .06em; font-size: 11px;
  font-family: var(--font-body); text-transform: uppercase;
}
[data-skin="classic"] .nav-section > .nav-head:hover { background: linear-gradient(180deg, #3d3d3d, #2d2d2d); }
[data-skin="classic"] .nav-items { background: #232323; }
[data-skin="classic"] .nav-items a {
  padding: .45rem .8rem .45rem 1.5rem;
  border-left: 0; border-bottom: 1px solid #1b1b1b;
  color: #b9b9b9; font-size: 11px;
}
[data-skin="classic"] .nav-items a.active {
  background: #fff; color: #222; font-weight: 600;
  border-left: 3px solid var(--accent);
}
[data-skin="classic"] .nav-top a { border-bottom: 1px solid #000; }

[data-skin="classic"] .topbar { border-bottom: 1px solid #000; }
[data-skin="classic"] .account-chip {
  border-radius: 3px; background: #ffffff14; border-color: #ffffff21;
}
[data-skin="classic"] .account-chip .avatar { border-radius: 3px; }

/* --------------------------------------------------------- dash furniture */
.dash-tiles {
  display: grid; gap: .6rem; margin-bottom: .9rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.dash-tile {
  display: block; padding: .7rem .5rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: linear-gradient(180deg, #fff, #f0f0f0);
  box-shadow: var(--shadow-sm);
  text-align: center; color: var(--fg);
}
.dash-tile:hover { background: linear-gradient(180deg, #fff, #e4e4e4); text-decoration: none; }
.dash-tile.active { border-color: var(--accent); }
.dash-tile .ico {
  width: 2.1rem; height: 2.1rem; margin: 0 auto .45rem;
  display: grid; place-items: center; color: var(--accent);
}
.dash-tile .t { font-size: 11px; }

.quick-row { display: flex; justify-content: center; gap: .8rem; margin-bottom: 1rem; }
.quick-btn {
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, #fff, #ececec);
  box-shadow: var(--shadow-sm);
  color: var(--accent);
}
.quick-btn:hover { background: linear-gradient(180deg, #fff, #e0e0e0); text-decoration: none; }

/* Small info boxes with a coloured icon square, the old dashboard look. */
.info-boxes { display: grid; gap: .6rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.info-box {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg-surface); box-shadow: var(--shadow-sm);
}
.info-box .ic {
  width: 2.1rem; height: 2.1rem; flex: none; border-radius: 3px;
  display: grid; place-items: center; color: #fff;
  background: var(--accent);
}
.info-box .tx { min-width: 0; }
.info-box .tx b { display: block; font-size: 12px; }
.info-box .tx span { display: block; font-size: 11px; color: var(--fg-dim); }

.side-stats { display: flex; flex-direction: column; gap: .55rem; }
.side-stat { display: flex; align-items: center; gap: .6rem; }
.side-stat .ic {
  width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--accent);
  font-size: 11px;
}
.side-stat b { display: block; font-size: 13px; }
.side-stat span { display: block; font-size: 10px; color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: .06em; }

/* ------------------------------------------------------------ box headers */
[data-skin="classic"] .card-head {
  padding: .45rem .7rem;
  border-bottom: 1px solid var(--border);
}
[data-skin="classic"] .card-head h2 {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: .08em; color: #444;
}

/* Square coloured action buttons, right-aligned in the box header. */
.sq-btns { display: flex; gap: .3rem; }
.sq-btn {
  width: 1.75rem; height: 1.75rem; border-radius: 3px;
  display: grid; place-items: center;
  border: 1px solid #00000026; color: #fff; cursor: pointer;
}
.sq-btn.edit { background: linear-gradient(180deg, #f0ad4e, #e09b3b); }
.sq-btn.del { background: linear-gradient(180deg, #e2574c, #d33f33); }
.sq-btn.add { background: linear-gradient(180deg, #4a90d9, #3a7bc0); }
.sq-btn:hover { filter: brightness(1.06); text-decoration: none; }
.sq-btn[disabled], .sq-btn.disabled { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------- table toolbar -- */
.dt-toolbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--border-faint);
}
.dt-toolbar .exports { display: flex; gap: .25rem; }
.dt-toolbar .exports .btn { padding: .2rem .55rem; font-size: 11px; }
.dt-toolbar .search { display: flex; align-items: center; gap: .35rem; }
.dt-toolbar .search input { width: 11rem; }
.dt-toolbar .right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.dt-toolbar label { font-size: 11px; color: var(--fg-muted); }

.pager { display: flex; gap: .2rem; }
.pager a, .pager span {
  padding: .22rem .55rem; font-size: 11px;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--grad-btn); color: var(--fg-muted);
}
.pager .current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager .off { opacity: .45; pointer-events: none; }

[data-skin="classic"] table.data thead th {
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: .02em; text-transform: none; color: #444; font-weight: 700;
}
[data-skin="classic"] table.data td { border-bottom: 1px solid #ededed; }

/* Modern-only furniture that Classic drops. */
[data-skin="classic"] .page-head .eyebrow { display: none; }
[data-skin="classic"] .page-head h1 { font-size: 1.15rem; font-weight: 700; }
[data-skin="classic"] .live-pill { border-radius: 3px; }
[data-skin="classic"] .stat .v { font-size: 1.3rem; font-weight: 700; }
[data-skin="classic"] .stat .v.multi { font-size: 1.05rem; }

/* Classic is light by design: the dark/light toggle has nothing to do. */
[data-skin="classic"] .mode-toggle { display: none; }

@media (max-width: 1100px) {
  .dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-boxes { grid-template-columns: 1fr; }
}