.sscmp-wrap { background:#fff; padding:16px; border:1px solid #e5e7eb; border-radius:12px; }
.sscmp-table { width:100%; border-collapse:collapse; }
.sscmp-table th, .sscmp-table td { border-bottom:1px solid #eee; padding:10px; text-align:left; }
.sscmp-modal { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999; display:none; align-items:center; justify-content:center; padding:24px; }
.sscmp-modal.is-open, .sscmp-modal[style*="display: flex"] { display:flex; }
.sscmp-modal-content { background:#fff; padding:20px; border-radius:12px; width:min(760px,96vw); max-height:90vh; overflow:auto; position:relative; }
.sscmp-close { position:absolute; right:10px; top:8px; cursor:pointer; font-size:20px; }
.ss-field { margin-bottom:10px; display:flex; flex-direction:column; }
.ss-actions { margin-top:10px; display:flex; gap:8px; }
.ss-invoice-create .box { border:1px solid #e5e7eb; border-radius:10px; padding:12px; margin-bottom:12px; }
.ss-invoice-create .grid-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ss-invoice-create .inv-items { width:100%; border-collapse:collapse; }
.ss-invoice-create .inv-items th, .ss-invoice-create .inv-items td { border:1px solid #e5e7eb; padding:8px; }
.ss-invoice-create .totals label { display:block; margin-top:6px; }
/* Pagination */
.ss-pagination { margin-top:12px; }
.ss-pagination .page-numbers { display:inline-block; padding:6px 10px; border:1px solid #e5e7eb; margin-right:6px; border-radius:6px; text-decoration:none; }
.ss-pagination .current { background:#111; color:#fff; border-color:#111; }

/* --- Mobile Add-on (integrated) --- */

/* SolSetu CMP — Mobile First Add-on (Android friendly)
   Use together with the plugin's default CSS or the modern skin.
   Prioritizes larger tap targets, legible type, stacked layouts, and card-style tables under 640px.
*/

/* Base mobile-friendly typography */
:root{
  --ss-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --ss-base: 15px;
  --ss-large: 16px;
  --ss-radius: 14px;
}
.sscmp-wrap{ font: 400 var(--ss-base)/1.6 var(--ss-font); }
.sscmp-wrap h2, .sscmp-wrap h3{ line-height:1.3; }

/* Bigger inputs & buttons */
.sscmp-wrap input[type="text"],
.sscmp-wrap input[type="email"],
.sscmp-wrap input[type="url"],
.sscmp-wrap input[type="number"],
.sscmp-wrap input[type="date"],
.sscmp-wrap select,
.sscmp-wrap textarea{
  min-height: 42px;
  border-radius: 12px;
  font-size: var(--ss-large);
  padding: 10px 12px;
}
.sscmp-wrap .button,
.sscmp-wrap .button-primary{
  min-height: 44px;
  border-radius: 12px;
  font-size: var(--ss-large);
  padding: 10px 16px;
}

/* Filter bar becomes a scroll container on small screens */
@media (max-width: 640px){
  .ss-filters{
    display:flex !important;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .ss-filters > *{ min-width: 200px; }
}

/* Tables → Cards on mobile (Customers & Invoices) */
@media (max-width: 640px){
  .sscmp-table{ border:0; }
  .sscmp-table thead{ display:none; }
  .sscmp-table tr{ display:block; border:1px solid #e5e7eb; border-radius: var(--ss-radius); margin-bottom: 10px; padding: 10px; background:#fff; }
  .sscmp-table td{ display:flex; justify-content:space-between; align-items:center; border:0; padding: 6px 0; }
  .sscmp-table td::before{
    content: attr(data-label);
    font-size: 12px; color:#6b7280; text-transform: uppercase; letter-spacing: .04em;
    margin-right: 10px; flex: 0 0 40%;
  }
  .sscmp-table td:last-child{ padding-top: 10px; border-top:1px dashed #e5e7eb; }
  .sscmp-table .button{ width: 100%; justify-content: center; margin-bottom: 8px; }
  .sscmp-table .button:last-child{ margin-bottom: 0; }
}

/* Add proper data-labels via a helper class (we’ll add it in markup with JS) */
.sscmp-table[data-mobile-labels="customers"] tbody tr td:nth-child(1){ --lbl: "Name"; }
.sscmp-table[data-mobile-labels="customers"] tbody tr td:nth-child(2){ --lbl: "Phone"; }
.sscmp-table[data-mobile-labels="customers"] tbody tr td:nth-child(3){ --lbl: "Company"; }
.sscmp-table[data-mobile-labels="customers"] tbody tr td:nth-child(4){ --lbl: "Actions"; }

.sscmp-table[data-mobile-labels="invoices"] tbody tr td:nth-child(1){ --lbl: "#"; }
.sscmp-table[data-mobile-labels="invoices"] tbody tr td:nth-child(2){ --lbl: "Customer"; }
.sscmp-table[data-mobile-labels="invoices"] tbody tr td:nth-child(3){ --lbl: "Date"; }
.sscmp-table[data-mobile-labels="invoices"] tbody tr td:nth-child(4){ --lbl: "Total"; }
.sscmp-table[data-mobile-labels="invoices"] tbody tr td:nth-child(5){ --lbl: "Status"; }
.sscmp-table[data-mobile-labels="invoices"] tbody tr td:nth-child(6){ --lbl: "PDF"; }

/* Inject the label text from the CSS var */
@media (max-width: 640px){
  .sscmp-table td::before{ content: var(--lbl); }
}

/* Sticky Add button (customers) */
@media (max-width: 640px){
  #sscmp-add{
    position: fixed;
    right: 16px; bottom: 16px;
    border-radius: 999px !important;
    padding: 14px 18px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    z-index: 1000;
  }
}

/* Full-screen modal on mobile */
@media (max-width: 640px){
  .sscmp-modal-content{
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .sscmp-close{ font-size: 24px; top: 12px; right: 12px; }
}

/* Invoice builder: stack inputs and make buttons large */
@media (max-width: 640px){
  .ss-invoice-create .grid-two{ grid-template-columns: 1fr !important; }
  .ss-invoice-create .inv-items th:nth-child(2),
  .ss-invoice-create .inv-items td:nth-child(2){ display:none; } /* hide HSN on small screens */
  #add-item{ width:100%; }
  .ss-actions{ flex-direction: column; }
  .ss-actions .button, .ss-actions .button-primary{ width:100%; }
}

/* Touch-friendly pagination */
.ss-pagination{ display:flex; gap:8px; flex-wrap:wrap; }
.ss-pagination .page-numbers{
  min-width: 40px; height: 40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 12px; font-size: var(--ss-large);
}

/* Minor helper: ensure tap highlight visible on Android */
.sscmp-wrap a, .sscmp-wrap button{ -webkit-tap-highlight-color: rgba(0,0,0,.1); }


/* ==== v1.7.4 Mobile/PWA Enhancements ==== */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
img, video { max-width: 100%; height: auto; }

/* Prevent layout overflow on small screens */
.sscmp-wrap, .ss-invoice-create, .sscmp-modal-content { max-width: 100%; overflow-wrap: anywhere; }

/* Base mobile typography (prevents iOS zoom) */
:root{ --ss-mobile-font: 16px; }
.sscmp-wrap, .ss-invoice-create { font-size: var(--ss-mobile-font); line-height: 1.55; }

/* Inputs/taps >=44px */
.sscmp-wrap input[type="text"],
.sscmp-wrap input[type="email"],
.sscmp-wrap input[type="url"],
.sscmp-wrap input[type="number"],
.sscmp-wrap input[type="date"],
.sscmp-wrap input[type="tel"],
.sscmp-wrap select,
.sscmp-wrap textarea,
.sscmp-wrap .button,
.sscmp-wrap .button-primary { min-height: 44px; }

/* Modals: full-viewport on phones & PWA safe areas */
.sscmp-modal { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
@media (max-width: 720px){
  .sscmp-modal-content{
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0;
    border-radius: 0;
  }
}

/* Avoid overflow in grids (min-width:0 trick) */
.ss-invoice-create .grid-two > * { min-width: 0; }

/* Filter bars wrap neatly */
.ss-filters { display:flex; flex-wrap: wrap; gap:10px; }
.ss-filters > div { flex: 1 1 220px; min-width: 180px; }

/* Tables -> cards under 640px (already supported); ensure actions stack and don't overlap */
@media (max-width: 640px){
  .sscmp-table td:last-child .button { width: 100%; margin-bottom: 8px; }
  .sscmp-table td:last-child .button:last-child { margin-bottom: 0; }
}

/* Invoice builder: sticky bottom action bar on phones */
@media (max-width: 720px){
  .ss-actions{
    position: sticky;
    bottom: 0;
    padding: 12px;
    background: rgba(255,255,255,.95);
    backdrop-filter: saturate(1.3) blur(6px);
    display: grid;
    grid-template-columns: 1fr;
  }
  .ss-actions .button, .ss-actions .button-primary{ width: 100%; }
}

/* Prevent selects from exploding width in some Android skins */
select { max-width: 100%; }

/* Better labels spacing */
.ss-field label { font-size: 0.9em; opacity: 0.9; margin-bottom: 6px; }

/* Large numeric inputs shouldn't create horizontal scroll */
input[type="number"] { width: 100%;}

/* Sticky Add button safe-area */
@media (max-width: 640px){
  #sscmp-add{ bottom: calc(16px + env(safe-area-inset-bottom)); }
}


/* ===== v1.7.5 Mobile Fixes ===== */
/* Invoice item table: allow horizontal scrolling on phones */
@media (max-width: 640px){
  .ss-invoice-create .inv-items{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ss-invoice-create .inv-items thead th,
  .ss-invoice-create .inv-items td{
    white-space: nowrap;
  }
  /* Keep a sensible min width so columns don't collapse */
  .ss-invoice-create .inv-items{ min-width: 600px; }
}

/* Customer list action buttons: keep text horizontal, wrap cleanly */
@media (max-width: 640px){
  .sscmp-table[data-mobile-labels="customers"] tbody td:last-child{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sscmp-table[data-mobile-labels="customers"] tbody td:last-child .button{
    white-space: nowrap !important;
    width: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 calc(50% - 8px); /* two per row on small screens */
  }
}

/* Also keep invoice list action cell tidy, if any */
@media (max-width: 640px){
  .sscmp-table[data-mobile-labels="invoices"] tbody td:last-child{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sscmp-table[data-mobile-labels="invoices"] tbody td:last-child .button{
    white-space: nowrap !important;
    width: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ===== v1.7.6: Small-phone portrait fix for invoice items ===== */
/* 481–640px: keep horizontal scroll from v1.7.5 */

/* <=480px: switch invoice items to stacked cards so inputs never go off-screen */
@media (max-width: 480px){
  .ss-invoice-create .inv-items{
    display:block;
    width:100%;
    overflow:visible;
    min-width:0;
  }
  .ss-invoice-create .inv-items thead{ display:none; }
  .ss-invoice-create .inv-items tbody tr{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:10px;
    margin-bottom:10px;
    background:#fff;
  }
  .ss-invoice-create .inv-items td{
    border:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
    white-space:normal;
  }
  .ss-invoice-create .inv-items td::before{
    content: attr(data-label);
    font-size:12px;
    color:#6b7280;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  /* Map column labels */
  .ss-invoice-create .inv-items tbody tr td:nth-child(1){ --lbl: "Item"; }
  .ss-invoice-create .inv-items tbody tr td:nth-child(2){ --lbl: "HSN/SAC"; }
  .ss-invoice-create .inv-items tbody tr td:nth-child(3){ --lbl: "Qty"; }
  .ss-invoice-create .inv-items tbody tr td:nth-child(4){ --lbl: "Rate"; }
  .ss-invoice-create .inv-items tbody tr td:nth-child(5){ --lbl: "Tax %"; }
  .ss-invoice-create .inv-items tbody tr td:nth-child(6){ --lbl: "Line Total"; }
  .ss-invoice-create .inv-items tbody tr td:nth-child(7){ --lbl: " "; }

  .ss-invoice-create .inv-items td::before{ content: var(--lbl); }

  /* Make inputs 100% width inside cards */
  .ss-invoice-create .inv-items input[type="text"],
  .ss-invoice-create .inv-items input[type="number"]{
    width:100%;
  }

  /* Delete button spans full width of its cell */
  .ss-invoice-create .inv-items tbody tr td:last-child .button{
    width:100%;
    justify-content:center;
  }
}

/* General: avoid hidden inputs inside any mobile card tables */
@media (max-width: 640px){
  .sscmp-table td input,
  .sscmp-table td select,
  .sscmp-table td textarea{
    width: 100%;
    min-width: 0;
  }
}