/* =================================================================
   Horizon Invoice Generator — WordPress Plugin
   Pixel-perfect match to original React/Tailwind app
   Full Mobile + Tablet Responsive
   ================================================================= */

/* -----------------------------------------------------------------
   CSS VARIABLES  (mirrors index.css :root exactly)
----------------------------------------------------------------- */
#hig-app {
    --primary:            hsl(145, 79%, 38%);
    --primary-fg:         hsl(0, 0%, 100%);
    --secondary:          hsl(0, 0%, 15%);
    --secondary-fg:       hsl(0, 0%, 100%);
    --background:         hsl(0, 0%, 97%);
    --foreground:         hsl(0, 0%, 10%);
    --card:               hsl(0, 0%, 100%);
    --card-fg:            hsl(0, 0%, 10%);
    --muted:              hsl(0, 0%, 90%);
    --muted-fg:           hsl(0, 0%, 40%);
    --border:             hsl(0, 0%, 90%);
    --input:              hsl(0, 0%, 100%);
    --ring:               hsl(145, 79%, 38%);
    --destructive:        hsl(0, 84%, 60%);
    --destructive-fg:     hsl(0, 0%, 100%);
    --radius:             0.5rem;
    --radius-md:          calc(0.5rem - 2px);
    --shadow-sm:          0 1px 2px 0 rgb(0 0 0 / .05);
    --shadow:             0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --shadow-md:          0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}

/* -----------------------------------------------------------------
   RESET  (scoped so we never break the WordPress theme)
----------------------------------------------------------------- */
#hig-app,
#hig-app * {
    box-sizing: border-box;
}

#hig-app h1, #hig-app h2, #hig-app h3,
#hig-app p, #hig-app ul, #hig-app li,
#hig-app table, #hig-app th, #hig-app td {
    margin: 0;
    padding: 0;
}

#hig-app button {
    font-family: inherit;
    cursor: pointer;
}

#hig-app input, #hig-app textarea, #hig-app select {
    font-family: inherit;
}

/* -----------------------------------------------------------------
   WRAPPER
----------------------------------------------------------------- */
#hig-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--foreground);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* -----------------------------------------------------------------
   HEADER
   Original: bg-primary text-primary-foreground py-8 mb-8 shadow-md
----------------------------------------------------------------- */
.hig-header {
    background: var(--primary);
    color: var(--primary-fg);
    padding: 2rem 1.5rem;          /* py-8 */
    margin-bottom: 2rem;           /* mb-8 */
    box-shadow: var(--shadow-md);  /* shadow-md */
}

.hig-header-inner {
    max-width: 1280px;   /* max-w-7xl */
    margin: 0 auto;
    text-align: center;
    padding: 0 1rem;
}

.hig-header-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;         /* gap-3 */
    margin-bottom: 0.5rem;/* mb-2 */
}

.hig-header-title svg {
    width: 2rem;     /* w-8 */
    height: 2rem;    /* h-8 */
    flex-shrink: 0;
}

/* text-3xl md:text-4xl font-bold */
.hig-header-title h1 {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--primary-fg);
    line-height: 1.2;
}

/* text-primary-foreground/90 text-lg font-medium */
.hig-header p {
    font-size: 1.125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .9);
    margin: 0;
}

/* -----------------------------------------------------------------
   MAIN CONTENT
   Original: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12
----------------------------------------------------------------- */
.hig-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem 3rem;   /* px-8 pb-12 */
}

/* -----------------------------------------------------------------
   TWO-COLUMN GRID
   Original: grid grid-cols-1 lg:grid-cols-2 gap-8
----------------------------------------------------------------- */
.hig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.hig-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* -----------------------------------------------------------------
   CARDS
   Original: shadcn Card — rounded-xl border bg-card shadow-sm
   Page usage: shadow-sm border-border/50
----------------------------------------------------------------- */
.hig-card {
    background: var(--card);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 0.75rem;      /* rounded-xl */
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;       /* space-y-6 */
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

/* WhatsApp parser card: border-primary/20 */
.hig-card-accent {
    border-color: rgba(26, 158, 74, .2);
}

/* CardHeader: flex flex-col space-y-1.5 p-6 */
.hig-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

/* CardTitle: text-base font-semibold leading-none */
.hig-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    color: var(--foreground);
}

.hig-card-title-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hig-card-title-icon svg {
    color: var(--primary);
    flex-shrink: 0;
}

/* CardContent: p-6 */
.hig-card-body {
    padding: 1.5rem;
}

/* -----------------------------------------------------------------
   FORM FIELDS  (space-y-4 inside CardContent)
----------------------------------------------------------------- */
.hig-field {
    margin-bottom: 1rem;
}

.hig-field:last-child {
    margin-bottom: 0;
}

/* Label: text-sm font-medium */
.hig-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 0.375rem;
    line-height: 1;
}

/* Input: h-9 w-full rounded-md border bg-input px-3 py-1 text-base shadow-sm
   focus-visible:ring-primary, bg-input */
.hig-field input[type="text"],
.hig-field input[type="number"],
.hig-field input[type="tel"],
.hig-field input[type="email"],
.hig-field textarea {
    display: flex;
    width: 100%;
    height: 2.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--input);
    padding: 0 0.75rem;
    font-size: 0.9375rem;
    color: var(--foreground);
    box-shadow: var(--shadow-sm);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.hig-field input::placeholder,
.hig-field textarea::placeholder {
    color: var(--muted-fg);
}

.hig-field input:focus,
.hig-field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(26, 158, 74, .2);
}

/* Textarea: min-h rows=6 resize-y */
.hig-field textarea {
    height: auto;
    min-height: 7.5rem;   /* rows=6 */
    padding: 0.5rem 0.75rem;
    resize: vertical;
    line-height: 1.5;
}

/* -----------------------------------------------------------------
   SELECT  (custom styled)
----------------------------------------------------------------- */
.hig-select-wrap {
    position: relative;
}

.hig-select-wrap select {
    display: block;
    width: 100%;
    height: 2.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--input);
    padding: 0 2.25rem 0 0.75rem;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--foreground);
    box-shadow: var(--shadow-sm);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hig-select-wrap select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(26, 158, 74, .2);
}

.hig-select-arrow {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--muted-fg);
}

/* -----------------------------------------------------------------
   BUTTONS  (shadcn Button base)
----------------------------------------------------------------- */
.hig-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem;
    min-height: 2.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: var(--radius-md);
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 0.15s ease, background 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease;
}

.hig-btn:disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.hig-btn svg { flex-shrink: 0; }

/* Primary — Generate Invoice: bg-gradient from-primary to-#20b958 */
.hig-btn-primary {
    background: linear-gradient(to right, var(--primary), #20b958);
    color: var(--primary-fg);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(26, 158, 74, .35);
}
.hig-btn-primary:hover:not(:disabled) {
    opacity: 0.88;
    box-shadow: 0 4px 14px rgba(26, 158, 74, .45);
}

/* Secondary — Download PDF */
.hig-btn-secondary {
    background: var(--secondary);
    color: var(--secondary-fg);
    border-color: transparent;
}
.hig-btn-secondary:hover:not(:disabled) { opacity: 0.88; }

/* Outline primary — Add Row */
.hig-btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.hig-btn-outline:hover:not(:disabled) {
    background: var(--primary);
    color: var(--primary-fg);
}

/* Outline secondary — Download Image */
.hig-btn-outline-secondary {
    background: transparent;
    color: var(--secondary);
    border-color: var(--secondary);
}
.hig-btn-outline-secondary:hover:not(:disabled) {
    background: var(--secondary);
    color: var(--secondary-fg);
}

/* Full width */
.hig-btn-full { width: 100%; }

/* Icon (ghost) — delete row */
.hig-btn-icon {
    background: transparent;
    border-color: transparent;
    color: var(--muted-fg);
    padding: 0.35rem;
    min-height: auto;
    border-radius: var(--radius-md);
}
.hig-btn-icon:hover:not(:disabled) {
    background: rgba(239, 68, 68, .1);
    color: var(--destructive);
}

/* -----------------------------------------------------------------
   LOADING / SPINNER
   Original: LoadingSpinner.jsx — flex flex-col items-center justify-center py-8
----------------------------------------------------------------- */
.hig-loading-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    gap: 1rem;
}

.hig-loading-wrap p {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--foreground);
}

/* Loader2 spin animation */
.hig-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--muted);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: hig-spin 1s linear infinite;
}

@keyframes hig-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------
   INVOICE ITEMS TABLE  (InvoiceTable.jsx)
   Original: invoice-table min-w-[600px] with Input cells
----------------------------------------------------------------- */
.hig-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
}

.hig-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.hig-table thead th {
    background: var(--muted);
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8125rem;
    border: 1px solid var(--border);
    color: var(--foreground);
    white-space: nowrap;
}

.hig-table thead th.col-name  { width: 30%; }
.hig-table thead th.col-qty   { width: 15%; }
.hig-table thead th.col-unit  { width: 15%; }
.hig-table thead th.col-price { width: 20%; }
.hig-table thead th.col-total { width: 15%; }
.hig-table thead th.col-del   { width: 5%; }

.hig-table tbody td {
    padding: 0.15rem;
    border: 1px solid var(--border);
    vertical-align: middle;
}

/* Last cell: delete button */
.hig-table tbody td:last-child {
    text-align: center;
    padding: 0.25rem;
}

/* Inputs inside table — border-0 bg-transparent focus ring-primary */
.hig-table tbody td input {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--foreground);
    outline: none;
    min-height: 2.25rem;
    border-radius: 3px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.hig-table tbody td input::placeholder { color: var(--muted-fg); }

.hig-table tbody td input:focus {
    background: rgba(26, 158, 74, .05);
    box-shadow: 0 0 0 1.5px rgba(26, 158, 74, .4) inset;
}

/* Row total cell: font-medium text-foreground px-3 */
.hig-row-total {
    font-weight: 500;
    color: var(--foreground);
    padding: 0.5rem 0.75rem !important;
    white-space: nowrap;
    font-size: 0.875rem;
}

/* Tfoot */
.hig-table tfoot td {
    padding: 0.75rem;
    border: 1px solid var(--border);
}

.hig-tfoot-label {
    text-align: right !important;
    font-weight: 700;
    color: var(--foreground);
}

.hig-tfoot-total {
    font-weight: 700;
    font-size: 1.125rem;  /* text-lg */
    color: var(--primary);
    white-space: nowrap;
}

/* Delete row button (ghost icon) */
.hig-del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--muted-fg);
    padding: 0.35rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.hig-del-btn:hover {
    background: rgba(239, 68, 68, .1);
    color: var(--destructive);
}
.hig-del-btn svg { display: block; }

/* -----------------------------------------------------------------
   INVOICE PREVIEW CARD
   Original: CardContent p-0 sm:p-6 bg-muted/10
            inner: overflow-x-auto > min-w-[600px] p-4
----------------------------------------------------------------- */
.hig-preview-header {
    background: rgba(0,0,0,.02);
    border-bottom: 1px solid var(--border);
}

.hig-preview-body {
    padding: 1.25rem;
    background: rgba(0,0,0,.02);
}

.hig-preview-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hig-preview-inner {
    min-width: 580px;
    padding: 0.5rem;
}

/* -----------------------------------------------------------------
   DOWNLOAD BUTTONS ROW — 3 columns (PDF | Image | WhatsApp)
----------------------------------------------------------------- */
.hig-download-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.hig-download-row .hig-btn {
    width: 100%;
}

/* WhatsApp Share button */
.hig-btn-whatsapp {
    background: #25D366;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(37, 211, 102, .35);
}
.hig-btn-whatsapp:hover:not(:disabled) {
    background: #1ebe5d;
    box-shadow: 0 4px 14px rgba(37, 211, 102, .45);
}

/* -----------------------------------------------------------------
   CURRENCY SYMBOL SPANS
----------------------------------------------------------------- */
.hig-sym { font-family: inherit; }

/* -----------------------------------------------------------------
   TOAST  (sonner-style)
----------------------------------------------------------------- */
.hig-toast {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
    padding: 0.8rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    max-width: 340px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.22,1,.36,1);
}

.hig-toast.hig-toast-show {
    opacity: 1;
    transform: translateX(0);
}

.hig-toast.success { background: var(--primary); }
.hig-toast.error   { background: var(--destructive); }

/* =================================================================
   INVOICE DOCUMENT STYLES — matches OLD plugin exactly
   Captured by html2canvas for PDF/image
================================================================= */
.invoice-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}

.invoice-header {
    border-bottom: 2.5px solid hsl(145, 79%, 38%);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.invoice-biz-name {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: hsl(145, 79%, 38%);
}

.invoice-biz-meta p {
    margin: 0.15rem 0;
    font-size: 0.8125rem;
    color: var(--muted-fg);
}

.invoice-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.invoice-meta-grid h3 {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.invoice-meta-grid p {
    margin: 0.15rem 0;
    font-size: 0.8125rem;
    color: var(--muted-fg);
}

.invoice-section {
    margin-bottom: 1.5rem;
}

.invoice-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.invoice-table thead th {
    background: var(--muted);
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8125rem;
    border: 1px solid var(--border);
    color: var(--foreground);
    white-space: nowrap;
}

.invoice-table tbody td {
    padding: 0.75rem;
    border: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--foreground);
}

.invoice-table tfoot td {
    padding: 0.75rem;
    border: 1px solid var(--border);
}

.invoice-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--muted-fg);
}

/* Hide helper */
.inv-hide { display: none !important; }

/* =================================================================
   RESPONSIVE — Tablet  ≤ 1024px
   Original: grid-cols-1 (single column) for lg breakpoint
================================================================= */
@media (max-width: 1024px) {
    .hig-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hig-header-title h1 {
        font-size: 1.75rem;
    }

    /* 3-col → 2-col on tablet */
    .hig-download-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* =================================================================
   RESPONSIVE — Mobile  ≤ 768px
================================================================= */
@media (max-width: 768px) {
    .hig-header {
        padding: 1.5rem 1rem;
        margin-bottom: 1.25rem;
    }

    /* md:text-4xl → on mobile keep text-3xl */
    .hig-header-title h1 {
        font-size: 1.5rem;
    }

    .hig-header p {
        font-size: 1rem;
    }

    .hig-main {
        padding: 0 1rem 2.5rem;
    }

    .hig-card {
        margin-bottom: 1.25rem;
    }

    .hig-card-header {
        padding: 1rem 1.25rem;
    }

    .hig-card-body {
        padding: 1.25rem;
    }

    .hig-preview-scroll {
        padding: 1rem;
    }

    .hig-preview-inner {
        min-width: 560px;
    }

    /* Invoice doc inside preview */
    .invoice-container {
        padding: 1.5rem 1.25rem;
    }
}

/* =================================================================
   RESPONSIVE — Small Mobile  ≤ 480px
================================================================= */
@media (max-width: 480px) {
    .hig-header {
        padding: 1.25rem 0.875rem;
        margin-bottom: 1rem;
    }

    .hig-header-title {
        flex-direction: column;
        gap: 0.4rem;
    }

    .hig-header-title svg {
        width: 1.75rem;
        height: 1.75rem;
    }

    .hig-header-title h1 {
        font-size: 1.25rem;
        text-align: center;
    }

    .hig-header p {
        font-size: 0.9rem;
    }

    .hig-main {
        padding: 0 0.75rem 2rem;
    }

    .hig-card {
        border-radius: 0.625rem;
        margin-bottom: 1rem;
    }

    .hig-card-header {
        padding: 0.875rem 1rem;
    }

    .hig-card-body {
        padding: 1rem;
    }

    .hig-field {
        margin-bottom: 0.875rem;
    }

    /* iOS auto-zoom fix: inputs must be >= 16px */
    .hig-field input,
    .hig-field textarea,
    .hig-select-wrap select {
        font-size: 1rem;
    }

    /* Download buttons stack on small screens */
    .hig-download-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* Invoice preview scroll area */
    .hig-preview-scroll {
        padding: 0.75rem;
    }

    .hig-preview-inner {
        min-width: 500px;
    }

    .invoice-container {
        padding: 1.25rem 1rem;
    }

    .invoice-biz-name {
        font-size: 1.25rem;
    }

    /* Invoice meta: 2 cols → 1 col on tiny screens */
    .invoice-meta-grid {
        grid-template-columns: 1fr;
    }

    /* Toast moves to bottom on mobile */
    .hig-toast {
        top: auto;
        bottom: 1rem;
        left: 0.75rem;
        right: 0.75rem;
        max-width: none;
        text-align: center;
        transform: translateY(calc(100% + 1rem));
    }

    .hig-toast.hig-toast-show {
        transform: translateY(0);
    }
}

/* =================================================================
   WORDPRESS THEME OVERRIDES
   Many WP themes add unwanted styles to form elements and tables.
   We use #hig-app scoping + !important to win specificity battles.
================================================================= */
#hig-app input[type="text"],
#hig-app input[type="number"],
#hig-app input[type="tel"],
#hig-app input[type="email"],
#hig-app textarea {
    background-color: var(--input) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    max-width: 100% !important;
    line-height: 1.5 !important;
}

#hig-app input[type="text"]:focus,
#hig-app input[type="number"]:focus,
#hig-app input[type="tel"]:focus,
#hig-app input[type="email"]:focus,
#hig-app textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(26,158,74,.2) !important;
    outline: none !important;
}

/* Table cells inside .hig-table (editable inputs) override */
#hig-app .hig-table td input[type="text"],
#hig-app .hig-table td input[type="number"] {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 3px !important;
}

#hig-app .hig-table td input:focus {
    background-color: rgba(26,158,74,.05) !important;
    box-shadow: 0 0 0 1.5px rgba(26,158,74,.4) inset !important;
}

/* Undo WP theme table default padding/borders on invoice tables */
#hig-app .hig-table th,
#hig-app .hig-table td,
#hig-app .invoice-table th,
#hig-app .invoice-table td {
    vertical-align: middle;
}

/* WP themes sometimes add line-height or font rules to * or body */
#hig-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif !important;
}

/* ── AI Price Notice Banner ── */
#hig-app .hig-ai-notice {
    display: none;
    margin-top: .75rem;
    padding: .6rem 1rem;
    background: #fff5f5;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    color: #b91c1c;
    font-size: .82rem;
    line-height: 1.5;
}

/* ── AI-suggested price input ── */
#hig-app .hig-table td input[data-f="price"][style*="border-bottom"] {
    border-bottom: 2px solid #ef4444 !important;
    background: #fff5f5 !important;
    border-radius: 3px 3px 0 0 !important;
}


/* AI Price Notice */
#hig-app .hig-ai-notice {
    display: none;
    margin-top: .75rem;
    padding: .65rem 1rem;
    background: #fff5f5;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    color: #b91c1c;
    font-size: .82rem;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════
   CURRENCY — native select (no search, no dropdown JS)
   Uses existing .hig-select-wrap + select styles above
═══════════════════════════════════════════ */
/* All currency select styles already covered by .hig-select-wrap above */

/* ═══════════════════════════════════════════
   GST CARD FIELDS
═══════════════════════════════════════════ */
#hig-gstCard .hig-field label { display:flex; align-items:center; font-weight:500; cursor:pointer; }

/* ═══════════════════════════════════════════
   TABLE TFOOT — subtotal / GST / grand
═══════════════════════════════════════════ */
.hig-tfoot-label { text-align:right; padding:.5rem .75rem; font-size:.875rem; color:var(--hig-muted); }
#hig-gstRow .hig-tfoot-label,
#hig-gstRow .hig-tfoot-total { color:var(--hig-primary); }
.hig-tfoot-total { padding:.5rem .75rem; font-size:.9rem; font-weight:600; white-space:nowrap; }
#hig-grandTotal { font-size:1rem; }

/* ═══════════════════════════════════════════
   INVOICE PREVIEW — tfoot
═══════════════════════════════════════════ */
.inv-tfoot-lbl  { text-align:right; padding:.5rem .75rem; font-size:.82rem; color:#666; }
.inv-tfoot-val  { padding:.5rem .75rem; font-size:.85rem; font-weight:600; }
.inv-grand-lbl  { font-weight:700; color:#111; font-size:.9rem; }
.inv-grand-val  { font-weight:700; font-size:1rem; color:hsl(145,79%,38%); }
#inv-gstRow .inv-tfoot-lbl,
#inv-gstRow .inv-tfoot-val { color:hsl(145,79%,32%); }

/* Currency panel */
/* Discount rows */
.hig-discount-lbl{color:#ef4444 !important;}
.hig-discount-val{color:#ef4444 !important;}
.inv-discount-lbl{color:#ef4444 !important;}
.inv-discount-val{color:#ef4444 !important;}