/* App-specific styling layered on top of the ZYNIX theme (dashboard/assets/css/styles.css) */

/* ---------------------------------------------------------------- palette
 * ONE platform colour: blood red. It drives everything "primary" (buttons,
 * links, active menu, switches, charts, the brand mark, the login page), and
 * a darker shade of the same red is the theme's "secondary", so outlined and
 * filled buttons stay distinguishable without a second hue. It replaced
 * ZYNIX's violet-blue #735DFF on 2026-10-22. The app icons in icons/ use the
 * same red; see tools/gen_icons.php.
 *
 * Changing the colour means changing the -rgb lines here. The theme derives
 * --primary-color and --primary01..09 from --primary-rgb, so about 550 rules
 * follow. Bootstrap's own --bs-primary is set too, for the text-primary /
 * bg-primary-subtle / border-primary-subtle utilities the app's own markup
 * uses. PHP and chart code read --app-brand rather than repeating a hex.
 *
 * Danger (errors) and success keep the theme's own brighter red and green:
 * an error still has to read as an error, and "done" as done.
 */
:root {
  --app-brand-rgb: 138, 11, 20;          /* #8A0B14 blood red */
  --app-brand-dark-rgb: 92, 6, 13;       /* #5C060D */
  --app-brand: rgb(var(--app-brand-rgb));
  --app-brand-dark: rgb(var(--app-brand-dark-rgb));

  --primary-rgb: var(--app-brand-rgb);
  --secondary-rgb: var(--app-brand-dark-rgb);

  --bs-primary: var(--app-brand);
  --bs-primary-rgb: var(--app-brand-rgb);
  --bs-primary-text-emphasis: var(--app-brand-dark);
  --bs-primary-bg-subtle: rgba(var(--app-brand-rgb), .1);
  --bs-primary-border-subtle: rgba(var(--app-brand-rgb), .35);
  --bs-secondary: var(--app-brand-dark);
  --bs-secondary-rgb: var(--app-brand-dark-rgb);
  --bs-link-color: var(--app-brand);
  --bs-link-hover-color: var(--app-brand-dark);
}

.app-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  /* Solid brand color, not translucent-on-dark-sidebar: this theme runs
     data-menu-styles="light" (white sidebar background), so a
     rgba(255,255,255,.15) fill with white icon color was white-on-white
     and effectively invisible. */
  background: var(--app-brand);
  color: #fff;
  font-size: 1.05rem;
}

.app-brand-text {
  /* Same reasoning as .app-brand-mark above: the theme's light sidebar
     means a white-text class here was invisible against it. */
  color: #2a2540;
  font-size: 1.05rem;
}

.stat-card {
  border: 1px solid var(--default-border, #e9edf1);
  border-radius: 0.75rem;
  height: 100%;
}
.stat-card .stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}
.stat-card .stat-delta.up { color: #17a06d; }
.stat-card .stat-delta.down { color: #e5484d; }

.business-tile {
  border: 1px solid var(--default-border, #e9edf1);
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow .15s ease, transform .15s ease;
}
.business-tile:hover {
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08);
  transform: translateY(-2px);
  color: inherit;
}
.business-tile .biz-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
}

.habit-check {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--default-border, #d8dee4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
  transition: all .12s ease;
}
.habit-check.done {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.task-row.done .task-title { text-decoration: line-through; opacity: .55; }
.task-row .priority-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.priority-high { background: #e5484d; }
.priority-medium { background: #f5a623; }
.priority-low { background: #8a94a6; }

.progress-thin { height: 6px; border-radius: 4px; }

.tab-pills .nav-link {
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .875rem;
}

.ai-plan-item {
  border-left: 3px solid var(--primary-color);
  padding: .5rem .75rem;
  background: rgba(var(--app-brand-rgb), .05);
  border-radius: 0 .5rem .5rem 0;
}
.ai-plan-item.is-done { opacity: .55; }
.ai-plan-item.is-done .plan-title { text-decoration: line-through; }

#responsive-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 999;
}
html[data-toggled="close"] #responsive-overlay { display: none; }

@media (max-width: 991.98px) {
  html[data-toggled="open"] #responsive-overlay { display: block; }
}

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--app-brand) 0%, var(--app-brand-dark) 100%);
}
.login-card {
  width: 100%;
  max-width: 380px;
  border-radius: 1rem;
  border: none;
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,.25);
}

/* ---- Notification diagnostics (settings.php) ---- */

.push-diag {
  display: grid;
  gap: .5rem;
}

.push-diag-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--default-border, #e9edf6);
  font-size: .8rem;
}

.push-diag-label {
  font-weight: 600;
  color: #4b5675;
}

.push-diag-value {
  color: #6c757d;
  word-break: break-word;
}

.push-diag-ok { color: #16a34a; }
.push-diag-warn { color: #b45309; }
.push-diag-bad { color: #dc2626; font-weight: 600; }

.push-shot {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--default-border, #e9edf6);
  border-radius: .65rem;
}

/* The badge is a white silhouette, so it needs a dark square to be visible. */
.push-shot-dark {
  background: #1c1f2b;
  border-color: #1c1f2b;
}

@media (max-width: 575.98px) {
  .push-diag-row {
    grid-template-columns: 1fr;
    gap: .1rem;
  }
}

/* --- Today's idea card ------------------------------------------------- */
/* Each field of a generated idea is its own copyable block. .idea-text is a
   <pre> so the script's line breaks survive the round-trip to the clipboard
   exactly as written — but it must not inherit a monospace face, which
   renders Arabic badly and makes a voice-over script read like code. */
.idea-block-label {
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
}
.idea-text {
  font-family: inherit;
  font-size: .875rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: .625rem .75rem;
  border-radius: .375rem;
  background: var(--bs-tertiary-bg, #f6f7f9);
  border: 1px solid var(--bs-border-color, #e5e7eb);
  max-height: 22rem;
  overflow-y: auto;
}
/* Arabic needs a real Arabic stack and more line height — the Latin default
   clips ascenders/descenders on joined forms. */
.idea-text-rtl {
  font-family: "Cairo", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-size: .95rem;
  line-height: 1.9;
  text-align: right;
}
.idea-block .idea-copy { font-size: .75rem; }

/* --- Ideas library ---------------------------------------------------- */
/* One row per generated idea, expandable to the full card. min-width:0 on
   the text column is what stops a long Arabic title from pushing the
   action buttons off the row. */
.idea-lib-row {
  padding: .75rem 0;
  border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
}
.idea-lib-row:last-child { border-bottom: 0; }
.idea-lib-row .min-w-0 { min-width: 0; }
.idea-lib-body {
  border-inline-start: 2px solid var(--bs-border-color, #e5e7eb);
  padding-inline-start: .75rem;
}

/* --- To-do reminders --------------------------------------------------- */
/* min-width:0 on the text column is what keeps a long title from shoving
   the tick and the action buttons off the row (same fix as .idea-lib-row). */
.todo-row {
  padding: .6rem 0;
  border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
}
.todo-row:last-child { border-bottom: 0; }
.todo-row .min-w-0 { min-width: 0; }
.todo-row.is-done .todo-title { text-decoration: line-through; opacity: .5; }
.todo-row.is-done .habit-check { opacity: .65; }
.todo-row .btn-icon { --bs-btn-padding-x: .35rem; --bs-btn-padding-y: .15rem; }
/* The tick is the primary gesture on this row and the rows are dense, so it
   gets a round, slightly smaller target than the habit squares it borrows. */
.todo-row .todo-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-top: .1rem;
}