/* =========================================================
   BLOCK UI THEME (LIGHT / INDUSTRIAL) — BIG, BOXED, BOLD
   Paste at END of base.css
   ========================================================= */

   :root{
    /* Core palette */
    --bg: #f6f3ee;          /* warm paper */
    --panel: #ffffff;       /* panels */
    --card: #fbfaf8;        /* inputs background */
    --ink: #111111;         /* near-black text */
    --muted: #3a3a3a;       /* label secondary */
    --hint: #5a5a5a;
  
    /* Borders + shadows */
    --border: #111111;      /* strong black border */
    --border-soft: #2a2a2a; /* slightly softer border */
    --shadow: 6px 6px 0 rgba(17,17,17,0.14);
  
    /* Accent */
    --accent: #ff3b30;      /* bold red-orange */
    --accent-2: #2563eb;    /* blue */
    --ok: #16a34a;
    --danger: #dc2626;
  
    /* Geometry + sizing */
    --radius: 10px;
    --radius-sm: 8px;
  
    --page-pad: 18px;
    --row-pad: 20px;
  
    --label: 19px;
    --input: 20px;
    --control-h: 72px;
  }
  
  /* Base */
  html{ -webkit-text-size-adjust: 100%; }
  body{
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height: 1.3;
  }
  
  /* Header / nav */
  header{
    background: #111111;
    color: #ffffff;
    padding: 18px 18px;
    border-bottom: 4px solid var(--accent);
  }
  header h1{
    margin: 0;
    font-size: 18px;
    letter-spacing: 0.02em;
  }
  nav{
    margin-top: 12px;
  }
  nav a{
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
    display: inline-block;
    padding: 10px 12px;
    margin-right: 10px;
    border: 3px solid rgba(255,255,255,0.35);
    border-radius: var(--radius-sm);
  }
  nav a:hover{
    border-color: #ffffff;
  }
  
  /* Page container */
  .ios-page{
    padding: var(--page-pad);
    padding-bottom: 150px; /* room for sticky bar */
  }
  
  /* Narrow column so fields feel giant */
  .ios-form,
  .ios-header{
    max-width: 520px;
    margin: 0 auto;
  }
  
  /* Title */
  .ios-header{
    text-align: left;
    margin: 0 auto 14px;
  }
  .ios-title{
    font-size: 36px;
    font-weight: 1000;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
  }
  .ios-subtitle{
    margin: 0;
    color: var(--hint);
    font-size: 16px;
  }
  
  /* Section label */
  .ios-section-title{
    margin: 22px 0 10px;
    font-size: 14px;
    font-weight: 1000;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  
  /* Card becomes a bold panel */
  .ios-card{
    background: var(--panel);
    border: 4px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: visible;
  }
  
  /* Each row is a chunky block */
  .ios-row{
    padding: var(--row-pad);
    border-top: 4px solid var(--border);
  }
  .ios-row:first-child{
    border-top: none;
  }
  
  /* Labels */
  .ios-row-label,
  .ios-row-label label{
    font-size: var(--label);
    font-weight: 1000;
    margin-bottom: 12px;
    line-height: 1.15;
  }
  .ios-row-help{
    margin-top: 10px;
    color: var(--hint);
    font-size: 15px;
  }
  
  /* Inputs: huge and boxy */
  .ios-form input,
  .ios-form select,
  .ios-form textarea{
    width: 100%;
    box-sizing: border-box;
    background: var(--card);
    color: var(--ink);
    border: 4px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-size: var(--input);
    padding: 16px 16px;
    min-height: var(--control-h);
    outline: none;
  }
  
  /* Focus = thick accent ring */
  .ios-form input:focus,
  .ios-form select:focus,
  .ios-form textarea:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 6px rgba(255,59,48,0.18);
  }
  
  /* Textareas */
  .ios-form textarea{
    min-height: 210px;
    resize: vertical;
  }
  
  /* Errors: big and obvious */
  .ios-form .errorlist{
    margin: 12px 0 0;
    padding: 12px 14px;
    list-style: none;
    border-radius: var(--radius-sm);
    background: rgba(220,38,38,0.10);
    border: 4px solid rgba(220,38,38,0.55);
    color: var(--danger);
    font-size: 16px;
    font-weight: 1000;
  }
  
  /* Divider */
  .ios-divider{
    height: 14px;
    background: transparent;
    border-top: 4px solid var(--border);
    border-bottom: 4px solid var(--border);
  }
  
  /* Split rows: desktop 2-col, but still blocky */
  .ios-row-split{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 0;
    border-top: 4px solid var(--border);
  }
  .ios-row-split .ios-split{
    padding: var(--row-pad);
  }
  .ios-row-split .ios-split + .ios-split{
    border-left: 4px solid var(--border);
  }
  
  /* Items */
  .ios-items{
    padding: 0;
   }
  .ios-item-divider{
    height: 4px;
    background: var(--border);
    margin: 0;
  }

  /* Items: add breathing room between line items (desktop/tablet) */
.ios-item{
  margin-top: 8px;
  margin-bottom: 12px;
}

/* Optional: give the divider a little air so it doesn't feel glued */
.ios-item-divider{
  margin-top: 10px;
}

  
  /* Totals & Add Item */
  .ios-actions-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    border-top: 4px solid var(--border);
    background: rgba(17,17,17,0.03);
  }

  /* Smaller buttons just for the Actions section */
.ios-actions .ios-btn{
  min-height: 56px;       /* was 72 */
  padding: 12px 14px;     /* was 16px 18px */
  font-size: 16px;        /* was 18px */
  border-width: 3px;      /* matches slightly tighter look */
}

  
  .ios-totals{
    background: #ffffff;
    border: 4px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 4px 4px 0 rgba(17,17,17,0.10);
    padding: 14px;
  }
  
  .ios-total-row{
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-size: 18px;
    font-weight: 1000;
    padding: 10px 0;
    border-top: 3px dashed rgba(17,17,17,0.25);
  }
  .ios-total-row:first-child{ border-top: none; }
  .ios-total-row span{ color: var(--muted); }
  .ios-total-row strong{ font-variant-numeric: tabular-nums; }
  
  .ios-total-row-emph{
    margin-top: 6px;
    padding-top: 14px;
    border-top: 4px solid rgba(17,17,17,0.25);
  }
  .ios-total-row-emph strong{
    font-size: 24px;
  }
  
  /* Buttons */
  .ios-btn{
    min-height: 72px;
    padding: 16px 18px;
    border-radius: var(--radius);
    border: 4px solid var(--border);
    font-size: 18px;
    font-weight: 1000;
    cursor: pointer;
  }
  
  .ios-btn-primary{
    background: var(--accent);
    color: #ffffff;
    border-color: #111111;
    box-shadow: 4px 4px 0 rgba(17,17,17,0.18);
  }
  .ios-btn-primary:hover{
    filter: brightness(1.02);
  }
  
  .ios-btn-ghost{
    background: #ffffff;
    color: var(--ink);
  }
  
/* =========================
   BUTTONS: support <a> + add blue "edit" variant
   Paste at END of base.css
   ========================= */

/* 1) Make ios buttons work for <a> tags */
a.ios-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

/* Optional: button hover/active feel on links too */
a.ios-btn:hover{ filter: brightness(1.02); }
a.ios-btn:active{ transform: translateY(1px); }

/* 2) Blue variant for Edit actions */
/* =========================
   Blue action button (Edit Invoice)
   Slightly smaller + tighter than primary CTA
   ========================= */

   .ios-btn-blue{
    background: var(--accent-2);
    color: #ffffff;
    border-color: #111111;
    box-shadow: 4px 4px 0 rgba(17,17,17,0.18);
  
    /* ↓ tighter sizing than default ios-btn */
    min-height: 56px;      /* was 72 */
    padding: 12px 16px;    /* was 16px 18px */
    font-size: 16px;       /* was 18px */
  }
  
  .ios-btn-blue:hover{
    filter: brightness(1.02);
  }
  
  a.ios-btn-blue{
    color: #ffffff;
  }
  


  /* Links */
  .ios-link{
    color: var(--ink);
    text-decoration: none;
    font-weight: 1000;
    display: inline-block;
    padding: 12px 12px;
    border-radius: var(--radius-sm);
    border: 4px solid transparent;
  }
  .ios-link:hover{
    border-color: var(--border);
  }
  
  /* Sticky bottom bar */
  .ios-bottom-bar{
    position: sticky;
    bottom: 0;
    margin-top: 18px;
    background: rgba(246,243,238,0.92);
    backdrop-filter: blur(10px);
    border-top: 4px solid var(--border);
    padding: 14px 0 env(safe-area-inset-bottom);
  }
  .ios-bottom-inner{
    max-width: 520px;
    margin: 0 auto;
    padding: 0 18px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 12px;
    align-items: center;
  }
  .ios-bottom-inner .ios-link{
    text-align: center;
    border: 4px solid var(--border);
    background: #ffffff;
  }
  .ios-bottom-inner .ios-btn{
    width: 100%;
  }
  
  /* Checkbox row */
  .ios-check{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 1000;
  }
  .ios-check input{
    width: 26px;
    height: 26px;
    accent-color: var(--ok);
  }

  /* =========================================
   MOBILE (<=768px): full width, clean blocks,
   remove stray lines, bigger text
   ========================================= */
@media (max-width: 768px){

  /* 1) TRUE FULL WIDTH (kills any lingering max-width centering) */
  html, body { width: 100%; overflow-x: hidden; }

  .ios-page{
    padding: 12px !important;
    padding-bottom: 170px !important; /* room for sticky bar */
  }

  .ios-form,
  .ios-header,
  .ios-section,
  .ios-bottom-inner{
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* 2) Remove container borders/dividers that create “extra lines” */
  .ios-card{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .ios-divider,
  .ios-item-divider{
    display: none !important;
    border: 0 !important;
  }

  /* 3) Kill legacy row separators */
  .ios-row,
  .ios-row + .ios-row{
    border-top: 0 !important;
  }

  /* 4) Each field becomes its own clean block */
  .ios-row{
    background: var(--panel) !important;
    border: 2px solid var(--border) !important;  /* thinner = cleaner */
    border-radius: 12px !important;
    padding: 18px !important;
    margin: 14px 0 !important;
  }

  /* 5) Split sections must stack as independent blocks */
  .ios-row-split{
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  .ios-row-split .ios-split{
    background: var(--panel) !important;
    border: 2px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 18px !important;
    margin: 14px 0 !important;
  }

  .ios-row-split .ios-split + .ios-split{
    border-left: 0 !important;
  }

  /* 6) Bigger typography */
  .ios-title{
    font-size: 38px !important;
    line-height: 1.05 !important;
  }

  .ios-subtitle{
    font-size: 18px !important;
  }

  .ios-row-label{
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }

  .ios-row-help{
    font-size: 16px !important;
  }

  /* 7) Bigger inputs (and match border thickness to blocks) */
  .ios-form input,
  .ios-form select,
  .ios-form textarea{
    font-size: 22px !important;
    min-height: 76px !important;
    padding: 18px !important;
    border-width: 2px !important;
    border-radius: 10px !important;
  }

  .ios-form textarea{
    min-height: 240px !important;
  }

  /* 8) Bottom bar: separate + full width */
  .ios-bottom-bar{
    background: rgba(246,243,238,0.96) !important;
    border-top: 3px solid var(--border) !important;
  }

  .ios-bottom-inner{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 12px !important;
  }

  .ios-bottom-inner .ios-link{
    display: block !important;
    text-align: center !important;
    border: 2px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    background: #ffffff !important;
  }

  .ios-bottom-inner .ios-btn{
    width: 100% !important;
    min-height: 78px !important;
    font-size: 20px !important;
    border-radius: 12px !important;
  }

  /* =========================
     FINAL POLISH (mobile)
     ========================= */

  /* Textareas: keep them big but not awkward */
  .ios-form textarea{
    min-height: 220px !important;
    padding: 18px !important;
    line-height: 1.25 !important;
  }

  /* Flatpickr/date inputs: normalize vertical alignment */
  .ios-form input[type="date"],
  .ios-form .flatpickr-input{
    line-height: 1.1 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /* Items: make each line item a clean block card */
  .ios-items{
    padding: 0 !important;
  }

  .ios-item{
    background: var(--panel) !important;
    border: 2px solid var(--border) !important;
    border-radius: 12px !important;
    margin: 14px 0 !important;
    overflow: hidden !important;
  }

  /* Remove inner divider that looks like a random line */
  .ios-item-divider{
    display: none !important;
  }

  /* Give consistent padding inside item cards */
  .ios-item-top{
    padding: 18px !important;
  }

  /* Remove item checkbox row: make it feel intentional */
  .ios-row-inline{
    margin-top: 10px !important;
    padding-top: 12px !important;
    border-top: 2px dashed rgba(17,17,17,0.25) !important;
  }

  .ios-check{
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  /* Totals card: match thinner border weight */
  .ios-totals{
    border-width: 2px !important;
    border-radius: 12px !important;
  }

  .ios-total-row-emph strong{
    font-size: 26px !important;
  }

  .ios-item + .ios-item{
    margin-top: 8px;
  }


}