/* ==========================================================================
   ZETIOR — CUSTOM STYLES
   ==========================================================================

   The single home for ALL custom CSS and styling overrides across the app.
   Loaded LAST (after styles.css / app.css) in every panel header, so rules
   here win the cascade without needing !important.

   Loaded by:
     - app/Views/admin/components/header.php      (Admin panel)
     - app/Views/dashboard/components/header.php  (Tenant dashboard)
     - app/Views/auth/components/header.php       (Auth screens)

   ---------------------------------------------------------------------------
   RULES OF THE ROAD
   ---------------------------------------------------------------------------
   1. Write custom CSS HERE — not inline `style=""` in views. Inline styles are
      only for values that are genuinely dynamic (computed per-row/per-record in
      PHP or Vue, e.g. a progress bar width).

   2. DO NOT rely on new Tailwind utility classes in views. The portal ships a
      PREBUILT Tailwind bundle: only classes that existed at build time are
      compiled. A brand-new arbitrary utility (e.g. `h-[25px]`) silently does
      NOTHING. Add a semantic class here instead.

   3. Put each rule in the section it belongs to, under the panel scope it
      applies to. Prefer app-wide (Section 2+) over panel-specific (Section 8)
      when the styling should be consistent everywhere.

   4. Keep selectors low-specificity and semantic (`.app-header-logo`), not
      brittle chains (`header > div > a > img`).

   ---------------------------------------------------------------------------
   TABLE OF CONTENTS
   ---------------------------------------------------------------------------
   1. Variables / tokens
   2. Base & resets
   3. Layout (header, sidebar, footer, containers)
   4. Branding (logos, marks)
   5. Components (buttons, badges, cards, modals)
   6. Forms & inputs
   7. Tables & data grids
   8. Panel-specific overrides (admin / dashboard / auth)
   9. Utilities & helpers
  10. Responsive tweaks
  11. Print
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES / TOKENS
   Central knobs. Reference these instead of hardcoding repeated values.
   ========================================================================== */

:root {
  /* Brand */
  --zx-brand: #0d5c63;
  --zx-brand-dark: #0b4f51;

  /* Branding sizes */
  --zx-header-logo-height: 25px;   /* mobile/topbar mark height */
  --zx-sidebar-logo-height: 22px;  /* sidebar mark height */

  /* Chat / inbox */
  --zx-chat-list-width: 380px;     /* conversation list pane */
  --zx-chat-header-height: 3.5rem; /* both pane headers */
  --zx-chat-bubble-in: #fff;
  --zx-chat-bubble-out: #d9fdd3;
  --zx-chat-canvas: #f4f4f5;
  --zx-chat-tick-read: #0ea5e9;
}


/* ==========================================================================
   2. BASE & RESETS
   App-wide element defaults. Keep this section small.
   ========================================================================== */

/* (none yet) */


/* ==========================================================================
   3. LAYOUT
   Header, sidebar, footer, page containers.
   ========================================================================== */

/* (none yet) */


/* ==========================================================================
   4. BRANDING
   Logos and brand marks.
   ========================================================================== */

/*
 * Header logo mark (mobile/topbar).
 *
 * The source images are large squares (mini-logo.png is 1080x1080), so the
 * height MUST be constrained or the raw image renders at full size. Width is
 * auto so the aspect ratio is preserved and the mark never distorts.
 *
 * Lives here (not as a Tailwind class) because the portal Tailwind bundle is
 * prebuilt — `h-[25px]`/`w-auto` are not compiled into it and would no-op.
 *
 * Used by: admin + dashboard header (mobile logo).
 */
.app-header-logo {
  height: var(--zx-header-logo-height);
  width: auto;
  display: block;
}

/*
 * Sidebar logo marks (.default-logo = expanded, .small-logo = collapsed).
 *
 * Size ONLY — never set `display` here. The KT theme toggles these marks via
 * `display` on sidebar collapse (styles.css: `.small-logo{display:none}` and
 * `.kt-sidebar-collapse .kt-sidebar:not(:hover) .default-logo{display:none}`).
 * custom.css loads last, so a `display` rule here would override that and break
 * the collapse behaviour (both logos showing at once).
 */
.app-sidebar-logo {
  height: var(--zx-sidebar-logo-height);
  width: auto;
  max-width: none;
}


/* ==========================================================================
   5. COMPONENTS
   Buttons, badges, cards, modals, alerts.
   ========================================================================== */

/* --------------------------------------------------------------------------
 * CHAT / INBOX (WhatsApp-web style two-pane thread)
 *
 * Role-agnostic on purpose (Section 5, not Section 8): the same markup can back
 * the tenant inbox, an admin-side conversation viewer, or any future role. Scope
 * is the `.zx-chat` root, so nothing here leaks into other pages.
 *
 * Per RULE 2 — every declaration below exists because the prebuilt Tailwind
 * bundle does NOT ship the utility. Verified live via getComputedStyle: h-14,
 * min-h-0, font-bold, whitespace-pre-wrap, break-words, rounded-2xl, shadow-sm,
 * min-w-5, max-h-32, line-clamp-2, w-60, w-44 and text-sky-500 all no-op here.
 * Do not "simplify" these back into utility classes.
 *
 * Markup contract (see app/Views/dashboard/conversations.php):
 *   .zx-chat                     root (owns page height)
 *     .zx-chat-split             flex row
 *       .zx-chat-list-pane       left  (fixed width, scrolls internally)
 *       .zx-chat-thread-pane     right (fluid)
 *         .zx-chat-thread        column: header / canvas / composer
 * -------------------------------------------------------------------------- */

/* The Vue mount root (.app-layout) is a flex child of body that never grows, so
   every page is capped at content width. Chat is the one screen that must fill
   the viewport — opt in only where a chat root is present, leaving other pages be. */
body:has(.zx-chat) .app-layout { flex: 1 1 auto; min-width: 0; }

/* Chat is an app screen, not a document: the marketing footer only steals vertical
   space from the conversation. Hidden here (not removed from the shared footer view)
   so every other page keeps it. inbox.js measures the footer for its height math and
   correctly reads 0 once this applies. */
body:has(.zx-chat) .kt-footer { display: none; }

.zx-chat-split { display: flex; min-width: 0; height: 100%; }

.zx-chat-list-pane   { display: flex; flex-direction: column; width: 100%; flex: none; min-height: 0; }
.zx-chat-thread-pane { display: none; flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; }

@media (min-width: 1024px) {
  .zx-chat-list-pane   { width: var(--zx-chat-list-width); }
  .zx-chat-thread-pane { display: flex; flex-direction: column; }
}

/* Mobile: opening a chat swaps the list pane out for the thread. */
.zx-chat-split.is-thread-open > .zx-chat-list-pane   { display: none; }
.zx-chat-split.is-thread-open > .zx-chat-thread-pane { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .zx-chat-split.is-thread-open > .zx-chat-list-pane { display: flex; }
}

/* Column chain: every ancestor of the scroll area needs min-height:0, or flex
   items refuse to shrink below content height and the canvas grows the page
   instead of scrolling. `min-h-0` is not compiled — this is why chat wouldn't scroll. */
.zx-chat-thread { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.zx-chat-thread.is-hidden { display: none; }

.zx-chat-header { height: var(--zx-chat-header-height); flex: none; }

/* The one scroll container. */
.zx-chat-canvas {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--zx-chat-canvas);
}
.dark .zx-chat-canvas { background-color: rgba(0, 0, 0, .2); }

.zx-chat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ---- Conversation rows ---- */
.zx-chat-row-name-unread { font-weight: 700; }
.zx-chat-badge { min-width: 1.25rem; }

/* ---- Bubbles ---- */
.zx-chat-bubble {
  position: relative;
  max-width: 75%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
  color: var(--color-mono, #111827);
}
.zx-chat-bubble-in {
  background-color: var(--zx-chat-bubble-in);
  border: 1px solid rgba(228, 228, 231, .6);
  border-top-left-radius: 0;
}
.zx-chat-bubble-out {
  background-color: var(--zx-chat-bubble-out);
  border-top-right-radius: 0;
}
.dark .zx-chat-bubble    { color: var(--color-foreground, #fafafa); }
.dark .zx-chat-bubble-in { background-color: var(--color-background, #18181b); }
.dark .zx-chat-bubble-out{ background-color: rgba(6, 78, 59, .5); }

/* Tails */
.zx-chat-bubble-in::before,
.zx-chat-bubble-out::after {
  content: ''; position: absolute; top: 0; width: 0; height: 0; border: 6px solid transparent;
}
.zx-chat-bubble-in::before  { inset-inline-start: -6px; border-top-color: var(--zx-chat-bubble-in); border-inline-start: 0; }
.zx-chat-bubble-out::after  { inset-inline-end: -6px;  border-top-color: var(--zx-chat-bubble-out); border-inline-end: 0; }
.dark .zx-chat-bubble-in::before  { border-top-color: var(--color-background, #18181b); }
.dark .zx-chat-bubble-out::after  { border-top-color: rgba(6, 78, 59, .5); }

/* Message text: preserve author line breaks; never let a long URL overflow. */
.zx-chat-body { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Fallback text for a message with neither body nor media. */
.zx-chat-body-empty { font-style: italic; opacity: .7; }

/* Template marker — an agent must be able to tell a template send from free text. */
.zx-chat-tpl-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-bottom: .25rem; padding: .0625rem .375rem;
  border-radius: .25rem; font-size: .6875rem; font-weight: 600;
  background: rgba(0, 0, 0, .06);
  color: var(--color-secondary-foreground, #52525b);
}
.dark .zx-chat-tpl-chip { background: rgba(255, 255, 255, .1); }

/* ---- Media attachments (FR-WABA-008) ---- */
.zx-chat-media { margin-bottom: .25rem; }
.zx-chat-media:last-child { margin-bottom: 0; }

/* Cap by height, not width: portrait phone photos would otherwise fill the whole thread. */
.zx-chat-media-img {
  display: block; border-radius: .375rem; max-width: 100%; max-height: 18rem;
  width: auto; height: auto; cursor: pointer; background: rgba(0, 0, 0, .04);
}
.zx-chat-media-audio { width: 15rem; max-width: 100%; }

.zx-chat-media-doc {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .625rem; border-radius: .375rem;
  background: rgba(0, 0, 0, .04); text-decoration: none; color: inherit;
}
.zx-chat-media-doc:hover { background: rgba(0, 0, 0, .08); }
.dark .zx-chat-media-doc { background: rgba(255, 255, 255, .06); }
.dark .zx-chat-media-doc:hover { background: rgba(255, 255, 255, .1); }

/* Placeholder for pending / failed / expired media. */
.zx-chat-media-note {
  display: flex; align-items: center; gap: .375rem;
  padding: .5rem .625rem; border-radius: .375rem;
  background: rgba(0, 0, 0, .04); font-size: .8125rem; font-style: italic;
  color: var(--color-secondary-foreground, #52525b);
}
.dark .zx-chat-media-note { background: rgba(255, 255, 255, .06); }

/* Delivery ticks */
.zx-chat-tick-read { color: var(--zx-chat-tick-read); }

/* Day separator.
   NOT sticky: the chips are flat siblings of the bubbles (no per-day wrapper), so
   `position: sticky` pins every chip at top:0 and they visibly stack on each other.
   A sticky variant needs the renderer to wrap each day's messages in its own group. */
.zx-chat-day { position: relative; z-index: 1; }

/* ---- Body row: messages + notes side panel ---- */
.zx-chat-body-row { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }

/* ---- Notes & activity panel (FR-INBOX-005/006/010) ---- */
.zx-chat-notes {
  display: flex; flex-direction: column; flex: none;
  width: 20rem; min-height: 0;
  border-inline-start: 1px solid var(--color-border, #e4e4e7);
  background: var(--color-background, #fff);
}
.zx-chat-notes.is-hidden { display: none; }
/* Narrow screens: the panel takes the whole body row rather than crushing the thread. */
@media (max-width: 1279px) {
  .zx-chat-notes:not(.is-hidden) { width: 100%; }
  .zx-chat-notes:not(.is-hidden) ~ .zx-chat-canvas,
  .zx-chat-body-row:has(.zx-chat-notes:not(.is-hidden)) > .zx-chat-canvas { display: none; }
}

.zx-chat-notes-head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--zx-chat-header-height); flex: none;
  padding-inline: .75rem; border-bottom: 1px solid var(--color-border, #e4e4e7);
}

.zx-chat-notes-tabs { display: flex; flex: none; border-bottom: 1px solid var(--color-border, #e4e4e7); }
.zx-chat-tab {
  flex: 1 1 0; padding: .5rem; font-size: .8125rem; font-weight: 500;
  color: var(--color-secondary-foreground, #52525b);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.zx-chat-tab.is-active { color: var(--zx-brand); border-bottom-color: var(--zx-brand); }

.zx-chat-notes-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .75rem; }
.zx-chat-notes-body.is-hidden { display: none; }

/* A note is internal — deliberately styled unlike a chat bubble (amber, not green/white). */
.zx-chat-note {
  padding: .5rem .625rem; border-radius: .375rem; margin-bottom: .5rem;
  background: #fffbeb; border: 1px solid #fde68a;
}
.dark .zx-chat-note { background: rgba(120, 53, 15, .25); border-color: rgba(180, 83, 9, .4); }
.zx-chat-note-meta {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: .25rem; font-size: .6875rem;
  color: var(--color-muted-foreground, #71717a);
}
.zx-chat-note-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8125rem; }
.zx-chat-mention { color: var(--zx-brand); font-weight: 600; }

.zx-chat-notes-form { flex: none; padding: .75rem; border-top: 1px solid var(--color-border, #e4e4e7); }

/* @mention autocomplete */
.zx-chat-mention-menu {
  position: absolute; bottom: 100%; inset-inline-start: 0; margin-bottom: .25rem;
  width: 100%; max-height: 10rem; overflow-y: auto; z-index: 30;
  background: var(--color-background, #fff);
  border: 1px solid var(--color-border, #e4e4e7); border-radius: .375rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.zx-chat-mention-item {
  display: block; width: 100%; text-align: start; padding: .375rem .625rem;
  font-size: .8125rem; background: none; border: 0; cursor: pointer;
}
.zx-chat-mention-item:hover, .zx-chat-mention-item.is-active { background: var(--color-accent, #f4f4f5); }

/* Activity timeline rows */
.zx-chat-activity {
  display: flex; gap: .5rem; padding: .375rem 0; font-size: .75rem;
  color: var(--color-secondary-foreground, #52525b);
  border-bottom: 1px solid var(--color-border, #e4e4e7);
}
.zx-chat-activity:last-child { border-bottom: 0; }
.zx-chat-activity-dot {
  flex: none; width: .5rem; height: .5rem; border-radius: 9999px;
  background: var(--zx-brand); margin-top: .3rem;
}

/* ---- Composer ---- */
.zx-chat-composer { flex: none; }
.zx-chat-composer textarea { border-radius: 1rem; max-height: 8rem; }

/* ---- Template picker modal (FR-INBOX-007) ---- */
.zx-chat-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.zx-chat-modal.is-hidden { display: none; }
.zx-chat-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.zx-chat-modal-card {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: 100%; max-width: 32rem; max-height: 85vh; overflow: hidden;
}
.zx-chat-tpl-preview {
  padding: .625rem .75rem; border-radius: .375rem; font-size: .8125rem;
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--zx-chat-bubble-out); border: 1px solid rgba(0, 0, 0, .06);
}
.dark .zx-chat-tpl-preview { background: rgba(6, 78, 59, .5); border-color: rgba(255, 255, 255, .08); }
.zx-chat-tpl-preview.is-hidden { display: none; }
/* Filled placeholders stand out from the template's fixed text. */
.zx-chat-tpl-var { font-weight: 600; color: var(--zx-brand); }

/* ---- Dropdown panels ---- */
.zx-chat-menu-sm { width: 11rem; }
.zx-chat-menu-md { width: 15rem; }
.zx-chat-menu-md:not(.hidden) { display: flex; }
.zx-chat-canned-panel { width: 20rem; max-height: 16.25rem; }
.zx-chat-canned-body {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


/* ==========================================================================
   6. FORMS & INPUTS
   ========================================================================== */

/* (none yet) */


/* ==========================================================================
   7. TABLES & DATA GRIDS
   Shared styling for the MozzApp/KT grids used across admin + dashboard.
   ========================================================================== */

/* (none yet) */


/* ==========================================================================
   8. PANEL-SPECIFIC OVERRIDES
   Only for rules that must differ between panels. Prefer app-wide sections
   above whenever the styling should stay consistent.
   ========================================================================== */

/* ---- Admin panel ---- */
/* (none yet) */

/* ---- Tenant dashboard ---- */
/* (none yet) */

/* ---- Auth screens ---- */
/* (none yet) */


/* ==========================================================================
   9. UTILITIES & HELPERS
   Small, reusable, single-purpose classes. Use sparingly — prefer a semantic
   class in the section above.
   ========================================================================== */

/* (none yet) */


/* ==========================================================================
   10. RESPONSIVE TWEAKS
   Breakpoint-specific adjustments that don't belong inline in a section.
   ========================================================================== */

/* (none yet) */


/* ==========================================================================
   11. PRINT
   ========================================================================== */

/* (none yet) */