/* =========================================================
   TrinkCeb — mock product UI kit
   Real HTML/CSS interface pieces used as product visuals.
   Everything is sized in `em`, and the window's font-size is
   derived from its container width, so a mockup scales like
   an image while staying crisp, accessible markup.
   ========================================================= */

.ui-frame { container-type: inline-size; }

.ui-window {
  --ui-scale: 1.32;
  --ui-min: 5.5px;
  --ui-max: 15px;
  font-size: clamp(var(--ui-min), calc(var(--ui-scale) * 1cqw), var(--ui-max));
  line-height: 1.4;
  text-align: left;
  color: var(--text);
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 1.1em;
  overflow: hidden;
  box-shadow:
    0 0.1em 0.2em rgba(17, 24, 39, 0.04),
    0 2em 4em -1em rgba(17, 24, 39, 0.18),
    0 4em 8em -3em rgba(11, 97, 255, 0.25);
}

@container (max-width: 700px) {
  .ui-window { --ui-scale: 2.3; --ui-min: 6px; }
  .ui-app { grid-template-columns: minmax(0, 1fr) !important; }
  .ui-side { display: none !important; }
}

.ui-window .icon { width: 1.15em; height: 1.15em; }

/* Window chrome */
.ui-window__bar {
  position: relative;
  display: flex; align-items: center; gap: 0.45em;
  height: 2.6em;
  padding: 0 1em;
  background: #F8F9FB;
  border-bottom: 1px solid var(--line);
}
.ui-window__bar > span { width: 0.75em; height: 0.75em; border-radius: 50%; background: #E2E5EA; }
.ui-window__bar > span:nth-child(1) { background: #FF5F57; }
.ui-window__bar > span:nth-child(2) { background: #FEBC2E; }
.ui-window__bar > span:nth-child(3) { background: #28C840; }
.ui-window__title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 0.8em; font-weight: 600; color: var(--subtle);
  white-space: nowrap;
}

/* App shell */
.ui-app { display: grid; grid-template-columns: 13em minmax(0, 1fr); }

.ui-side {
  display: flex; flex-direction: column; gap: 0.25em;
  padding: 1.4em 0.9em;
  border-right: 1px solid var(--line);
  background: #fff;
}
.ui-side__brand {
  display: flex; align-items: center; gap: 0.55em;
  padding: 0 0.6em 1.2em;
  font-weight: 800; font-size: 1.05em; color: var(--dark); letter-spacing: -0.02em;
}
.ui-side__brand img { height: 1.5em; width: auto; }
.ui-nav {
  display: flex; align-items: center; gap: 0.7em;
  padding: 0.65em 0.8em;
  border-radius: 0.6em;
  font-size: 0.9em; font-weight: 500; color: var(--muted);
  transition: background .45s var(--ease), color .45s var(--ease);
}
.ui-nav.is-active { background: var(--brand-50); color: var(--brand); font-weight: 700; }
.ui-side__user {
  margin-top: auto;
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.7em; border-radius: 0.7em; background: var(--bg-soft);
}
.ui-side__user b { display: block; font-size: 0.82em; color: var(--dark); }
.ui-side__user small { display: block; font-size: 0.72em; color: var(--subtle); }

.ui-avatar {
  width: 2.4em; height: 2.4em; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--brand); color: #fff;
  font-size: 0.78em; font-weight: 700; letter-spacing: 0.02em;
}
.ui-avatar--purple { background: var(--purple); }
.ui-avatar--orange { background: #F97316; }
.ui-avatar--gray { background: #9CA3AF; }
.ui-avatar--green { background: var(--green); }
.ui-avatar--lg { width: 3em; height: 3em; }

.ui-main {
  min-width: 0;
  display: flex; flex-direction: column; gap: 1.1em;
  padding: 1.3em 1.5em 1.6em;
  background: var(--bg-soft);
}

.ui-top { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.ui-search {
  display: flex; align-items: center; gap: 0.6em;
  width: 58%;
  padding: 0.6em 0.9em;
  border-radius: 0.7em; border: 1px solid var(--line); background: #fff;
  font-size: 0.82em; color: var(--faint);
  white-space: nowrap; overflow: hidden;
}
.ui-top__icons { display: flex; gap: 0.5em; }
.ui-top__icons span {
  width: 2.4em; height: 2.4em; border-radius: 0.6em;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
}

.ui-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.ui-head h4 { font-size: 1.45em; font-weight: 800; color: var(--dark); letter-spacing: -0.025em; line-height: 1.2; }
.ui-head p { font-size: 0.82em; color: var(--subtle); margin-top: 0.15em; }

.ui-seg {
  display: flex; padding: 0.25em; gap: 0.15em;
  border-radius: 0.6em; border: 1px solid var(--line); background: #fff;
  font-size: 0.78em;
}
.ui-seg span { padding: 0.4em 0.85em; border-radius: 0.45em; font-weight: 600; color: var(--muted); }
.ui-seg .on { background: var(--brand); color: #fff; }

.ui-btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.6em 1em; border-radius: 0.6em;
  background: var(--brand); color: #fff;
  font-size: 0.8em; font-weight: 600; white-space: nowrap;
}

/* Stats */
.ui-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.ui-stat {
  display: flex; flex-direction: column; gap: 0.2em;
  padding: 1em 1.1em;
  border-radius: 0.9em; border: 1px solid var(--line); background: #fff;
}
.ui-stat small { font-size: 0.76em; font-weight: 500; color: var(--subtle); }
.ui-stat b { font-size: 1.5em; font-weight: 800; color: var(--dark); letter-spacing: -0.025em; line-height: 1.2; }
.ui-stat em { font-style: normal; font-size: 0.72em; font-weight: 700; color: var(--subtle); }
.ui-stat em.up { color: var(--green); }
.ui-stat em.warn { color: var(--orange); }

/* Cards */
.ui-grid-2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1em; }
.ui-grid-2--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

.ui-card {
  min-width: 0;
  padding: 1.1em 1.2em;
  border-radius: 0.9em; border: 1px solid var(--line); background: #fff;
}
.ui-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; margin-bottom: 0.8em; }
.ui-card__head b { font-size: 0.92em; font-weight: 700; color: var(--dark); }

.ui-chip {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.3em 0.7em; border-radius: 99em;
  background: var(--line-soft); color: var(--subtle);
  font-size: 0.72em; font-weight: 700; white-space: nowrap; line-height: 1.3;
}
.ui-chip .icon { width: 1em; height: 1em; }
.ui-chip--green { background: var(--green-bg); color: var(--green); }
.ui-chip--orange { background: var(--orange-bg); color: var(--orange); }
.ui-chip--red { background: var(--red-bg); color: var(--red); }
.ui-chip--brand { background: var(--brand-50); color: var(--brand); }

.ui-link { font-size: 0.78em; font-weight: 600; color: var(--brand); }

.ui-chart { width: 100%; height: 8.5em; overflow: visible; }
.ui-axis {
  display: flex; justify-content: space-between;
  margin-top: 0.5em;
  font-size: 0.7em; font-weight: 500; color: var(--faint);
}

.ui-proj {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35em 0.6em;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--line-soft);
}
.ui-proj:last-child { border-bottom: 0; padding-bottom: 0; }
.ui-proj b { display: block; font-size: 0.84em; color: var(--dark); }
.ui-proj small { display: block; font-size: 0.72em; color: var(--subtle); }
.ui-proj > span { align-self: center; font-size: 0.8em; font-weight: 700; color: var(--dark); }
.ui-proj .ui-bar { grid-column: 1 / -1; }

.ui-bar { height: 0.45em; border-radius: 99em; background: var(--line-soft); overflow: hidden; }
.ui-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transform-origin: left; }
.ui-bar--sm { width: 5em; }

.dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; flex-shrink: 0; }
.dot--gray { background: #9CA3AF; }
.dot--blue { background: var(--brand); }
.dot--green { background: var(--green); }
.dot--orange { background: var(--orange); }

.legend { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.7em; color: var(--subtle); white-space: nowrap; }
.legend i { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 0.2em; }
.legend i + i, .legend__b { margin-left: 0.4em; }
.legend__a { background: var(--brand); }
.legend__b { background: #C7D2E3; }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9em; }
.kanban__col { display: flex; flex-direction: column; gap: 0.6em; padding: 0.8em; border-radius: 0.9em; background: #EFF2F7; }
.kanban__title { display: flex; align-items: center; gap: 0.5em; font-size: 0.78em; font-weight: 700; color: var(--muted); padding: 0 0.2em 0.2em; }
.kanban__title em { margin-left: auto; font-style: normal; color: var(--faint); }
.kcard {
  display: flex; flex-direction: column; gap: 0.4em;
  padding: 0.8em; border-radius: 0.7em;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 0.1em 0.3em rgba(17, 24, 39, 0.04);
}
.kcard b { font-size: 0.84em; color: var(--dark); }
.kcard small { font-size: 0.72em; color: var(--subtle); margin-top: -0.25em; }
.kcard__meta { display: flex; gap: 0.4em; }
.kcard--done { background: #FCFDFC; }

/* CRM */
.crm { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1em; }
.crm__list { padding: 0.4em 0.9em; border-radius: 0.9em; border: 1px solid var(--line); background: #fff; }
.crm__row {
  display: flex; align-items: center; gap: 0.8em;
  padding: 0.7em 0;
  border-bottom: 1px solid var(--line-soft);
}
.crm__row:last-child { border-bottom: 0; }
.crm__row > div { flex: 1; min-width: 0; }
.crm__row b { display: block; font-size: 0.84em; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm__row small { display: block; font-size: 0.72em; color: var(--subtle); }
.crm__row.is-selected { margin: 0 -0.5em; padding-left: 0.5em; padding-right: 0.5em; border-radius: 0.6em; background: var(--brand-50); border-bottom-color: transparent; }
.crm__detail { display: flex; flex-direction: column; gap: 1em; padding: 1.1em; border-radius: 0.9em; border: 1px solid var(--line); background: #fff; }
.crm__detail-head { display: flex; align-items: center; gap: 0.8em; }
.crm__detail-head b { display: block; font-size: 1em; color: var(--dark); }
.crm__detail-head small { display: block; font-size: 0.74em; color: var(--subtle); }
.crm__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.crm__facts div { padding: 0.6em 0.8em; border-radius: 0.6em; background: var(--bg-soft); }
.crm__facts small { display: block; font-size: 0.7em; color: var(--subtle); }
.crm__facts b { font-size: 1.2em; color: var(--dark); }
.crm__note {
  display: flex; gap: 0.5em; align-items: flex-start;
  padding: 0.6em 0.7em; border-radius: 0.6em;
  background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E;
  font-size: 0.76em;
}

/* Bars */
.bars {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.9em;
  height: 8em; align-items: end;
}
.bars > div { display: flex; align-items: flex-end; justify-content: center; gap: 0.25em; height: 100%; }
.bars i {
  display: block; width: 38%; height: var(--h);
  border-radius: 0.3em 0.3em 0.1em 0.1em;
  background: var(--brand); transform-origin: bottom;
}
.bars i:nth-child(2) { background: #C7D2E3; }

/* Invoices */
.inv {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.8em; align-items: center;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--line-soft);
}
.inv:last-child { border-bottom: 0; padding-bottom: 0; }
.inv b { display: block; font-size: 0.8em; color: var(--dark); }
.inv small { display: block; font-size: 0.7em; color: var(--subtle); }
.inv > span:not(.ui-chip) { font-size: 0.8em; font-weight: 700; color: var(--dark); }

/* Showcase grid */
.sc-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.1em;
  padding: 1.4em;
  background: var(--bg-soft);
}
.sc-card {
  min-width: 0;
  padding: 1.2em 1.3em;
  border-radius: 1em; border: 1px solid var(--line); background: #fff;
  box-shadow: 0 0.1em 0.4em rgba(17, 24, 39, 0.04);
}
.sc-card--projects { grid-column: span 3; grid-row: span 2; display: flex; flex-direction: column; gap: 1em; }
.sc-card--income { grid-column: span 9; }
.sc-card--customers, .sc-card--invoices, .sc-card--tasks { grid-column: span 3; }
.sc-card .crm__row { padding: 0.55em 0; }

.sc-big b { display: block; font-size: 3em; font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--dark); }
.sc-big small { font-size: 0.82em; color: var(--subtle); }
.sc-ring { display: flex; align-items: center; gap: 1em; }
.sc-ring svg { width: 5.6em; height: 5.6em; flex-shrink: 0; }
.sc-ring b { display: block; font-size: 1.35em; font-weight: 800; color: var(--dark); }
.sc-ring small { font-size: 0.74em; color: var(--subtle); }
.sc-mini { padding-top: 0.2em; border-top: 1px solid var(--line-soft); }
.sc-legend { list-style: none; display: grid; gap: 0.5em; margin-top: auto; }
.sc-legend li { display: flex; align-items: center; gap: 0.5em; font-size: 0.78em; color: var(--muted); }
.sc-legend b { margin-left: auto; color: var(--dark); }

.sc-totals { display: flex; flex-wrap: wrap; gap: 0.6em 2.4em; margin-bottom: 0.6em; }
.sc-totals small { display: block; font-size: 0.74em; color: var(--subtle); }
.sc-totals b { font-size: 1.5em; font-weight: 800; letter-spacing: -0.025em; color: var(--dark); font-variant-numeric: tabular-nums; }
.sc-chart { width: 100%; height: 10.5em; overflow: visible; }
.sc-amount { font-size: 0.8em; font-weight: 700; color: var(--dark); white-space: nowrap; }

.task {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.55em 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.82em; font-weight: 600; color: var(--dark);
}
.task:last-child { border-bottom: 0; }
.task small { margin-left: auto; font-size: 0.85em; font-weight: 500; color: var(--subtle); white-space: nowrap; }
.task__check {
  width: 1.3em; height: 1.3em; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 0.4em; border: 0.13em solid #D1D5DB; color: #fff;
}
.task__check .icon { width: 0.85em; height: 0.85em; stroke-width: 3; }
.task.is-done { color: var(--subtle); }
.task.is-done .task__check { background: var(--brand); border-color: var(--brand); }

@container (max-width: 700px) {
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-card--projects, .sc-card--income { grid-column: span 2; grid-row: auto; }
  .sc-card--customers, .sc-card--invoices, .sc-card--tasks { grid-column: span 1; }
  .sc-card--tasks { grid-column: span 2; }
  .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kanban__col:last-child { display: none; }
  .crm { grid-template-columns: 1fr; }
}