/* Runs to the bottom edge rather than stopping at 2.6rem: that reserved gap had nothing in it but
   .page's #eef0f3, which read as a grey strip under the cards with Save/Cancel floating on it. The
   content now fills the space and .welcome-footer-invoice sits over it, so there is no band. The
   padding is the same 2.6rem given back as scroll room, so the last row still clears the buttons. */
.invoice-container {
    position: fixed;
    top: 2.6rem;
    right: 0;
    left: 0;
    bottom: 0;
    padding-bottom: 3.4rem;
    overflow-x: auto;
    background-color: transparent;
}

.invoice-mode {
    position: absolute;
    width: 250px;
    height: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #007BFF;
    border-radius: 4px;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.invoice-mode button {
    border: none;
    background: transparent;
    font-size: 12px;
    cursor: pointer;
    color: #007BFF;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* divider between tabs */
.invoice-mode button + button {
    border-left: 1px solid #007BFF;
}

/* active tab */
.invoice-mode button.active {
    background-color: #007BFF;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

/* hover */
.invoice-mode button:not(.active):hover {
    background-color: rgba(0, 120, 212, 0.01);
}

/*============================ Invoice Header =================================*/

.invoice-form-item {
    position: relative;
    display: flex;
    flex-direction: column;
}

.invoice-form-item select,
.invoice-form-item input {
    display: block;
    width: 100%;
    height: 30px;
    padding: 0px 12px;
    font-size: 12px;
    border: 1px solid #c8c6c4;
    border-radius: 4px;
    background-color: #ffffff;
    transition: border 0.2s, box-shadow 0.2s;
    font-weight: bold;
    color: #323130;
}

.invoice-form-item label {
    position: absolute;
    top: 12px;
    left: 15px;
    font-size: 10px;
    font-weight: bold;
    color: #605e5c;
    background: #fff;
    padding: 0 3px;
    pointer-events: none;
    transition: all 0.2s ease;
}

.invoice-form-item select:hover,
.invoice-form-item input:hover,
.invoice-form-item textarea:hover {
    border-color: #808080;
}

.invoice-form-item select:focus,
.invoice-form-item input:focus,
.invoice-form-item textarea:focus {
    outline: none;
    border-color: #0078d4;
    background: #fff;
}

.invoice-form-item:focus-within label {
    color: #0078d4;
}

.invoice-form-item select:focus + label,
.invoice-form-item select:not([value=""]) + label,
.invoice-form-item input:focus + label,
.invoice-form-item input:not([value=""]) + label,
.invoice-form-item textarea:focus + label,
.invoice-form-item textarea:not([value=""]) + label  {
    top: -8px;
    left: 10px;
    font-size: 10px;
}

.invoice-form-item input:disabled,
.invoice-form-item textarea:disabled{
    cursor: not-allowed;
    opacity: 0.5;
}

.invoice-form-item input:disabled + label,
.invoice-form-item textarea:disabled + label {
    color: rgba(0, 0, 0, 0.4);
    background-color: #fff;
    opacity: 1;
    top: -8px;
    left: 10px;
    font-size: 10px;
}

.form-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.form-input-none {
    cursor: not-allowed;
    opacity: 0.5;
}

.invoice-detail-header {
    color: #007BFF;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 14px;
}

.transaction-detail-header {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(0,0,0,0.25);
    padding: 15px;
}

.transaction-detail-header-subcolumn1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 10px;
    row-gap: 15px;
}

.transaction-type-detail-header {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(0,0,0,0.25);
    padding: 15px;
}

.transaction-type-detail-header-subcolumn1 {
    display: flex;
    flex-direction: column;
}

.transaction-type-detail-header-subcolumn1-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 15px;
}

.add-btn {
    color: #2563eb;
    border: none;
    font-weight: bold;
    font-size: 12px;
}

.add-btn-icon {
    fill: #2563eb;
    width: 20px;
    height: 20px;
}

.transportation-detail-header {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(0,0,0,0.25);
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.transportation-detail-header-subcolumn1 {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}

.transportation-detail-header-subcolumn2 {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    gap: 10px;
}

.transportation-detail-header-subcolumn1-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 15px;
}

.product-detail-header {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 0 0 12px rgba(0,0,0,0.25);
    background: #ffffff;
    border-radius: 4px;
    padding: 15px;
}

/*==================================== Table ====================================*/

.add-product-btn {
    position: absolute;
    background-color: #007BFF;
    color: white;
    font-weight: bold;
    font-size: 12px;
    width: 150px;
    height: 30px;
    border-radius: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.add-product-btn-icon {
    fill: white;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.table-container {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 4px;
    border: 1px solid #c8c6c4;
    background: #ffffff;
    width: 100%;
}

.modern-table {
    min-width: 1500px;
    width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
}

.modern-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #e5efff;
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #c8c6c4;
    border-right: 1px solid #c8c6c4;
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
    color: #1f2937;
    font-size: 11px;
}

.modern-table td {
    padding: 6px 8px; 
    border-bottom: 1px solid #c8c6c4;
    border-right: 1px solid #c8c6c4;
    vertical-align: top;
    white-space: nowrap; 
    word-break: break-word;
    font-size: 12px;
    font-weight: bold;
    color: #605e5c;
    white-space: wrap;
}

/* Sticky header + sticky columns (intersection cells) */
.modern-table thead th:nth-child(1),
.modern-table thead th:nth-child(2),
.modern-table thead th:nth-last-child(2),
.modern-table thead th:last-child {
    top: 0;
    z-index: 5; /* higher than body sticky cells */
    background: #e5efff;
}

.modern-table th:last-child,
.modern-table td:last-child {
    border-right: none;
}

.modern-table tbody tr:hover {
    background-color: #f1f5ff;
}

/* First column */
.modern-table th:nth-child(1),
.modern-table td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #ffffff;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}

/* Second column */
.modern-table th:nth-child(2),
.modern-table td:nth-child(2) {
    position: sticky;
    left: 60px;
    z-index: 3;
    background: #ffffff;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
}

/* Second last column */
.modern-table th:nth-last-child(2),
.modern-table td:nth-last-child(2) {
    position: sticky;
    right: 90px;
    z-index: 3;
    background: #ffffff;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

/* Last column */
.modern-table th:last-child,
.modern-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #ffffff;
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}

/* Fixed column shadow (optional, looks modern) */
.modern-table th:nth-child(2),
.modern-table td:nth-child(2) {
    box-shadow: 2px 0 5px rgba(0,0,0,0.25);
}

.modern-table th:nth-last-child(2),
.modern-table td:nth-last-child(2) {
    box-shadow: -2px 0 5px rgba(0,0,0,0.25);
}

.hide-col {
    display: none;
}

.edit-icon,
.delete-icon {
    width: 18px;
    height: 18px;
    fill: #6b7280;
    cursor: pointer;
    margin: 0 4px;
}

.edit-icon:hover {
    fill: #2563eb;
}

.delete-icon:hover {
    fill: #dc2626;
}

/*==================== Bill To / Ship To / Bill From / Dispatch From =====================*/

.d-none {
    display: none !important;
}

.container {
    max-width: 540px;
}

/* Panel */
.panel {
    background: #fff;
    border-radius: 4px;
    margin-top: 12px;
    box-shadow: 0 0 12px rgba(0,0,0,0.25);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
}

.panel.open {
    max-height: 450px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 16px;
    background: #fafafa;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}

.panel-header label{
    font-weight: bold;
    font-size: 14px;
}

.edit-btn {
    color: #2563eb;
    border: none;
    font-size: 14px;
}

.edit-btn-icon {
    fill: #2563eb;
    width: 18px;
    height: 18px;
}

/* Detail layout */
.panel-body {
    padding: 15px;
}

.detail-grid {
    display: grid;
    grid-template-columns: auto 30px 1fr;
    row-gap: 5px;
    font-size: 12px;
}

.detail-label {
    color: #605e5c;
    font-weight: bold;
}

.detail-colon {
    text-align: center;
    color: #605e5c;
    font-weight: bold;
}

.detail-value {
    color: #323130;
    font-weight: bold;
    white-space: pre-line;
}

/* Fixed, not absolute: nothing in the ancestor chain is positioned, so absolute resolved bottom:10px
   against the initial containing block — anchored at the document origin and only as tall as the
   layout viewport. On a phone, .page's min-height:100dvh plus the browser's own chrome makes the
   document taller than what is actually on screen, so that 10px landed below the visible area and
   the bar stopped looking pinned. Fixed measures from the viewport itself, at any width. */
.welcome-footer-invoice {
    width: 500px;
    position: fixed;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    z-index: 10;
    background-color: white;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0,0,0,0.25);
}

.welcome-footer-invoice button{
    font-weight: bold;
}

/*=============================== Amount Details ===================================*/


.invoice-form-item textarea {
    resize: none;
    display: block;
    width: 100%;
    height: 110px;
    padding: 12px;
    font-size: 12px;
    border: 1px solid #c8c6c4;
    border-radius: 4px;
    background-color: #ffffff;
    transition: border 0.2s, box-shadow 0.2s;
    font-weight: bold;
    color: #323130;
}

.invoice-amount-detail-header {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(0,0,0,0.25);
    padding: 15px;
}

.other-and-tax-amount-container,
.remark-and-grand-total-container {
    display: grid;
    grid-template-rows: 1fr 1fr;
}

.other-details-container {
    display: grid;
    grid-template-rows: 1fr;
    gap: 10px;
}

.tax-detail-grid,
.grand-total-detail-grid {
    display: grid;
    grid-template-columns: max-content 30px 10px max-content;
    row-gap: 5px;
    font-size: 12px;
}

.detail-currency {
    color: #323130;
    font-weight: bold;
}

.tax-detail-grid .detail-value,
.grand-total-detail-grid .detail-value {
    text-align: right;
}

.panel-row {
    display: grid;
    grid-template-columns: 1fr auto 0.75fr 1fr;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.col-name {
    font-size: 13px;
    font-weight: bold;
    color: #605e5c;
    display: flex;
    align-content: center;
}

.panel-row input,
.form-input {
    display: block;
    width: 100%;
    height: 30px;
    padding: 0px 12px;
    font-size: 12px;
    border: 1px solid #c8c6c4;
    border-radius: 4px;
    background-color: #ffffff;
    transition: border 0.2s, box-shadow 0.2s;
    font-weight: bold;
    color: #323130;
}

.panel-row input:focus {
    outline: none;
    border-color: #0078d4;
}

.expense-add-icon,
.expense-minus-icon {
    width: 20px;
    height: 20px;
    fill: #605e5c;
}

.invoice-header-fields-detail-header {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(0,0,0,0.25);
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.invoice-header-fields-detail-header-subcolumn1 {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}

.sbdropdown-item {
    position: relative;
}

.sbdropdown-item label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #605e5c;
    background: white;
    padding: 0 3px;
    pointer-events: none;
    transition: all 0.2s ease;
    top: 0px;
    font-size: 10px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*================================ Tablet / mobile =====================================*/
/* Create Sale Invoice and Edit Sale Invoice render the same markup and the same class names, so
   everything below applies to both pages.

   The page is built from fixed multi-column grids — five transaction fields across, three party
   panels, four transport fields — which is right on a desktop and unreadable on a phone. They fold
   down in two steps: to two or three columns on a tablet, then to a single column. The breakpoints
   match the 700px the rest of the app already uses (app.css, SidebarLayout.razor.css). */

@media (max-width: 900px) {
    .transaction-detail-header-subcolumn1 {
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 15px;
    }

    .transaction-type-detail-header,
    .invoice-amount-detail-header {
        grid-template-columns: 1fr 1fr;
    }

    .transportation-detail-header-subcolumn1,
    .transportation-detail-header-subcolumn2,
    .invoice-header-fields-detail-header-subcolumn1 {
        grid-template-columns: 1fr 1fr;
        row-gap: 15px;
    }
}

@media (max-width: 700px) {
    /* The top band wraps to two lines / 4.5rem below 700px (MainLayout2.razor.css), so the same
       0.1rem of breathing room the desktop rule leaves now starts 2rem lower. */
    .invoice-container {
        top: 4.6rem;
    }

    /* 15px of padding inside a 10px margin costs a seventh of a 360px screen. */
    .transaction-detail-header,
    .transaction-type-detail-header,
    .transportation-detail-header,
    .product-detail-header,
    .invoice-amount-detail-header,
    .invoice-header-fields-detail-header {
        margin-left: 8px;
        margin-right: 8px;
        margin-bottom: 12px;
        padding: 12px;
        gap: 12px;
    }

    .transaction-detail-header-subcolumn1,
    .transaction-type-detail-header,
    .transportation-detail-header-subcolumn1,
    .transportation-detail-header-subcolumn2,
    .invoice-header-fields-detail-header-subcolumn1,
    .invoice-amount-detail-header {
        grid-template-columns: 1fr;
        row-gap: 15px;
    }

    /* Centred overlays on a wide screen; in a single column they are simply the next full-width
       row, which also stops them landing on top of their own section heading. */
    .invoice-mode,
    .add-product-btn {
        position: static;
        transform: none;
        width: 100%;
    }

    .add-product-btn {
        margin-bottom: 12px;
    }

    /* The party panels are a column of their own now, not a third of the row. */
    .container {
        max-width: none;
    }

    /* The panel animates open to a fixed height. Stacked in one column the same details are taller
       than 450px, and the overflow:hidden that makes the animation work would clip them. */
    .panel.open {
        max-height: 900px;
    }

    .transaction-type-detail-header-subcolumn1-header,
    .transportation-detail-header-subcolumn1-button {
        margin-right: 0;
    }

    /*---------------------------- Product grid ----------------------------*/
    /* This one can't fold: its columns are the invoice line, and hiding any of them would hide part
       of what is being saved. It keeps scrolling sideways — only the index and the product name stay
       frozen, both narrower so they don't take the whole screen with them. */
    .table-container {
        max-height: 260px;
    }

    .modern-table th:nth-child(1),
    .modern-table td:nth-child(1) {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
    }

    .modern-table th:nth-child(2),
    .modern-table td:nth-child(2) {
        left: 36px;
        width: 150px;
        min-width: 150px;
        max-width: 150px;
        white-space: normal;
    }

    /* Freezing Amount and Action on the right as well would leave barely any scrollable middle
       between them and the two frozen columns on the left. */
    .modern-table tbody td:nth-last-child(2),
    .modern-table tbody td:last-child {
        position: static;
        box-shadow: none;
    }

    /* Their header cells stay sticky — but vertically only, so the column headings still hold
       while the rows scroll. */
    .modern-table thead th:nth-last-child(2),
    .modern-table thead th:last-child {
        right: auto;
        box-shadow: none;
    }

    /*---------------------------- Amounts ----------------------------*/
    /* Expense rows are name / plus-minus icon / percentage / amount — the name is what gives up
       width, the two figures need theirs to stay legible. */
    .panel-row {
        grid-template-columns: 1fr auto 0.6fr 0.9fr;
        gap: 4px;
    }

    .col-name {
        font-size: 11px;
    }

    .panel-row input,
    .form-input {
        padding: 0 8px;
    }

    .detail-grid {
        grid-template-columns: auto 20px 1fr;
    }

    /* Full-width footer rather than a centred island, so both buttons stay comfortably tappable.
       width:auto is what lets right:10px take effect at all — against the base rule's width:500px the
       box stays 500px and overflows a 375px screen, since an over-constrained absolute/fixed box in
       LTR drops `right` and keeps the stated width. */
    .welcome-footer-invoice {
        left: 10px;
        right: 10px;
        width: auto;
        transform: none;
    }
}