/*
  Global stylesheet for the OFTBOX Sales Command Center.
  Defines design tokens, layout rules, typography and component styles.

  Colours are derived from the primary (#FF7A00) and secondary (#0D0D0D) brand colours.
  The interface uses a light background with dark text for excellent contrast and
  high legibility. Dark components like the navbar offer clear separation between
  sections.
*/

/* CSS Variables for easy theming */
:root {
  --primary-color: #ff7a00;
  --secondary-color: #0d0d0d;
  --background-color: #f9f9f9;
  --card-background: #ffffff;
  --text-color: #0d0d0d;
  --muted-text: #666666;
  --border-color: #e0e0e0;
  --radius: 6px;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  --transition-duration: 0.3s;
  --navbar-height: 64px;
}

/* Global resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 16px;
  color: var(--text-color);
  /* Apply a subtle background image with cover scaling */
  background: var(--background-color) url("assets/background.png") no-repeat center center fixed;
  background-size: cover;
  /* Allow the page to grow naturally beyond a single viewport height.
     Setting a fixed 100% height on the html and body elements restricts
     the document to the viewport height and prevents scrolling when
     long tables (like the leads list) are rendered.  Replace the
     fixed height with an automatic height and a minimum height so
     content can extend naturally on both desktop and mobile. */
  height: auto;
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  padding-top: var(--navbar-height);
}

a {
  color: inherit;
  text-decoration: none;
}

/* Utility classes */
.btn {
  display: inline-block;
  padding: 0.6em 1.2em;
  border-radius: var(--radius);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-duration), color var(--transition-duration);
}

.btn--primary {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
}

.btn--primary:hover {
  /* Slightly darker shade for hover state. CSS does not support darken() natively,
     so we provide a manually calculated colour. */
  background-color: #e66d00;
}

.btn--secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn--secondary:hover {
  background-color: var(--primary-color);
  color: #fff;
}

.input {
  width: 100%;
  padding: 0.5em 0.75em;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background-color: #fff;
  color: var(--text-color);
  font-size: 0.95rem;
}

.input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.2);
}

.input--search {
  min-width: 200px;
}

.input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7 10 5 5 5-5' stroke='%230d0d0d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 1em;
  padding-right: 2.5em;
  cursor: pointer;
}

.input--textarea {
  resize: vertical;
}

/*
  Custom styling for lead detail metadata and attachments
  -------------------------------------------------------------------------
  The creation timestamp appears in a muted, smaller font just below the
  section heading to provide context without drawing excessive attention.
  Attachments are listed using flex layout so that file names and actions
  align neatly on both desktop and mobile.
*/
.lead-created-at {
  font-size: 0.85rem;
  color: var(--muted-text);
  margin: 0.25rem 0 0.75rem 0;
}

.attachments-section {
  margin-top: 1rem;
}

.attachments-section h5 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}

.attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-color);
}

.attachment-item span:first-child {
  font-size: 1.1rem;
}

.attachment-link {
  color: var(--primary-color);
  text-decoration: underline;
  font-weight: 500;
}

/* Responsive layout for attachments on small screens */
@media (max-width: 768px) {
  .attachment-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .attachment-link {
    margin-top: 0.25rem;
  }
}

/* Navbar styles */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--navbar-height);
  /* Use a light background for the navbar to blend seamlessly with the logo */
  background-color: #ffffff;
  backdrop-filter: none;
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  z-index: 1000;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, opacity 0.2s ease;
  will-change: transform;
}

.navbar__brand {
  display: flex;
  align-items: center;
  height: 100%;
}

.navbar__logo-link {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}

.navbar__logo {
  height: auto;
  width: auto;
  max-height: calc(var(--navbar-height) - 16px);
  display: block;
  max-width: 220px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.navbar--hidden {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

.navbar__logo-link:hover .navbar__logo {
  animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #ffffff;
  backdrop-filter: none;
}

.nav__link {
  color: var(--secondary-color);
  padding: 0.5em 0.75em;
  border-radius: var(--radius);
  transition: background-color var(--transition-duration);
}

.nav__link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.nav__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5em 1em;
  margin-left: 1rem;
  font-size: 0.9rem;
}
.nav__button-label {
  display: none;
}

/* Language selector in navbar */
.nav__select {
  background-color: #ffffff;
  color: var(--secondary-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 0.25em 0.5em;
  font-size: 0.9rem;
  cursor: pointer;
}
.nav__select option {
  color: var(--secondary-color);
}

/* Remove default arrow from language dropdown and center text */
#langSelect {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  padding-right: 8px;
  text-align: center;
  /* Ensure no native arrow appears on certain browsers */
  background-color: var(--background-color);
  border: 1px solid var(--secondary-color);
}

/* Mobile modal full height with scrollable content and sticky actions */
@media (max-width: 768px) {
  /* Prevent body from scrolling when modal is open */
  body.modal-open {
    overflow: hidden;
  }
}


.navbar__toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  background-color: #ffffff;
  border: none;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.navbar__toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--secondary-color);
  transition: transform var(--transition-duration);
}

/* Hero section */
.hero {
  padding: 4rem 1.5rem 3rem;
  background-color: var(--background-color);
}
.hero__content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}
.hero__text h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}
.hero__text p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  color: var(--muted-text);
  max-width: 520px;
}
.hero__actions {
  display: flex;
  gap: 1rem;
}
.hero__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  flex: 1;
}

/* Metric card */
.metric-card {
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-color);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}
.metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.metric-card .metric__label {
  font-size: 0.875rem;
  color: var(--muted-text);
  margin-bottom: 0.5rem;
}
.metric-card .metric__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary-color);
}

/* Pipeline section */
.pipeline {
  padding: 3rem 1.5rem;
  background-color: #fff;
}
.pipeline h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
.pipeline__stages {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
}
.pipeline__stage {
  background-color: var(--card-background);
  min-width: 200px;
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--primary-color);
  border-radius: var(--radius);
  padding: 1rem;
  scroll-snap-align: start;
  cursor: pointer;
  transition: box-shadow var(--transition-duration), transform var(--transition-duration);
}

/*
  Active pipeline stage styling
  -------------------------------------------------------------------------
  When a pipeline stage card is selected its background and text colours
  invert to highlight the active filter.  This uses the primary brand
  colour for the card body and white text for contrast.  The border
  colour is unified so the stage appears as a single coloured block.
*/
.pipeline__stage.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
}
.pipeline__stage.active .stage__name,
.pipeline__stage.active .stage__count,
.pipeline__stage.active .stage__value {
  color: #ffffff;
}
.pipeline__stage:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.pipeline__stage .stage__name {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--secondary-color);
}
.pipeline__stage .stage__count {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.pipeline__stage .stage__value {
  font-size: 0.875rem;
  color: var(--muted-text);
}

/* Leads section */
.leads {
  padding: 3rem 1.5rem;
}
.leads__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.leads__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.table__container {
  overflow-x: auto;
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.table thead {
  background-color: var(--secondary-color);
  color: #fff;
}
.table th,
.table td {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border-color);
}
.table th {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.table th::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  border: 6px solid transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.table th.sort-asc::after {
  border-top-color: #fff;
  margin-top: -4px;
}
.table th.sort-desc::after {
  border-bottom-color: #fff;
  margin-top: 4px;
}
.table tbody tr {
  transition: background-color var(--transition-duration);
}
.table tbody tr:hover {
  background-color: rgba(255, 122, 0, 0.05);
  cursor: pointer;
}

/*
 * Highlight rows with unread comments.  When a lead has at least one
 * comment that has not been marked as read, the entire row gets a
 * subtle amber background and a small dot is shown next to the name.
 */
.lead-row--unread {
  background-color: rgba(255, 215, 0, 0.15);
}
/* Unread indicator: use a chat bubble icon rather than a dot.  The icon
   appears next to the lead name when there are unread comments. */
.unread-indicator {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.85em;
  line-height: 1;
  color: var(--primary-color);
  vertical-align: middle;
}

/* Badge for unread comments in the lead detail panel */
.badge-new {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  background-color: #f5a623;
  color: #000;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Client detail panel */
.client-panel {
  position: fixed;
  top: var(--navbar-height);
  right: -350px; /* hidden by default */
  width: 350px;
  height: calc(100% - var(--navbar-height));
  background-color: var(--card-background);
  border-left: 1px solid var(--border-color);
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  transition: right var(--transition-duration);
  z-index: 900;
}
.client-panel--open {
  right: 0;
}
.client-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.client-panel__content {
  padding: 1rem;
}
.client-panel__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted-text);
}

/* Modal styles */
.modal {
  /* Hidden by default; becomes visible when .open class is applied */
  display: none;
  position: fixed;
  inset: 0;
  /* Raise z-index very high so the modal and its overlay sit above all other content */
  z-index: 99999;
  overflow: visible;
}
.modal.open {
  display: block;
}
body.modal-open {
  overflow: hidden;
}
/* The translucent overlay that sits behind the modal content */
.modal__overlay {
  position: absolute;
  inset: 0;
  /* Darken the page slightly when a modal is open without blurring the
     background.  Removing the blur improves readability and ensures
     input fields remain sharp and interactive within the modal. */
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: none;
  cursor: default;
  z-index: 99998;
}
/* Modal content container. Center it in the viewport and allow scrolling inside */
.modal__content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  width: 90%;
  max-height: calc(100dvh - 32px);
  background-color: var(--card-background);
  border-radius: var(--radius);
  overflow: visible;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overscroll-behavior: contain;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  animation: fadeIn var(--transition-duration) ease-in-out;
  /* Ensure modal content sits above the overlay. Without a z-index
     explicitly set, the content inherits the default stacking order
     (auto), which causes it to appear beneath the overlay because the
     overlay has a z-index of 99998. Assigning a higher z-index here
     ensures that the form remains interactive and clickable. */
  z-index: 99999;
}
@keyframes fadeIn {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--secondary-color);
  color: #fff;
  padding: 1rem;
  position: relative;
  z-index: 2;
}
.modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  /* Ensure the close button stays aligned on the right side and remains
     visible even when content wraps on narrow screens.  The margin-left
     auto pushes it to the end of the flex container. */
  margin-left: auto;
  /* Increase tap target size on mobile for accessibility */
  padding: 0.25rem 0.5rem;
}

.form,
.edit-lead-form,
.modal__body {
  padding: 1rem;
}
.modal__content > .form,
.modal__content > .edit-lead-form,
.modal__content > .modal__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}
.form__row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.form__group {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
}
.form__group label {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  color: var(--secondary-color);
}
.form__actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.modal__content > .form .form__actions,
.modal__content > .edit-lead-form .form__actions {
  position: sticky;
  bottom: 0;
  background: var(--card-background);
  z-index: 2;
}

/* File upload area styles */
.file-upload-area {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  background-color: var(--background-color);
  transition: background-color var(--transition-duration);
}
.file-upload-area:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.file-upload-area.dragover {
  background-color: rgba(0, 0, 0, 0.04);
}
.file-upload-area input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.file-upload-description {
  font-size: 0.8rem;
  color: var(--muted-text);
  margin-top: 0.5rem;
  line-height: 1.2;
}

/* Hide stage and status filter dropdowns on the leads header. Users should
   filter leads via the pipeline stage cards or search input instead. By
   keeping these select elements in the DOM (but hidden) we preserve
   functionality for the pipeline filtering logic without exposing them
   visually. */
/* The Stage and Status dropdowns have been removed from the UI.  Any styles
   targeting these IDs are no longer needed. */

.json-preview {
  margin-top: 1rem;
  background-color: #f7f7f7;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 0.75rem;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  display: none;
}

/* Responsive design */
@media (max-width: 900px) {
  .hero__content {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero__metrics {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .pipeline__stage {
    min-width: 160px;
  }
}

/* ------------------------------------------------------------------
   Comments history and badges
   ------------------------------------------------------------------
   The comment history appears within the lead edit panel.  It is a
   scrollable box with a subtle background so that users can easily
   distinguish individual comments from the form fields.  New comments
   are marked with a badge for quick recognition. */
.comments-history {
  margin-top: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background-color: #f7f7f7;
}
.comment-item {
  font-size: 0.875rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-color);
}
.comment-item:last-child {
  border-bottom: none;
}
.badge-new {
  display: inline-block;
  background-color: var(--primary-color);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius);
  margin-left: 0.25rem;
}

@media (max-width: 768px) {
  .navbar__logo {
    max-height: calc(var(--navbar-height) - 16px);
    max-width: 180px;
  }

  .navbar__nav {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    /* Use a light background for mobile nav as well */
    background-color: #ffffff;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100vw;
    height: calc(100vh - var(--navbar-height));
    padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
    transform: translateX(100%);
    transition: transform var(--transition-duration);
    box-shadow: var(--shadow);
    z-index: 1100;
    overflow-y: auto;
  }
  .navbar__nav.open {
    transform: translateX(0);
    background-color: #ffffff;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.nav-menu-open {
    background-color: #ffffff;
    background-image: none;
  }
  .navbar__toggle {
    display: flex;
  }
  .nav__link, .nav__button {
    width: 100%;
    padding: 0.75em 1em;
  }
  .navbar__nav .nav__button {
    width: 100%;
    align-self: stretch;
    margin: 0.75rem 0 0.5rem;
    padding: 0.85rem 1rem;
    font-size: 1rem;
  }
  .nav__button-label {
    display: inline;
  }
  .navbar__nav .nav__select {
    width: auto;
    min-width: 4.5rem;
    align-self: flex-start;
    margin-top: 0.5rem;
  }
  .client-panel {
    /*
     * On narrow viewports the client panel should take up the full width and be
     * anchored to the very top of the viewport. In some embedding contexts
     * (e.g. when this module is displayed inside an iframe on a mobile device)
     * leaving a top offset causes a blank white gap above the form, forcing
     * users to scroll just to see the beginning of the panel. We override
     * the default top/height values here so the panel always starts at the
     * very top and fills the available height on mobile. See also the
     * corresponding scroll behaviour added in client.js.
     */
    width: 100%;
    top: 0;
    height: 100vh;
  }
  .client-panel--open {
    right: 0;
  }
  /*
   * On mobile widths, the modal content should nearly fill the screen but
   * still leave a small margin on the sides. Use flexbox so the form can
   * grow to fill available space and allow scrolling within the form
   * instead of the entire page. The height is limited via max-height
   * rather than forced to 100vh so that small devices with virtual
   * keyboards do not cause layout issues.
   */
  .modal__content {
    width: 95%;
    max-width: none;
    margin: 0 auto;
    border-radius: 0;
  }
  .modal__content > .form,
  .modal__content > .edit-lead-form,
  .modal__content > .modal__body {
    margin-bottom: 0;
  }
  .modal__content > .form .form__actions,
  .modal__content > .edit-lead-form .form__actions {
    background: #fff;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    z-index: 5;
  }

  /*
   * Center the primary action button in the new lead form on small screens.
   * On mobile widths the "Create Lead" button previously aligned to the left,
   * which looked unbalanced when it was the only action in the row. By
   * explicitly centering the form actions container for the new lead form we
   * ensure the button appears centred horizontally without affecting the
   * alignment of multi‑button action rows in edit forms. Using the ID
   * selector keeps the rule scoped only to the new lead modal.
   */
  #newLeadForm .form__actions {
    justify-content: center;
  }
}

/* ------------------------------------------------------------------
   Responsive improvements
   ------------------------------------------------------------------
   When the edit lead modal displays multiple action buttons (Save, Delete,
   Send, Add Reminder, Mark all as read), a single-row flex container causes
   overflow on narrow screens.  Allow the action buttons to wrap onto
   multiple lines and center them to ensure every control remains visible.
*/
@media (max-width: 768px) {
  .form__actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.app-footer {
  padding: 12px 16px;
  text-align: center;
  font-size: 0.75rem;
  color: #9a9a9a;
}

.app-footer a {
  color: inherit;
  text-decoration: none;
}

.app-footer a:hover,
.app-footer a:focus {
  color: var(--muted-text);
}