/* ============================================
   TinkerPro Support - Mobile Responsive Styles
   Breakpoint: 768px (tablet/mobile)
   Excludes: clientOffer page (#leads-table has its own styles)
   ============================================ */

/* ─── General Layout ─── */
@media (max-width: 768px) {

  .content-wrapper {
    padding-top: 0 !important;
  }

  .content-header {
    padding: 10px 0 !important;
  }

  .content-header h1 {
    font-size: 1.4rem !important;
  }

  .content {
    padding: 0 4px !important;
  }

  .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Cards */
  .card {
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }

  .card-header {
    padding: 10px 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .card-header .d-flex.justify-content-end,
  .card-header .d-flex.justify-content-between,
  .card-header .d-flex.align-items-center.gap-3 {
    width: 100% !important;
    font-size: 0.92rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .card-header .card-title {
    width: 100% !important;
    margin-bottom: 8px !important;
    font-size: 1rem !important;
  }

  .card-body {
    padding: 8px !important;
  }

  .card-body.p-0 {
    padding: 0 !important;
  }

  /* Footer */
  .main-footer {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    text-align: center !important;
  }

  .main-footer .float-right {
    float: none !important;
    display: block !important;
  }
}

/* ─── Tabulator Table-to-Card Conversion ─── */
@media (max-width: 768px) {

  .tabulator:not(#leads-table) .tabulator-header,
  .tabulator:not(#leads-table) .tabulator-col-resize-handle {
    display: none !important;
  }

  /* `min-width: 100%` alone left the inline px width Tabulator writes here
     intact (it sums the column widths), so the table — and every row at
     `width: 100%` of it — stayed far wider than the phone. Cap it. */
  .tabulator:not(#leads-table),
  .tabulator:not(#leads-table) .tabulator-table {
    padding: 8px !important;
    background: var(--bg-color) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .tabulator:not(#leads-table) {
    padding: 0 !important;
  }

  .tabulator:not(#leads-table) .tabulator-tableholder {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Each row becomes a card */
  .tabulator:not(#leads-table) .tabulator-row {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    padding: 14px 14px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    background: var(--card-bg) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    position: relative !important;
  }

  .tabulator:not(#leads-table) .tabulator-row::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-color);
    border-radius: 12px 0 0 12px;
  }

  /* Each cell becomes a row in the card */
  .tabulator:not(#leads-table) .tabulator-cell {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: none !important;
    padding: 6px 0 6px 12px !important;
    font-size: 0.9rem !important;
    color: var(--text-color) !important;
    white-space: normal !important;
    word-break: break-word !important;
    min-height: unset !important;
    height: auto !important;
  }

  .tabulator:not(#leads-table) .tabulator-cell::before {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--tertiary-text-color);
    min-width: 100px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: none;
  }

  /* Hide row number cells on mobile */
  .tabulator:not(#leads-table) .tabulator-cell[tabulator-field="no"] {
    display: none !important;
  }

  /* ── Frozen columns in card mode ───────────────────────────────────────
     Tabulator pins `frozen: true` columns by writing inline
     position/left/right onto the cell so they stay put while the table
     scrolls sideways. In this card layout there IS no sideways scroll, so
     that pinning just lifts the cell out of the stack and parks it against
     the card's edge — where it gets clipped by the row's `overflow: hidden`
     above. That's what cut off the action button on customer.php (Status +
     Action are both frozen); files-management, offers and pricing freeze
     columns too. Put them back in normal flow. */
  .tabulator:not(#leads-table) .tabulator-cell.tabulator-frozen,
  .tabulator:not(#leads-table) .tabulator-cell.tabulator-frozen-left,
  .tabulator:not(#leads-table) .tabulator-cell.tabulator-frozen-right {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: auto !important;
    box-shadow: none !important;
  }

  /* Tabulator also pads the row to reserve space for the pinned cells. */
  .tabulator:not(#leads-table) .tabulator-row {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* The action cell's own controls should fill the card, not sit squeezed
     against the edge the frozen layout used to hold them at. */
  .tabulator:not(#leads-table) .tabulator-cell.customer-action-cell {
    padding-left: 12px !important;
  }

  .tabulator:not(#leads-table) .customer-action-toggle {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Action trigger in card mode ───────────────────────────────────────
     `.tp-act-kebab` (action-dropdown.js) is an inline-flex pill that shrinks
     to its caret, so in a stacked card it reads as a tiny button floating in
     an empty row. Stretch it to the card like every other cell's content.

     Generic on purpose: client, user, pos-version and files-management all
     render this kebab and rely on THIS file's card-ification rather than
     shipping their own mobile block. (release_notes / license / blog carry
     an equivalent rule inside their own 991.98px media queries — same
     result, so they're unaffected.)

     action-dropdown.js then matches its dropdown to any trigger >= 200px
     wide on mobile, so the menu lines up with the button automatically. */
  .tabulator:not(#leads-table) .tp-actions {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Both trigger flavours — `.tp-act-kebab` and the Bootstrap toggle
     mobile-actions.js builds — are sized together so every table's card
     action reads identically: a slim full-width bar labelled "Actions" with
     a caret, rather than a 44-52px slab holding a lone caret. The label has
     to come from CSS: no page puts text on the trigger (the kebab ships an
     icon that theme.css hides, and the JS toggle ships an ellipsis). */
  .tabulator:not(#leads-table) .tp-act-kebab,
  .tabulator:not(#leads-table) .mobile-action-dropdown>.btn {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 0.9rem !important;
    gap: 0.45rem !important;
    border-radius: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  }

  .tabulator:not(#leads-table) .tp-act-kebab::before,
  .tabulator:not(#leads-table) .mobile-action-dropdown>.btn::before {
    content: "Actions";
  }

  /* mobile-actions.js swaps a cell's action buttons for a single dropdown
     (theme.css hides the originals). Left to itself the toggle is an
     inline-flex pill sitting at the left of a full-width cell, which reads
     as an empty box with a stray caret. Fill the card and centre it, to
     match the kebab treatment on release_notes / license / blog. */
  .tabulator:not(#leads-table) .mobile-action-dropdown {
    width: 100% !important;
  }

  /* ─── Per-table field labels ─── */

  /* license-table */
  #license-table .tabulator-cell[tabulator-field="store_name"] {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--text-color) !important;
    padding-bottom: 8px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  #license-table .tabulator-cell[tabulator-field="store_name"]::before {
    display: none !important;
  }

  #license-table .tabulator-cell[tabulator-field="store_address"]::before {
    content: "Address";
  }

  #license-table .tabulator-cell[tabulator-field="license_key"]::before {
    content: "Key";
  }

  #license-table .tabulator-cell[tabulator-field="is_used"]::before {
    content: "Status";
  }

  /* release-notes-table */
  #release-notes-table .tabulator-cell[tabulator-field="version"] {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--text-color) !important;
    padding-bottom: 8px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  #release-notes-table .tabulator-cell[tabulator-field="version"]::before {
    display: none !important;
  }

  #release-notes-table .tabulator-cell[tabulator-field="date"]::before {
    content: "Released";
  }

  #release-notes-table .tabulator-cell[tabulator-field="action_type"]::before {
    content: "Type";
  }

  #release-notes-table .tabulator-cell[tabulator-field="release_notes"]::before {
    content: "Notes";
  }

  /* pos-table */
  #pos-table .tabulator-cell[tabulator-field="version"] {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--text-color) !important;
    padding-bottom: 8px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  #pos-table .tabulator-cell[tabulator-field="version"]::before {
    display: none !important;
  }

  /* user-table — the row number and the masked password ("••••••••") carry no
     information in a card, and the remaining values need captions to read as
     anything but a stack of strings. */
  #user-table .tabulator-cell[tabulator-field="id"],
  #user-table .tabulator-cell[tabulator-field="password"] {
    display: none !important;
  }

  #user-table .tabulator-cell[tabulator-field="full_name"] {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--text-color) !important;
    padding-bottom: 8px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  #user-table .tabulator-cell[tabulator-field="full_name"]::before {
    display: none !important;
  }

  #user-table .tabulator-cell[tabulator-field="email"]::before,
  #user-table .tabulator-cell[tabulator-field="username"]::before,
  #user-table .tabulator-cell[tabulator-field="role"]::before {
    display: block !important;
    min-width: 84px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--tertiary-text-color) !important;
  }

  #user-table .tabulator-cell[tabulator-field="email"]::before {
    content: "Email";
  }

  #user-table .tabulator-cell[tabulator-field="username"]::before {
    content: "Username";
  }

  #user-table .tabulator-cell[tabulator-field="role"] {
    justify-content: flex-start !important;
  }

  #user-table .tabulator-cell[tabulator-field="role"]::before {
    content: "Access";
  }

  /* vendor-table — same treatment as user-table above: drop the row number,
     promote the company to the card title, and caption everything else. The
     action kebab is covered by the generic .tp-actions rules further up. */
  #vendor-table .tabulator-cell[tabulator-field="id"] {
    display: none !important;
  }

  /* The formatter stacks company over contact person in two divs; the card
     turns the cell into a flex row, which would sit them side by side. */
  #vendor-table .tabulator-cell[tabulator-field="company_name"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--text-color) !important;
    padding-bottom: 8px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  #vendor-table .tabulator-cell[tabulator-field="company_name"]::before {
    display: none !important;
  }

  #vendor-table .tabulator-cell[tabulator-field="vendor_code"]::before,
  #vendor-table .tabulator-cell[tabulator-field="email"]::before,
  #vendor-table .tabulator-cell[tabulator-field="mobile"]::before,
  #vendor-table .tabulator-cell[tabulator-field="status"]::before,
  #vendor-table .tabulator-cell[tabulator-field="submissions"]::before,
  #vendor-table .tabulator-cell[tabulator-field="last_login_at"]::before {
    display: block !important;
    min-width: 96px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--tertiary-text-color) !important;
  }

  #vendor-table .tabulator-cell[tabulator-field="vendor_code"]::before {
    content: "Vendor ID";
  }

  #vendor-table .tabulator-cell[tabulator-field="email"]::before {
    content: "Email";
  }

  #vendor-table .tabulator-cell[tabulator-field="mobile"]::before {
    content: "Mobile";
  }

  #vendor-table .tabulator-cell[tabulator-field="submissions"]::before {
    content: "Filed";
  }

  #vendor-table .tabulator-cell[tabulator-field="last_login_at"]::before {
    content: "Last sign-in";
  }

  /* Badge and count cells centre themselves on desktop (hozAlign), which in a
     card also centres the ::before caption inside its min-width box and leaves
     the labels visibly out of line with the rest. */
  #vendor-table .tabulator-cell[tabulator-field="status"],
  #vendor-table .tabulator-cell[tabulator-field="submissions"] {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  #vendor-table .tabulator-cell[tabulator-field="status"]::before {
    content: "Status";
  }

  /* customer-table — BIR registration rows carry codes (invoice, branch, TIN)
     that are meaningless without a caption, so this is the one card layout
     that switches the shared ::before labels back on. Only the fields listed
     here get one; anything else (Action) keeps the base `display: none` so an
     empty label box can't reserve space next to the control. */
  #customer-table .tabulator-cell[tabulator-field="company_name"] {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--text-color) !important;
    padding-bottom: 8px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  #customer-table .tabulator-cell[tabulator-field="company_name"]::before {
    display: none !important;
  }

  #customer-table .tabulator-cell[tabulator-field="invoice_number"]::before,
  #customer-table .tabulator-cell[tabulator-field="branch_code"]::before,
  #customer-table .tabulator-cell[tabulator-field="tin"]::before,
  #customer-table .tabulator-cell[tabulator-field="address"]::before,
  #customer-table .tabulator-cell[tabulator-field="owner_name"]::before,
  #customer-table .tabulator-cell[tabulator-field="softwarename"]::before,
  #customer-table .tabulator-cell[tabulator-field="action_notes"]::before,
  #customer-table .tabulator-cell[tabulator-field="status"]::before {
    display: block !important;
    min-width: 84px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--tertiary-text-color) !important;
  }

  #customer-table .tabulator-cell[tabulator-field="invoice_number"] {
    justify-content: flex-start !important;
  }

  #customer-table .tabulator-cell[tabulator-field="invoice_number"]::before {
    content: "Invoice";
  }

  #customer-table .tabulator-cell[tabulator-field="branch_code"] {
    justify-content: flex-start !important;
  }

  #customer-table .tabulator-cell[tabulator-field="branch_code"]::before {
    content: "Branch";
  }

  #customer-table .tabulator-cell[tabulator-field="tin"]::before {
    content: "TIN";
  }

  #customer-table .tabulator-cell[tabulator-field="address"]::before {
    content: "Address";
  }

  #customer-table .tabulator-cell[tabulator-field="owner_name"]::before {
    content: "Owner";
  }

  #customer-table .tabulator-cell[tabulator-field="softwarename"]::before {
    content: "Software";
  }

  #customer-table .tabulator-cell[tabulator-field="action_notes"]::before {
    content: "Notes";
  }

  #customer-table .tabulator-cell[tabulator-field="status"]::before {
    content: "Status";
  }

  /* The address/notes formatters set `white-space: nowrap` + ellipsis inline
     for the desktop table; in a card that truncates the value to a sliver. */
  #customer-table .tabulator-cell[tabulator-field="address"]>div,
  #customer-table .tabulator-cell[tabulator-field="action_notes"] .notes-preview span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* blog-table */
  #blog-table .tabulator-cell[tabulator-field="title"] {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--text-color) !important;
    padding-bottom: 8px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  #blog-table .tabulator-cell[tabulator-field="title"]::before {
    display: none !important;
  }

  #blog-table .tabulator-cell[tabulator-field="title"] .post-title {
    white-space: normal !important;
    word-break: break-word !important;
    display: block !important;
    width: 100% !important;
  }

  #blog-table .tabulator-cell[tabulator-field="scheduled_at"] {
    width: 100% !important;
    padding-left: 12px !important;
  }

  #blog-table .tabulator-cell[tabulator-field="scheduled_at"]::before {
    content: "DATE";
    min-width: 80px !important;
    font-weight: 700 !important;
    color: var(--tertiary-text-color) !important;
  }

  #blog-table .tabulator-cell[tabulator-field="status"] {
    width: 100% !important;
    justify-content: flex-start !important;
    padding-left: 12px !important;
  }

  #blog-table .tabulator-cell[tabulator-field="status"]::before {
    content: "STATUS";
    min-width: 80px !important;
    font-weight: 700 !important;
    color: var(--tertiary-text-color) !important;
  }

  #blog-table .tabulator-cell[tabulator-field="actions"]::before {
    display: none !important;
  }

  #blog-table .tabulator-cell[tabulator-field="actions"] {
    justify-content: flex-start !important;
  }

  /* ─── Action cells with mobile dropdown ─── */
  .tabulator:not(#leads-table) .tabulator-cell .mobile-action-dropdown {
    width: 100% !important;
  }

  .tabulator:not(#leads-table) .tabulator-cell .mobile-action-dropdown .dropdown-toggle {
    background: var(--card-bg) !important;
    color: var(--secondary-text-color) !important;
    border: 1px solid var(--action-trigger-border) !important;
    width: 100% !important;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
  }

  /* The ellipsis the JS renders is dropped in favour of the shared
     "Actions" + caret treatment, so the two trigger flavours match. */
  .tabulator:not(#leads-table) .tabulator-cell .mobile-action-dropdown .dropdown-toggle>i {
    display: none !important;
  }

  .tabulator:not(#leads-table) .tabulator-cell .mobile-action-dropdown .dropdown-toggle::after {
    display: inline-block !important;
    border: 0 !important;
    margin: 0 !important;
    vertical-align: baseline !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    content: "\f0d7" !important;
    font-size: 11px !important;
    line-height: 1 !important;
    color: var(--tertiary-text-color) !important;
    transition: transform .18s ease, color .15s ease !important;
  }

  .tabulator:not(#leads-table) .tabulator-cell .mobile-action-dropdown .dropdown-toggle.show,
  .tabulator:not(#leads-table) .tabulator-cell .mobile-action-dropdown .dropdown-toggle:active {
    background: rgba(255, 125, 0, 0.1) !important;
    border-color: rgba(255, 125, 0, 0.55) !important;
    color: var(--text-color) !important;
  }

  .tabulator:not(#leads-table) .tabulator-cell .mobile-action-dropdown .dropdown-toggle.show::after {
    transform: rotate(180deg) !important;
    color: var(--primary-color) !important;
  }

  .tabulator:not(#leads-table) .tabulator-cell .mobile-action-dropdown .dropdown-menu {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    z-index: 99999 !important;
    position: fixed !important;
    inset: auto !important;
    transform: none !important;
    min-width: 86% !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
  }

  .tabulator:not(#leads-table) .tabulator-cell .mobile-action-dropdown .dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }

  /* The menu surface follows the theme (--card-bg above), so the items have to
     as well — Bootstrap's near-black item text is unreadable on the dark card.
     Coloured items (text-danger etc.) keep their own colour. */
  .tabulator:not(#leads-table) .tabulator-cell .mobile-action-dropdown .dropdown-menu .dropdown-item:not(.text-danger):not(.text-success):not(.text-warning):not(.text-info) {
    color: var(--text-color) !important;
  }

  /* ── Card action menu (action-dropdown.js) ──────────────────────────────
     The desktop menu is a compact 12px list; on a phone the same list is a
     primary tap target, so the rows get a 44px minimum and readable text. */
  #tpActionMenu {
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
  }

  #tpActionMenu .tp-act-item {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    gap: 12px !important;
  }

  #tpActionMenu .tp-act-item i {
    width: 18px !important;
    font-size: 14px !important;
  }

  /* Allow overflow so dropdown is visible */
  .tabulator:not(#leads-table) .tabulator-row,
  .tabulator:not(#leads-table) .tabulator-cell,
  .tabulator:not(#leads-table) .tabulator-tableholder {
    overflow: visible !important;
  }

  /* ─── Header Toolbar Filters (Generic) ─── */
  .content>.container-fluid>.d-flex.justify-content-between,
  .content>.container-fluid>.d-flex.align-items-center.mb-4 {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .content>.container-fluid .ms-auto,
  .content>.container-fluid .d-flex.align-items-center.ms-auto {
    width: 100% !important;
    margin-left: 0 !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Unified Premium Toolbar Elements */
  .content>.container-fluid .select2-container,
  .content>.container-fluid .search-bar,
  .content>.container-fluid select.form-control,
  .content>.container-fluid input.form-control,
  .content>.container-fluid .btn,
  .card-header .btn-group,
  .card-header .position-relative,
  #searchLicense {
    width: 100% !important;
    border-radius: 12px !important;
  }

  /* Specific fix for search inputs with absolute icons */
  #searchLicense,
  .search-bar {
    height: 46px !important;
    border-radius: 12px !important;
    padding: 0 45px 0 16px !important;
    /* Space for right-hand icon */
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  #searchLicense:focus,
  .search-bar:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15) !important;
    outline: none !important;
  }

  /* Reposition search icon for 46px height */
  .card-header .position-relative i.fa-search,
  #searchLicense+i.fa-search {
    right: 18px !important;
    font-size: 0.98rem !important;
    color: var(--tertiary-text-color) !important;
  }

  /* Premium Select2 Redesign */
  .select2-container--default .select2-selection--single {
    height: 46px !important;
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-color) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    padding-left: 16px !important;
    line-height: 46px !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    width: 40px !important;
    top: 0 !important;
    right: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--tertiary-text-color) transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
    margin-left: -5px !important;
    transition: transform 0.3s ease !important;
  }

  .select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(180deg) !important;
    border-color: var(--primary-color) transparent transparent transparent !important;
  }

  .select2-container--open .select2-selection--single {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15) !important;
  }

  /* Search bar consistency */
  .search-bar {
    height: 46px !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    font-size: 0.95rem !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s ease !important;
  }

  .search-bar:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15) !important;
    outline: none !important;
  }

  .select2-container .select2-dropdown {
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: var(--card-bg) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--border) !important;
  }

  .select2-results__option {
    padding: 12px 18px !important;
    font-size: 0.92rem !important;
    color: var(--text-color) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
  }

  .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
    color: white !important;
  }

  /* Match Bootstrap dropdowns to new premium aesthetic */
  .dropdown-menu {
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    margin-top: 4px !important;
    background: var(--card-bg) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    min-width: 100% !important;
    z-index: 99999 !important;
  }
}

/* Scrollable Pattern for all tables */
@media (max-width: 768px) {
  .content .card-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 65vh !important;
    -webkit-overflow-scrolling: touch;
  }

  .tabulator:not(#leads-table, #email-table, #pos-table, #release-notes-table, #license-table, #blog-table, #customer-table, #client-table, #user-table) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .tabulator:not(#leads-table, #email-table, #pos-table, #release-notes-table, #license-table, #blog-table, #customer-table, #client-table, #user-table) .tabulator-tableholder {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ─── Mobile navigation drawer = bottom sheet ──────────────────────────────
   AdminLTE ships the drawer as a full-height panel that slides in from the
   left (`.main-sidebar { margin-left: -250px }`). On a phone that covers the
   whole screen and hides the page you came from. Re-anchor it to the bottom
   edge, cap it at roughly half the screen and slide it up instead. */
@media (max-width: 991.98px) {

  .main-sidebar,
  .layout-fixed .main-sidebar {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 55vh !important;
    max-height: 55vh !important;
    margin-left: 0 !important;
    transform: translateY(100%);
    transition: transform .3s ease-in-out !important;
    border-right: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .38) !important;
    overflow: hidden !important;
    z-index: 1040 !important;
  }

  /* dvh tracks the visible viewport, so the sheet keeps its proportion when
     the browser's URL bar shows or hides. vh above stays the fallback. */
  @supports (height: 55dvh) {

    .main-sidebar,
    .layout-fixed .main-sidebar {
      height: 55dvh !important;
      max-height: 55dvh !important;
    }
  }

  body.sidebar-open .main-sidebar,
  body.sidebar-open .layout-fixed .main-sidebar {
    transform: translateY(0);
  }

  /* Grab handle, in place of the desktop brand block — the logo is already in
     the app bar and this sheet has no vertical room to spare. */
  .main-sidebar .brand-link {
    display: none !important;
  }

  .main-sidebar::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .28);
    z-index: 5;
    pointer-events: none;
  }

  body.sidebar-open .main-sidebar.tk-sheet-dragging,
  body.sidebar-open .layout-fixed .main-sidebar.tk-sheet-dragging {
    transform: translateY(var(--tk-sheet-drag, 0px));
    transition: none !important;
  }

  .main-sidebar.tk-sheet-dragging::after {
    background: rgba(255, 255, 255, .55);
  }

  /* AdminLTE sizes the inner scroller against the viewport
     (`height: calc(100vh - 3.5rem)`) and offsets it for the fixed navbar. In a
     half-height sheet both push the menu's tail below the fold, where the
     sheet's `overflow: hidden` clips it — fill the sheet instead. */
  .main-sidebar .sidebar,
  .layout-navbar-fixed .wrapper .main-sidebar .sidebar {
    height: 100% !important;
    max-height: 100% !important;
    margin-top: 0 !important;
    padding-top: 18px !important;
  }

  .layout-navbar-fixed .wrapper .main-sidebar {
    margin-top: 0 !important;
  }

  /* A 10% scrim reads as a glitch behind a sheet this large. */
  #sidebar-overlay {
    background-color: rgba(12, 35, 62, .45) !important;
    z-index: 1039 !important;
  }
}

/* ─── Lock page scroll when mobile sidebar is open ─── */
@media (max-width: 991.98px) {

  html.sidebar-scroll-lock,
  html.sidebar-scroll-lock body.sidebar-open {
    overflow: hidden !important;
    height: 100% !important;
    overscroll-behavior: none !important;
  }

  /* position: fixed on body is the only reliable way to prevent touch scroll
     propagation on iOS Safari and some Android browsers.
     Deliberately NO touch-action: none here — browsers intersect touch-action
     up the whole ancestor chain, so blocking it on <body> also blocked panning
     inside the drawer itself and the menu became unscrollable on phones. The
     fixed + overflow:hidden pair already pins the page; the per-region rules
     below (which the drawer is not part of) kill scroll on the page content. */
  html.sidebar-scroll-lock body.sidebar-open {
    position: fixed !important;
    width: 100% !important;
    top: var(--sidebar-scroll-top, 0) !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* The drawer is the one region that must still pan while the page is locked. */
  body.sidebar-open .main-sidebar,
  body.sidebar-open .main-sidebar .sidebar,
  body.sidebar-open .main-sidebar .sidebar>nav {
    touch-action: pan-y !important;
    pointer-events: auto !important;
  }

  body.sidebar-open .content-wrapper,
  body.sidebar-open .content-wrapper .content,
  body.sidebar-open .content-wrapper .card-body,
  body.sidebar-open .main-header,
  body.sidebar-open .main-footer {
    overflow: hidden !important;
    touch-action: none !important;
    pointer-events: none !important;
  }
}