@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body { background-color: #f3f4f6; font-family: 'Inter', sans-serif; color: #111827; margin: 0; padding: 0; overflow-x: hidden; }

/* ========================================================
   Main Layout & Invoice Paper Look
   ======================================================== */
.app-container { display: flex; max-width: 1100px; margin: 30px auto; gap: 25px; padding: 0 15px; box-sizing: border-box; align-items: flex-start; padding-bottom: 80px; transition: opacity 0.5s ease; opacity: 1; }
.invoice-main-wrapper { flex: 1; min-width: 0; }
.invoice-paper { background: #fff; padding: 45px; border-radius: 4px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 15px 0 -10px #f9fafb, 0 15px 3px -10px rgba(0,0,0,0.05); box-sizing: border-box; }

/* 🌟 EDITABLE LABELS (New Feature) */
.editable-label { border: 1px dashed transparent; background: transparent; font-family: inherit; color: inherit; font-weight: inherit; font-size: inherit; padding: 4px 6px; margin: -4px -6px; border-radius: 4px; transition: 0.2s; width: calc(100% + 12px); box-sizing: border-box; outline: none; cursor: pointer; text-align: inherit; }
.editable-label:hover, .editable-label:focus { border-color: #cbd5e1; background: #f8fafc; cursor: text; }

/* Global Inputs */
.input-bordered { border: 1px solid #d1d5db; border-radius: 4px; padding: 10px 12px; font-family: inherit; font-size: 14px; width: 100%; box-sizing: border-box; background: #fff; transition: 0.2s; color: #111827; outline: none; }
.input-bordered:focus { border-color: #9ca3af; box-shadow: 0 0 0 2px rgba(209, 213, 219, 0.5); }
.auto-expand { resize: none; overflow: hidden; line-height: 1.5; }
.text-right { text-align: right; }
.w-100 { width: 100%; }
.section-label { display: block; font-weight: 600; font-size: 14px; color: #374151; margin-bottom: 6px; }

/* Top Row */
.inv-top-row { display: flex; justify-content: space-between; margin-bottom: 30px; gap: 20px; }
.inv-top-left { width: 100%; max-width: 350px; }
.logo-box { display: flex; align-items: center; justify-content: center; width: 150px; height: 120px; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; margin-bottom: 15px; color: #6b7280; font-weight: 500; font-size: 15px; background-size: contain; background-repeat: no-repeat; background-position: center; transition: 0.3s; }
.logo-box:hover { background: #f3f4f6; }
.inv-top-right { width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: flex-end; }
.invoice-title-input { font-size: 42px; font-weight: 700; text-align: right; border: 1px solid transparent; width: 100%; padding: 0; margin-bottom: 10px; color: #111827; outline: none; background: transparent; letter-spacing: -0.5px; }
.invoice-title-input:hover, .invoice-title-input:focus { border-color: #d1d5db; background: #fff; padding: 5px; border-radius: 4px; }
.inv-num-box { display: flex; align-items: center; justify-content: flex-end; width: 160px; background: #fff; border: 1px solid #d1d5db; border-radius: 4px; padding-left: 10px; }
.hash-symbol { color: #6b7280; font-weight: 500; }
.inv-num-box input { border: none; outline: none; border-radius: 0 4px 4px 0; }
.inv-num-box input:focus { box-shadow: none; }

/* Middle Row */
.inv-mid-row { display: flex; justify-content: space-between; margin-bottom: 40px; gap: 30px; }
.inv-mid-left { display: flex; gap: 20px; flex: 1; }
.bill-box { flex: 1; }
.inv-mid-right { display: flex; flex-direction: column; gap: 10px; width: 300px; }
.meta-field { display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
.meta-field .section-label { margin: 0; width: 120px; text-align: right; }
.meta-field input.input-bordered { width: 150px; }

/* Items Table */
.items-area { margin-bottom: 30px; }
.items-header { display: flex; background: #111827; color: #fff; padding: 12px 15px; border-radius: 4px 4px 0 0; font-weight: 600; font-size: 14px; align-items: center; }
.items-header .editable-label { color: #fff; }
.items-header .editable-label:hover, .items-header .editable-label:focus { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); }

.col-desc { flex: 5; min-width: 150px; }
.col-qty { flex: 1; text-align: center; }
.col-rate { flex: 2; text-align: right; }
.col-amt { flex: 2; text-align: right; display: flex; align-items: center; justify-content: flex-end; }
.col-act { width: 25px; text-align: right; }
.item-row { display: flex; padding: 10px 0; align-items: flex-start; gap: 10px; border-bottom: 1px solid transparent; }
.input-with-icon { position: relative; display: flex; align-items: center; width: 100%; }
.input-with-icon .dyn-curr-sym { position: absolute; left: 12px; color: #6b7280; font-size: 14px; }
.input-with-icon input { padding-left: 25px; }
.btn-add-line { background: #fff; border: 1px solid #10b981; color: #10b981; font-weight: 600; padding: 8px 15px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; font-size: 14px; margin-top: 10px; }
.btn-add-line:hover { background: #ecfdf5; }
.remove-btn { background: none; border: none; color: #ef4444; font-size: 20px; cursor: pointer; padding: 5px; }

/* Footer Area (Notes & Totals) */
.inv-footer-row { display: flex; justify-content: space-between; gap: 40px; }
.inv-footer-left { flex: 1; max-width: 400px; }
.inv-footer-right { width: 320px; display: flex; flex-direction: column; gap: 12px; }
.total-line { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.t-label { color: #374151; font-weight: 500; width: 130px; }
.t-bold { font-weight: 700; color: #111827; font-size: 16px; }

/* Custom Addon Input (Tax/Discount) */
.addon-input-group { display: flex; border: 1px solid #d1d5db; border-radius: 4px; overflow: hidden; width: 130px; background: #fff; }
.addon-input-group input { border: none; width: 100%; padding: 8px; text-align: right; outline: none; }
.addon-input-group .addon { background: #f9fafb; border-left: 1px solid #d1d5db; padding: 8px 12px; color: #6b7280; font-size: 14px; }
.addon-input-group .addon-btn { background: #f9fafb; border: none; border-left: 1px solid #d1d5db; cursor: pointer; padding: 0 12px; color: #6b7280; transition: 0.2s; }
.addon-input-group .addon-btn:hover { background: #e5e7eb; color: #111827; }
.total-divider { border-top: 1px solid #d1d5db; padding-top: 15px; margin-top: 5px; }
.amount-paid-line { padding-bottom: 15px; border-bottom: 1px solid #d1d5db; }
.balance-line { padding-top: 5px; }

/* Sidebar */
.invoice-sidebar { width: 280px; position: sticky; top: 30px; display: flex; flex-direction: column; gap: 15px; }
.btn-sidebar { padding: 12px 15px; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; border: none; width: 100%; transition: 0.2s; }
.btn-preview { background: #374151; color: #fff; }
.btn-preview:hover { background: #111827; }
.btn-download { background: #10b981; color: #fff; }
.btn-download:hover { background: #059669; }
.btn-save { background: #fff; color: #10b981; border: 1px solid #10b981; }
.btn-save:hover { background: #ecfdf5; }
.sidebar-block { background: #fff; padding: 20px; border-radius: 4px; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.sidebar-label { display: block; font-size: 12px; font-weight: 700; color: #6b7280; margin-bottom: 10px; letter-spacing: 0.5px; }
.sidebar-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 10px; cursor: pointer; color: #374151; }
.sidebar-toggle input { cursor: pointer; width: 16px; height: 16px; }

/* ========================================================
   🚀 PRO SKELETON LOADING ANIMATION (Perfected)
   ======================================================== */
.app-container.skeleton-mode { opacity: 0.9; pointer-events: none; user-select: none; }
.skeleton-mode * { color: transparent !important; border-color: rgba(226, 232, 240, 0.4) !important; }
.skeleton-mode *::placeholder { color: transparent !important; }
.skeleton-mode i, .skeleton-mode svg, .skeleton-mode img, .skeleton-mode input[type="checkbox"] { opacity: 0 !important; visibility: hidden !important; }

.skeleton-mode .input-bordered, .skeleton-mode textarea, .skeleton-mode .invoice-title-input, .skeleton-mode .logo-box, .skeleton-mode .btn-sidebar, .skeleton-mode .sidebar-block, .skeleton-mode .btn-add-line, .skeleton-mode .addon-input-group, .skeleton-mode .total-line span, .skeleton-mode .section-label, .skeleton-mode .items-header, .skeleton-mode .login-alert, .skeleton-mode .inv-num-box, .skeleton-mode .editable-label {
    position: relative !important; overflow: hidden !important; background-color: #e2e8f0 !important; background-image: none !important; box-shadow: none !important; border: none !important; border-radius: 6px !important;
}

.skeleton-mode .input-bordered::after, .skeleton-mode textarea::after, .skeleton-mode .invoice-title-input::after, .skeleton-mode .logo-box::after, .skeleton-mode .btn-sidebar::after, .skeleton-mode .sidebar-block::after, .skeleton-mode .addon-input-group::after, .skeleton-mode .items-header::after, .skeleton-mode .login-alert::after, .skeleton-mode .inv-num-box::after, .skeleton-mode .editable-label::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%); animation: shimmer-effect 1.5s infinite ease-in-out; z-index: 10;
}
@keyframes shimmer-effect { 100% { transform: translateX(100%); } }

/* ========================================================
   MOBILE RESPONSIVE
   ======================================================== */
@media screen and (max-width: 950px) {
    .app-container { flex-direction: column; padding: 10px; padding-bottom: 80px; }
    .invoice-paper { padding: 20px; }
    .invoice-sidebar { width: 100%; position: relative; top: 0; }
    .inv-top-row, .inv-mid-row { flex-direction: column; gap: 20px; }
    .inv-top-left, .inv-top-right, .inv-mid-left, .inv-mid-right { width: 100%; max-width: 100%; align-items: flex-start; }
    .inv-top-right { margin-top: 10px; }
    .invoice-title-input { text-align: left; padding: 0; font-size: 32px; }
    .inv-num-box { justify-content: flex-start; width: 100%; }
    .inv-mid-left { flex-direction: column; }
    .meta-field { justify-content: space-between; width: 100%; }
    .meta-field .section-label { text-align: left; width: 100px; }
    .meta-field input.input-bordered { width: calc(100% - 110px); }
    .items-header { display: none; }
    .item-row { flex-direction: column; padding: 15px; border: 1px solid #d1d5db; border-radius: 6px; margin-bottom: 15px; background: #fafafa; position: relative; }
    .col-desc, .col-qty, .col-rate, .col-amt { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .col-desc { flex-direction: column; align-items: flex-start; }
    .col-qty input, .input-with-icon { width: 140px; }
    .col-act { position: absolute; top: 5px; right: 5px; }
    .inv-footer-row { flex-direction: column; gap: 30px; }
    .inv-footer-right { width: 100%; }
}