/* =============================================================
   InvoiceDetail.razor — scoped styles for the canonical-pattern
   migration (Phase 3 wave A1).

   Tokens only — every colour, spacing and font reference points
   at glasstock-design-system.css custom properties.
   ============================================================= */

.invoicedetail {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-5);
}

.invoicedetail--view {
    max-width: 1280px;
}

/* Üst bölüm: fatura meta + müşteri yan yana */
.invoicedetail__overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--gs-space-4);
    align-items: stretch;
}

@media (max-width: 1024px) {
    .invoicedetail__overview {
        grid-template-columns: 1fr;
    }
}

.invoicedetail__alert {
    margin-bottom: var(--gs-space-3);
}

/* ---------- Header actions cluster (in PageShell HeaderActions slot) ---------- */
.invoicedetail .invoicedetail__header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gs-space-2);
}

.invoicedetail .invoicedetail__status-badge {
    padding: var(--gs-space-1) var(--gs-space-2);
    font-size: var(--gs-text-xs);
    line-height: 1.2;
}

/* ---------- Info cards row ---------- */
.invoicedetail__info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gs-space-3);
}

.invoicedetail__info-card {
    display: flex;
    align-items: center;
    gap: var(--gs-space-3);
    padding: var(--gs-space-3) var(--gs-space-4);
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-md, 8px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--gs-text) 6%, transparent);
}

.invoicedetail__info-card-icon {
    color: var(--gs-primary);
    flex-shrink: 0;
}

.invoicedetail__info-card-icon--danger {
    color: var(--gs-danger);
}

.invoicedetail__info-card-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.invoicedetail__info-card-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--gs-text-xs);
    color: var(--gs-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.invoicedetail__info-card-value {
    font-family: "Space Grotesk", sans-serif;
    font-size: var(--gs-text-base);
    font-weight: 700;
    color: var(--gs-text);
    word-break: break-word;
}

/* ---------- Customer card ---------- */
.invoicedetail__customer-card {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-md, 8px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--gs-text) 6%, transparent);
    height: 100%;
}

.invoicedetail__customer-header {
    display: flex;
    align-items: center;
    gap: var(--gs-space-2);
    padding: var(--gs-space-3) var(--gs-space-4);
    border-bottom: 1px solid var(--gs-border);
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--gs-text-xs);
    font-weight: 700;
    color: var(--gs-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.invoicedetail__customer-body {
    padding: var(--gs-space-3) var(--gs-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-1);
}

.invoicedetail__customer-name {
    font-family: "Space Grotesk", sans-serif;
    font-size: var(--gs-text-lg);
    font-weight: 700;
    color: var(--gs-text);
    margin-bottom: var(--gs-space-1);
}

.invoicedetail__customer-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gs-space-4);
    font-size: var(--gs-text-sm);
    color: var(--gs-text-muted);
}

.invoicedetail__customer-address,
.invoicedetail__customer-phone {
    font-size: var(--gs-text-sm);
    color: var(--gs-text-muted);
}

/* ---------- Section header (over items table / create card) ---------- */
.invoicedetail__items-section {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-3);
}

.invoicedetail__section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gs-space-3);
    padding: var(--gs-space-3) var(--gs-space-4);
    background: color-mix(in srgb, var(--gs-primary) 8%, var(--gs-surface));
    border: 1px solid var(--gs-border);
    border-bottom: none;
    border-radius: var(--gs-radius-md, 8px) var(--gs-radius-md, 8px) 0 0;
}

.invoicedetail__items-section .gs-responsive-table {
    border: 1px solid var(--gs-border);
    border-top: none;
    border-radius: 0 0 var(--gs-radius-md, 8px) var(--gs-radius-md, 8px);
    overflow: hidden;
    background: var(--gs-surface);
}

.invoicedetail__section-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: var(--gs-text-base);
    font-weight: 700;
    color: var(--gs-text);
    margin: 0;
}

/* ---------- Items table cell helpers ---------- */
.invoicedetail .invoicedetail__cell-index {
    color: var(--gs-text-muted);
    font-size: var(--gs-text-sm);
}

.invoicedetail .invoicedetail__cell-name {
    font-weight: 600;
}

.invoicedetail .invoicedetail__cell-numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
    display: inline-block;
}

.invoicedetail .invoicedetail__cell-numeric--strong {
    font-weight: 700;
}

.invoicedetail .invoicedetail__cell-numeric--muted {
    color: var(--gs-text-muted);
}

.invoicedetail .invoicedetail__cell-stock {
    text-align: center;
}

.invoicedetail .invoicedetail__product-code {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--gs-text-xs);
    font-weight: 700;
    color: var(--gs-primary);
    background: var(--gs-primary-bg, rgba(255, 208, 0, 0.1));
    padding: 2px var(--gs-space-2);
    letter-spacing: 0.5px;
}

.invoicedetail .invoicedetail__stock-badge {
    display: inline-block;
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--gs-text-xs);
    font-weight: 700;
    padding: 2px var(--gs-space-2);
    border-radius: 4px;
    min-width: 40px;
    text-align: center;
}

.invoicedetail .invoicedetail__stock-badge--ok {
    background: var(--gs-success-bg, rgba(34, 197, 94, 0.15));
    color: var(--gs-success, #22c55e);
}

.invoicedetail .invoicedetail__stock-badge--warning {
    background: var(--gs-warning-bg, rgba(245, 158, 11, 0.15));
    color: var(--gs-warning, #f59e0b);
}

.invoicedetail .invoicedetail__stock-badge--danger {
    background: var(--gs-danger-bg, rgba(239, 68, 68, 0.15));
    color: var(--gs-danger, #ef4444);
}

.invoicedetail .invoicedetail__stock-badge--empty {
    opacity: 0.3;
}

/* ---------- Items table mobile card (inside ResponsiveTable) ---------- */
.invoicedetail .invoicedetail__mc {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-2);
}

.invoicedetail .invoicedetail__mc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gs-space-2);
    padding-bottom: var(--gs-space-2);
    border-bottom: 1px solid var(--gs-border);
}

.invoicedetail .invoicedetail__mc-body {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-2);
}

.invoicedetail .invoicedetail__mc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gs-space-3);
    font-size: var(--gs-text-sm);
}

.invoicedetail .invoicedetail__mc-row--total {
    border-top: 1px solid var(--gs-border);
    padding-top: var(--gs-space-2);
    margin-top: var(--gs-space-1);
}

.invoicedetail .invoicedetail__mc-label {
    color: var(--gs-text-muted);
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--gs-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- Totals (vat summary + grand total) ---------- */
.invoicedetail__totals {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gs-space-6);
    flex-wrap: wrap;
}

.invoicedetail__vat-summary {
    flex: 1 1 320px;
    min-width: 0;
}

.invoicedetail__vat-summary-title {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--gs-text-xs);
    color: var(--gs-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 var(--gs-space-2);
}

.invoicedetail__vat-table {
    font-size: var(--gs-text-sm);
}

.invoicedetail__grand-total {
    width: 340px;
    max-width: 100%;
    background: color-mix(in srgb, var(--gs-primary) 6%, var(--gs-surface));
    border: 1px solid color-mix(in srgb, var(--gs-primary) 35%, var(--gs-border));
    border-radius: var(--gs-radius-md, 8px);
    padding: var(--gs-space-4);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--gs-primary) 12%, transparent);
}

.invoicedetail__total-row {
    display: flex;
    justify-content: space-between;
    gap: var(--gs-space-3);
    padding: var(--gs-space-1) 0;
    font-size: var(--gs-text-sm);
}

.invoicedetail__total-row--discount {
    color: var(--gs-danger);
}

.invoicedetail__total-row--grand {
    border-top: 2px solid var(--gs-primary);
    margin-top: var(--gs-space-2);
    padding-top: var(--gs-space-2);
    font-size: var(--gs-text-lg);
    font-weight: 700;
    color: var(--gs-primary);
}

/* ---------- Footer meta (not + sipariş) ---------- */
.invoicedetail__footer-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--gs-space-3);
    padding: var(--gs-space-4);
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-md, 8px);
}

.invoicedetail__footer-meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-1);
    margin: 0;
}

.invoicedetail__footer-meta-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--gs-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gs-text-muted);
}

.invoicedetail__footer-meta-value {
    font-size: var(--gs-text-sm);
    color: var(--gs-text);
    line-height: 1.5;
}

/* PageShell header actions */
.gs-page-shell .invoicedetail__header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gs-space-2);
    justify-content: flex-end;
}

/* ---------- Confirm dialog details ---------- */
.invoicedetail .invoicedetail__confirm-detail {
    display: flex;
    justify-content: space-between;
    gap: var(--gs-space-3);
    margin-bottom: 4px;
    font-size: var(--gs-text-sm);
}

.invoicedetail .invoicedetail__confirm-detail--total {
    margin-top: var(--gs-space-2);
    color: var(--gs-primary);
    font-weight: 700;
    font-size: var(--gs-text-base);
}

.invoicedetail .invoicedetail__confirm-warning {
    margin-top: var(--gs-space-2);
    padding: var(--gs-space-2);
    background: var(--gs-danger-bg, rgba(239, 68, 68, 0.15));
    border-radius: 6px;
}

.invoicedetail .invoicedetail__confirm-warning strong {
    color: var(--gs-danger);
}

.invoicedetail .invoicedetail__confirm-warning-line {
    font-size: var(--gs-text-xs);
    color: var(--gs-danger);
}

/* ---------- CREATE mode: form + editable items + footer ---------- */
.invoicedetail__create-section {
    padding: var(--gs-space-4);
}

.invoicedetail__create-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gs-space-3);
    margin-bottom: var(--gs-space-4);
}

/* Stock-warning text shown inline under the product cell when stock < quantity. */
.invoicedetail .invoicedetail__stock-warning-text {
    display: block;
    margin-top: var(--gs-space-1);
    font-size: var(--gs-text-xs);
    color: var(--gs-warning);
    font-weight: 600;
}

/* Mobile-card field label inside the create-mode ResponsiveTable cards. */
.invoicedetail .invoicedetail__mc-field-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--gs-text-xs);
    color: var(--gs-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.invoicedetail .invoicedetail__create-mc {
    padding: var(--gs-space-3);
}

.invoicedetail .invoicedetail__create-mc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gs-space-2);
    margin-bottom: var(--gs-space-2);
    padding-bottom: var(--gs-space-2);
    border-bottom: 1px solid var(--gs-border);
}

.invoicedetail .invoicedetail__create-mc-body {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-2);
}

.invoicedetail__create-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: var(--gs-space-3) 0;
    flex-wrap: wrap;
    gap: var(--gs-space-3);
}

.invoicedetail__create-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gs-space-2);
    padding-top: var(--gs-space-3);
}

/* ---------- Mobile overrides ----------
   Desktop/mobile switching for the items grid is now handled by the
   ResponsiveTable component (SwitchAtPx="1024"). Only layout flips remain. */
@media (max-width: 1024px) {
    .invoicedetail__totals {
        flex-direction: column;
    }

    .invoicedetail__grand-total {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .invoicedetail__create-form {
        grid-template-columns: 1fr;
    }

    .invoicedetail__customer-details {
        gap: var(--gs-space-2);
        flex-direction: column;
    }
}

/* =============================================================
   PRINT — wave 6
   Builds on top of the global @media print block in
   glasstock-design-system.css (which resets colors, hides chrome
   and sets A4 page geometry). This scoped block tightens the
   invoice-specific layout: single-column flow, two-column meta
   grid, totals stuck to items, and a clean signature footer.
   ============================================================= */

/* Brand stripe + document title — visible only when printing.
   Shown via the global .gs-print-only utility (display: none on
   screen, display: block when @media print). */
.invoicedetail__print-header {
    display: none;
}

.invoicedetail__print-footer {
    display: none;
}

@media print {
    /* ---- Hide every interactive / chrome-y bit not needed on paper ---- */
    .invoicedetail .invoicedetail__header-actions,
    .invoicedetail .gs-page-shell__actions,
    .invoicedetail .invoicedetail__status-badge,
    .invoicedetail__create-actions,
    .invoicedetail__alert {
        display: none !important;
    }

    /* ---- Show the print-only header / footer blocks ---- */
    .invoicedetail__print-header {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--gs-space-3);
        padding-bottom: 8pt;
        margin-bottom: 12pt;
        border-bottom: 2pt solid #000000;
        page-break-after: avoid;
    }

    .invoicedetail__print-footer {
        display: block !important;
        margin-top: 18pt;
        padding-top: 10pt;
        border-top: 1pt solid #cccccc;
        font-size: 9pt;
        color: #555555;
    }

    .invoicedetail__print-brand {
        font-family: "Space Grotesk", sans-serif;
        font-size: 16pt;
        font-weight: 800;
        letter-spacing: 1pt;
        color: #000000;
    }

    .invoicedetail__print-brand small {
        display: block;
        font-family: "IBM Plex Mono", monospace;
        font-size: 8pt;
        font-weight: 600;
        letter-spacing: 1.5pt;
        color: #555555;
        margin-top: 2pt;
    }

    .invoicedetail__print-doc {
        font-family: "IBM Plex Mono", monospace;
        font-size: 11pt;
        font-weight: 700;
        color: #000000;
        text-align: right;
    }

    .invoicedetail__print-signature-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24pt;
        margin-top: 14pt;
    }

    .invoicedetail__print-signature-cell {
        border-top: 1pt solid #555555;
        padding-top: 4pt;
        text-align: center;
        font-family: "IBM Plex Mono", monospace;
        font-size: 9pt;
        color: #555555;
    }

    /* ---- Layout flips: single column, no sticky surfaces ---- */
    .invoicedetail {
        gap: 10pt !important;
    }

    /* Info cards: 2 per row instead of 220px-min auto-fit */
    .invoicedetail__info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6pt !important;
    }

    .invoicedetail__info-card {
        padding: 6pt 10pt !important;
        border: 1pt solid #cccccc !important;
        background: #ffffff !important;
    }

    .invoicedetail__info-card-icon {
        display: none !important;
    }

    .invoicedetail__info-card-label {
        font-size: 8pt !important;
        color: #555555 !important;
    }

    .invoicedetail__info-card-value {
        font-size: 11pt !important;
        color: #000000 !important;
    }

    /* Customer card: bordered, kept together */
    .invoicedetail__customer-card {
        border: 1pt solid #000000 !important;
        page-break-inside: avoid;
    }

    .invoicedetail__customer-header {
        background: #f4f4f4 !important;
        border-bottom: 1pt solid #cccccc !important;
        color: #000000 !important;
    }

    .invoicedetail__customer-name {
        font-size: 13pt !important;
        color: #000000 !important;
    }

    .invoicedetail__customer-details span,
    .invoicedetail__customer-address,
    .invoicedetail__customer-phone {
        color: #000000 !important;
    }

    /* Items section: keep header attached to the table */
    .invoicedetail__items-section {
        gap: 0 !important;
    }

    .invoicedetail__section-header {
        background: #f4f4f4 !important;
        border: 1pt solid #000000 !important;
        border-bottom: none !important;
        padding: 6pt 10pt !important;
    }

    /* Stock badges + product code: keep colors readable but subtle */
    .invoicedetail .invoicedetail__stock-badge {
        background: transparent !important;
        color: #000000 !important;
        border: 1pt solid #cccccc;
    }

    .invoicedetail .invoicedetail__product-code {
        background: transparent !important;
        color: #000000 !important;
        font-weight: 700;
    }

    /* Totals section: VAT summary + grand total stay together */
    .invoicedetail__totals {
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 12pt !important;
        page-break-inside: avoid;
    }

    .invoicedetail__vat-summary {
        flex: 1 1 auto !important;
    }

    .invoicedetail__grand-total {
        width: 240pt !important;
        border: 1.5pt solid #000000 !important;
        background: #ffffff !important;
        padding: 8pt 10pt !important;
    }

    .invoicedetail__total-row {
        font-size: 10pt !important;
        padding: 2pt 0 !important;
    }

    .invoicedetail__total-row--grand {
        border-top: 1.5pt solid #000000 !important;
        margin-top: 4pt !important;
        padding-top: 4pt !important;
        font-size: 12pt !important;
        color: #000000 !important;
    }

    /* Notes: italic so they read as auxiliary commentary */
    .invoicedetail__notes {
        font-style: italic;
        background: transparent !important;
        border: 1pt solid #cccccc !important;
        color: #000000 !important;
        padding: 6pt 10pt !important;
        page-break-inside: avoid;
    }
}