/* Tampilan 2026 "Calm Bento": font, sudut, bayangan, kaca, dashboard bento, dan mode gelap.
   Dimuat setelah file CSS lain sehingga aturan di sini menimpa tampilan lama.
   Warna dan ukuran diatur lewat variables.css. */

body {
  font-family: var(--font);
  font-feature-settings: 'tnum' 1, 'cv11' 1;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.brand,
.metric .number {
  letter-spacing: -0.02em;
}

a {
  color: var(--link);
}

/* ---- Tombol ---- */
button {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

button.ghost {
  box-shadow: none;
}

button.primary {
  box-shadow: 0 1px 0 #ffffff66 inset, 0 6px 18px color-mix(in srgb, var(--lime) 45%, transparent);
}

.sidebar nav button {
  box-shadow: none;
  border-radius: 12px;
}

.sidebar nav button.active {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--lime) 30%, transparent);
}

/* ---- Topbar kaca, menempel saat di-scroll ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--glass);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent);
}

.search {
  background: var(--surface-2);
  border-radius: 999px;
  padding-left: 16px;
}

.theme-toggle {
  width: 42px;
  padding: 0;
  justify-content: center;
}

.theme-toggle .icon {
  transition: transform var(--dur) var(--ease-spring);
}

.theme-toggle:hover .icon {
  transform: rotate(-20deg) scale(1.08);
}

/* ---- Kartu dan panel ---- */
.metric,
.panel,
.hero {
  border-radius: var(--radius);
}

.metric,
.panel {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.metric.dark {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--lime) 28%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, #24402f, var(--dark));
  border-color: transparent;
}

.metric .number {
  font-weight: 750;
}

.project-card {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.column {
  background: var(--surface-3);
  border-radius: var(--radius);
}

.hero {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--lime) 35%, var(--line));
  background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--lime) 45%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--soft), var(--surface));
}

.hero p {
  color: var(--muted);
}

.hero-orbit {
  border-color: color-mix(in srgb, var(--lime) 70%, transparent);
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--lime) 18%, transparent),
    0 0 0 26px color-mix(in srgb, var(--lime) 8%, transparent);
}

.tabs button {
  border-radius: 999px;
}

.tag {
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--tag-bg);
  color: var(--tag-ink);
  font-weight: 600;
}

.tag.red {
  background: var(--tag-red-bg);
  color: var(--tag-red-ink);
}

.tag.blue {
  background: var(--tag-blue-bg);
  color: var(--tag-blue-ink);
}

.tag.amber {
  background: var(--tag-amber-bg);
  color: var(--tag-amber-ink);
}

.tag.gray {
  background: var(--tag-gray-bg);
  color: var(--tag-gray-ink);
}

.tag.green {
  background: var(--tag-green-bg);
  color: var(--tag-green-ink);
}

td,
.row {
  border-bottom-color: var(--line-soft);
}

/* ---- Form dan dialog ---- */
input,
select,
textarea {
  background: var(--surface);
  border-color: var(--field-border);
  border-radius: 12px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--lime) 80%, var(--ink) 20%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 30%, transparent);
}

.fields label {
  color: var(--muted);
}

dialog {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border-color: var(--line);
}

dialog::backdrop {
  background: #0d1f16a6;
  backdrop-filter: blur(6px);
}

.dialog-head {
  background: var(--surface);
}

.detail > div {
  background: var(--surface-2);
}

#toast {
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

.bottom-nav {
  background: var(--glass);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
}

/* ---- Dashboard Hari Ini: bento grid ---- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    'hero hero m1 m2'
    'prio prio m3 m4'
    'prio prio scope scope'
    'cash cash sched sched';
  gap: 16px;
  margin: 22px 0;
  align-items: start;
}

.bento > .metrics,
.bento > .grid2 {
  display: contents;
}

.bento > .hero {
  grid-area: hero;
  align-self: stretch;
}

.bento .metric {
  align-self: stretch;
}

.bento .metric:nth-child(1) {
  grid-area: m1;
}

.bento .metric:nth-child(2) {
  grid-area: m2;
}

.bento .metric:nth-child(3) {
  grid-area: m3;
}

.bento .metric:nth-child(4) {
  grid-area: m4;
}

.bento > .grid2:not(.equal) > :nth-child(1) {
  grid-area: prio;
  align-self: stretch;
}

.bento > .grid2:not(.equal) > :nth-child(2) {
  grid-area: scope;
  align-self: stretch;
}

.bento > .grid2.equal > :nth-child(1) {
  grid-area: cash;
  align-self: stretch;
}

.bento > .grid2.equal > :nth-child(2) {
  grid-area: sched;
  align-self: stretch;
}

@media (max-width: 1150px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'hero hero'
      'm1 m2'
      'm3 m4'
      'prio prio'
      'scope scope'
      'cash cash'
      'sched sched';
  }
}

@media (max-width: 760px) {
  .bento {
    gap: 12px;
  }

  .bento .metric .number {
    font-size: clamp(17px, 5.2vw, 22px);
    overflow-wrap: normal;
    white-space: nowrap;
  }

  /* Topbar HP: tombol Input cepat cukup ikon + agar tidak terlipat. */
  .topbar button.primary .small {
    display: none;
  }

  .topbar button.primary {
    width: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
  }
}

/* ---- Mode gelap: elemen yang dulu memakai warna tetap ---- */
:root[data-theme='dark'] .sidebar {
  background: #0a130f;
  border-right: 1px solid var(--line);
}

:root[data-theme='dark'] .tabs .active {
  background: var(--lime);
  color: var(--accent-ink, #172820);
  border-color: var(--lime);
}

:root[data-theme='dark'] .bar.out {
  background: #33473b;
}

:root[data-theme='dark'] .progress {
  background: var(--surface-2);
}

:root[data-theme='dark'] .notice {
  background: #2e2614;
  border-color: #4d3f1c;
  color: #e3c588;
}

:root[data-theme='dark'] .notice.error {
  background: #33201b;
  border-color: #5a3127;
  color: #f0a090;
}

:root[data-theme='dark'] .notice.demo {
  background: #1f2d18;
  border-color: #344a26;
  color: #bfd88a;
}

:root[data-theme='dark'] .step {
  background: var(--surface-2);
}

:root[data-theme='dark'] .avatar {
  background: #2a3a1e;
  color: #cfe39a;
}

:root[data-theme='dark'] .ws-invoice-popup,
:root[data-theme='dark'] .invoice-more,
:root[data-theme='dark'] .project-filter-panel,
:root[data-theme='dark'] #main .invoice-table thead th {
  background: var(--surface);
}

:root[data-theme='dark'] .compact-project-board .project-card.color-background {
  background: color-mix(in srgb, var(--service-edge) 16%, var(--surface));
}

:root[data-theme='dark'] .compact-project-board .service-tag {
  background: color-mix(in srgb, var(--service-edge) 28%, var(--surface));
  color: var(--ink);
}

:root[data-theme='dark'] .ws-splash {
  background: radial-gradient(ellipse at 50% 42%, #18271f 0%, var(--bg) 65%);
}

:root[data-theme='dark'] .ws-splash-name {
  color: var(--ink);
}

:root[data-theme='dark'] .ws-splash-track {
  background: #24372d;
}

:root[data-theme='dark'] .ws-column {
  fill: var(--ink);
}

:root[data-theme='dark'] .login-shell > :not(.login-art) {
  background: var(--bg);
}