// ================================================================
// ChurchCRM Tabler Custom Styles
// Tabler CSS variable overrides and component skins.
// Bundled via webpack. No AdminLTE bridge code — migration complete.
// ================================================================

// --- ChurchCRM brand color overrides for Tabler CSS variables ----
// Scoped so theme attributes (data-bs-theme-primary, etc.) can override.
:root:not([data-bs-theme-primary]) {
  --tblr-primary:         #206bc4;
  --tblr-primary-lt:      #d7e8f7;
}

:root {
  --tblr-success:         #2fb344;
  --tblr-success-lt:      #d3f2d8;
  --tblr-danger:          #d63939;
  --tblr-danger-lt:       #fce8e8;
  --tblr-warning:         #f76707;
  --tblr-warning-lt:      #fde9d5;
  --tblr-info:            #4dabf7;
  --tblr-info-lt:         #dff0ff;
  --tblr-secondary:       #667382;
  --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

// --- DataTables — Tabler skin ----------------------------------------
.dt-container {
  .dt-search input,
  .dt-length select {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--tblr-body-color);
    background-color: var(--tblr-bg-forms);

    &:focus {
      border-color: var(--tblr-primary);
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.15);
    }
  }
}

// --- Tom Select — Tabler skin overrides --------------------------------
.ts-wrapper {
  // Multi-select items use primary brand color
  &.multi .ts-control .item {
    background-color: var(--tblr-primary);
    color: #fff;
  }

  &.single .ts-control {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background-color: var(--tblr-bg-forms);
    color: var(--tblr-body-color);
    padding: 0.375rem 0.75rem;
  }

  &.focus .ts-control {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.15);
  }

  .ts-dropdown {
    background-color: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: 0 4px 16px rgba(24, 35, 58, 0.12);
    color: var(--tblr-body-color);

    .option {
      color: var(--tblr-body-color);

      &:hover,
      &.active {
        background-color: var(--tblr-primary-lt);
        color: var(--tblr-primary);
      }
    }
  }
}

// When using dropdownParent:'body', TomSelect appends the dropdown directly
// to <body> so the .ts-wrapper scoped styles above don't apply.
body > .ts-dropdown {
  background-color: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  box-shadow: 0 4px 16px rgba(24, 35, 58, 0.12);
  color: var(--tblr-body-color);

  .option {
    color: var(--tblr-body-color);

    &:hover,
    &.active {
      background-color: var(--tblr-primary-lt);
      color: var(--tblr-primary);
    }
  }
}

// --- Sidebar: chevron folder indicator -----------------------------------
// Tabler 1.4.0 dropped nav-link-arrow — define it here until Tabler adds it back.
// The chevron icon (fa-chevron-down) rotates 180° when the section is open.
.navbar-vertical .nav-link {
  .nav-link-title { flex: 1; }

  .nav-link-arrow {
    display: inline-flex;
    align-items: center;
    padding-left: 0.25rem;
    flex-shrink: 0;
    opacity: 0.4;
    font-size: 0.65rem;
    transition: transform 0.2s ease;
  }

  &[aria-expanded="true"] .nav-link-arrow {
    transform: rotate(180deg);
    opacity: 0.7;
  }
}

/* Sidebar badge contrast — moved from inline header styles. Use utilities
   where possible, but keep these rules as a compatibility bridge while
   templates migrate off inline styles. */
.navbar-vertical .badge {
  color: #fff;
  font-weight: 600;
}
.navbar-vertical .badge.bg-warning,
.navbar-vertical .badge.bg-info,
.navbar-vertical .badge.bg-light {
  color: #333 !important;
}

// --- Form elements — match Tabler body color ----------------------------
select {
  color: var(--tblr-body-color, #555);
}

// --- Topbar search — remove double border with adjacent button --------
.navbar-search-btn {
  border-left: 0;
}

// --- Color swatch picker (user settings) --------------------------------
.btn-color-swatch {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 2px solid var(--tblr-border-color) !important;

  &:hover {
    transform: scale(1.15);
  }

  &.active {
    box-shadow: 0 0 0 3px var(--tblr-primary);
    border-color: var(--tblr-primary) !important;
    transform: scale(1.15);
  }
}

// --- Volunteer persona: large touch targets on mobile ----------------
@media (max-width: 767.98px) {
  .btn:not(.btn-sm) {
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
  }
}

// --- Mobile responsive fixes (375px–768px) ---------------------------

// Card header tabs: full-width row below title on mobile.
// Tabler's .card-header-tabs uses negative margins to span the card,
// but our tabs sit inside .card-options which constrains them.
// Fix: break card-options onto its own line and reset tab margins.
@media (max-width: 767.98px) {
  .card-header {
    flex-wrap: wrap;

    .card-options {
      flex: 0 0 100%;
      width: 100%;
      margin-left: 0 !important; // override ms-auto
      margin-top: 0;
    }

    .card-header-tabs {
      // Reset Tabler's negative margins — they only work when tabs
      // are a direct child of card-header spanning its full width.
      margin: 0 !important;
      padding: 0;
      flex-wrap: nowrap;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 0;

      .nav-item {
        flex: 1 1 0;
        text-align: center;
      }

      .nav-link {
        white-space: nowrap;
        padding: 0.5rem 0.5rem;
        font-size: 0.8125rem;
      }
    }
  }

  // DataTables: compact layout on mobile
  .dt-container {
    .dt-layout-row {
      flex-direction: column;
      gap: 0.5rem;
    }

    .dt-search input {
      width: 100%;
    }
  }

  // Tables: allow wrapping and reduce padding on mobile
  .table:not(.table-nowrap) {
    th,
    td {
      padding: 0.5rem 0.375rem;
      font-size: 0.8125rem;
    }
  }

  // Page header buttons: icon-only on mobile to save space.
  // Only hide text when the button contains an icon; label-only
  // buttons (no icon) stay readable.
  .page-header .btn-list {
    gap: 0.25rem;

    .btn:has(i, .fa-solid) {
      font-size: 0;       // hide text
      padding: 0.375rem;

      i,
      .fa-solid {
        font-size: 0.875rem; // show icon at normal size
        margin: 0 !important;
      }
    }
  }

  // Topbar nav items: tighter spacing on mobile
  .navbar-nav.flex-row.order-md-last {
    gap: 0.125rem;

    .nav-link {
      padding: 0.25rem 0.375rem;
    }
  }
}

// Extra-small (375px phone) specific overrides
@media (max-width: 575.98px) {
  // Make card table containers scrollable (not the table itself,
  // which would break table layout and DataTables column sizing).
  .card-body,
  .card > .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  // Remove inline hardcoded column widths that cause overflow.
  // Exclude DataTables — it manages its own column widths.
  .table:not(.dataTable) th[style*="width"],
  .table:not(.dataTable) td[style*="width"] {
    width: auto !important;
    min-width: 0 !important;
  }

  // Breadcrumbs: smaller text
  .breadcrumb {
    font-size: 0.75rem;
  }

  // Page title: smaller on phones
  .page-title {
    font-size: 1.25rem;
  }

  // Forms: ensure inputs/selects never exceed viewport
  input[style*="width"],
  select[style*="width"],
  textarea[style*="width"] {
    max-width: 100% !important;
  }

  // Flex containers with fixed-width children: allow wrapping
  .d-flex[style*="max-width"] {
    max-width: 100% !important;
  }
}
