/* ==========================================================================
   Triple panel — on top of the Nazox template (RTL build)
   --------------------------------------------------------------------------
   The template's own blue was replaced with the brand purple inside its CSS
   (every derived shade at Bootstrap's ratios). What is here is only what
   the template does not do: an Arabic typeface, the Triple logo, the sign-in
   backdrop, and the pieces this panel adds (block editor, region editor).
   ========================================================================== */

:root {
  --tp-purple: #663399;
  --tp-purple-dark: #3A2B63;
  --tp-gold: #F5B91E;
  --bs-font-sans-serif: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

body,
.btn, .form-control, .form-select, .dropdown-menu, .tooltip, .popover, .toast,
.swal2-popup, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-font-sans-serif) !important;
}

/* numbers, codes and addresses read left to right inside Arabic */
.ltr, input[type="tel"], input[type="url"], .text-ltr { direction: ltr; unicode-bidi: isolate; }
input[type="tel"], input[type="url"] { text-align: left; }

/* ---------------------------------------------------------------- brand */

.navbar-brand-box .logo-lg img { height: 30px; }
.navbar-brand-box .logo-sm img { height: 26px; }

/* ------------------------------------------------------------- sign-in */

.auth-body-bg { background: #fff; }
.tp-auth-side {
  min-height: 100vh;
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(245, 185, 30, .18) 0%, rgba(245, 185, 30, 0) 60%),
    linear-gradient(150deg, var(--tp-purple) 0%, var(--tp-purple-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; padding: 48px;
}
.tp-auth-side h2 { color: #fff; font-weight: 700; margin-bottom: 14px; }
.tp-auth-side p { color: rgba(255, 255, 255, .78); max-width: 38ch; line-height: 1.8; margin: 0; }
.tp-auth-logo { height: 42px; }

/* -------------------------------------------------------------- lists */

.tp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tp-thumb { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; background: #f1f1f5; }
.tp-thumb--square { width: 40px; height: 40px; object-fit: contain; background: #fff; border: 1px solid #eee; }

/* sortable rows (clients, gallery) */
.tp-sortable > * { cursor: grab; }
.tp-sortable .gu-transit { opacity: .35; }
.gu-mirror { box-shadow: 0 12px 30px rgba(26, 19, 50, .18); }

/* ------------------------------------------------------ block editor */

.tp-block { border: 1px solid #e9e9ef; border-radius: 10px; background: #fff; margin-bottom: 12px; }
.tp-block__head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid #f0f0f4; background: #fafafc;
  border-radius: 10px 10px 0 0;
}
.tp-block__handle { cursor: grab; color: #9a9ab0; font-size: 18px; line-height: 1; }
.tp-block__type { font-weight: 600; font-size: 13px; color: var(--tp-purple); }
.tp-block__tools { margin-inline-start: auto; display: flex; gap: 4px; }
.tp-block__body { padding: 12px; }
.tp-block__body textarea { min-height: 84px; }
.tp-block .form-text { font-size: 12px; }

/* ----------------------------------------------------- region editor */

.tp-region { padding: 14px 0; border-bottom: 1px dashed #ececf2; }
.tp-region:last-child { border-bottom: 0; }
.tp-region label { font-size: 13px; color: #5b5b72; }
.tp-region.is-pending { background: linear-gradient(to left, rgba(245, 185, 30, .08), transparent); }
.tp-pending-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tp-gold); margin-inline-end: 6px; }
.tp-region-img { max-height: 90px; max-width: 100%; border-radius: 6px; border: 1px solid #eee; background: #fff; }

/* the sticky save bar on long forms */
.tp-savebar {
  position: sticky; bottom: 0; z-index: 10;
  background: rgba(255, 255, 255, .96); border-top: 1px solid #ececf2;
  padding: 12px 0; margin-top: 18px;
  backdrop-filter: blur(6px);
}

/* ----------------------------------------------------------- dashboard */

.tp-section-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; margin: 4px 0 14px; }

/* daily bars, drawn with flex so no chart library is needed; in RTL the
   first (oldest) day sits on the right, as the Arabic reads */
.tp-bars { display: flex; align-items: flex-end; gap: 3px; height: 170px; padding-top: 6px; }
.tp-bars__bar { flex: 1 1 0; min-width: 3px; background: var(--tp-purple); opacity: .82; border-radius: 3px 3px 0 0; transition: opacity .15s; }
.tp-bars__bar:hover { opacity: 1; }
.tp-bars__bar--zero { background: #e4e4ec; }
.tp-bars-axis { display: flex; justify-content: space-between; font-size: 12px; color: #74788d; margin-top: 8px; direction: rtl; }

.tp-share { height: 6px; background: #f1f1f5; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.tp-share > span { display: block; height: 100%; background: var(--tp-purple); border-radius: 3px; }

.tp-health li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f1f1f5; }
.tp-health li:last-child { border-bottom: 0; }
.tp-health__badge { min-width: 62px; padding: 5px 8px; font-size: 12px; }