/* 請求書作成システム 共通スタイル */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica', 'Arial', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
    line-height: 1.6;
}

/* Global fallback styles
     - Component-specific CSS has been migrated into each Web Component's Shadow DOM.
     - Keep only page-level layout, accessibility and fallback utility classes here.
*/

* {
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica', 'Arial', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
    line-height: 1.6;
    color: #222;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Simple utility to hide tabs/sections (used by main.js show/hide logic) */
.hidden { display: none !important; }

/* Button utilities (kept for legacy DOM fallback) */
.btn {
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.btn-primary { background:#007bff; color:#fff }
.btn-secondary { background:#6c757d; color:#fff }
.btn-success { background:#28a745; color:#fff }
.btn-danger { background:#dc3545; color:#fff }

/* Small responsive helpers */
@media (max-width: 900px) {
    body { padding: 12px; }
}

/* Print helpers */
@media print {
    body { background: #fff; padding: 0; }
    .hidden { display: none !important; }
}

/* End of global / fallback styles
     Component-specific presentation styles (invoice-preview, items-table,
     payment/total tables, tabs, fixed-buttons etc.) are intentionally moved
     into each component's Shadow DOM for encapsulation. Keep only minimal
     fallbacks below for legacy/DOM-mode.
*/

/* Minimal invoice container fallback for non-component usage */
.invoice-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    padding: 12mm;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* small responsive adjustments for fallback layout */
@media (max-width: 768px) {
    .tab-buttons { flex-direction: column; }
    .fixed-buttons { position: static; margin-top: 20px; text-align: center; }
}

/* Keep a compact print fallback to ensure page-level behavior when components
     are not present; component-level print rules live inside their Shadow DOM. */
@media print {
    /* page setup */
    @page { size: A4; margin: 1rem !important; }

    /* ensure white background and minimal padding when printing */
    body { background: white !important; padding: 5mm !important; margin: 0 !important; }

    /* hide UI chrome so only invoice content prints */
    .tab-container,
    .form-section,
    .items-section,
    .fixed-buttons,
    .preview-buttons,
    .btn {
        display: none !important;
    }

    /* make invoice container fill printable area (component-level rules still apply) */
    .invoice-container {
        box-shadow: none !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    /* keep simple helpers; detailed print layout is handled in component CSS */
    .hidden { display: none !important; }

    /* avoid page-breaks inside totals/payment sections if present in light DOM */
    .total-section { page-break-inside: avoid !important; }
    .payment-info { page-break-inside: avoid !important; }
}