/*======================================== Table ================================================*/
/* Container pinned between top and bottom.
   This element does NOT scroll itself — it only clips to the rounded
   shape. The actual scrolling happens in .master-table-scroll inside it.
   (A native scrollbar's corner widget isn't reliably clipped by
   border-radius on the same element that owns the scrollbar — moving the
   scrolling to a plain-rectangle child and letting this element's
   overflow:hidden clip it is the robust fix.) */
.master-table-container {
    position: fixed; /* pin to viewport */
    top: 7rem; /* distance from top (adjust as needed) */
    bottom: 1rem; /* distance from bottom (adjust as needed) */
    left: 14.5rem; /* matches .top-btns-container so the toolbar and table line up */
    right: 1rem;
    background: white;
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    overflow: hidden;
    margin: 0 auto;
    font-size: 12px;
    transition: left 0.2s ease;
}

/* Sidebar collapsed to icon-only (4.5rem, see SidebarLayout.razor.css) —
   reclaim the freed-up width instead of leaving it empty. */
.master-table-container.sidebar-collapsed {
    left: 5.5rem;
}

.master-table-scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin; /* auto | thin | none */
    scrollbar-color: #99c2ff #f1f1f1; /* thumb color | track color */
}

/* Table with fixed column sizes */
.master-content-table1 {
    border-collapse: collapse;
    /* width:100% here would force table-layout:fixed to squeeze every
       column proportionally into the container, ignoring their own pixel
       widths and killing horizontal scroll entirely. width:max-content
       instead sizes the table to the real sum of its column widths (so it
       can be wider than the container and actually scroll), while
       min-width keeps it from looking too narrow when there are few
       columns. */
    width: max-content;
    min-width: 100%;
    table-layout: fixed; /* ensures fixed column widths */
}

/* Table cells */
.master-content-table1 th,
.master-content-table1 td {
    text-align: left;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid #eef0f3;
    width: 300px;       /* fixed width per column */
    white-space: normal;       /* prevent wrapping */
    word-wrap: break-word;   /* break long words */
    overflow: hidden;   /* content doesn’t overflow */
}

/* Example fixed widths */
.master-content-table1 th:nth-child(1),
.master-content-table1 td:nth-child(1) {
    width: 50px;
    text-align: center;
}

.master-content-table1 th:nth-child(2),
.master-content-table1 td:nth-child(2) {
    width: 100px;
    text-align: center;
}

.master-content-table1 td:nth-child(17),
.master-content-table1 td:nth-child(18) {
    text-align: right;
}

/* Sticky header */
.master-content-table1 thead th {
    position: sticky;
    top: 0;
    background-color: #ffffff;
    border: none;
    border-bottom: 1px solid #e5e9f0;
    z-index: 1; /* higher than sticky columns */
    text-align: left;
    color: #6b7280;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Sticky first three column */
.master-content-table1 th:nth-child(1),
.master-content-table1 td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
}

.master-content-table1 th:nth-child(2),
.master-content-table1 td:nth-child(2) {
    position: sticky;
    left: 50px;
}

.master-content-table1 th:nth-child(3),
.master-content-table1 td:nth-child(3) {
    position: sticky;
    left: 150px;
    background: #ffffff;
}

.master-content-table1 td:nth-child(1),
.master-content-table1 td:nth-child(2),
.master-content-table1 td:nth-child(3) {
    background: #ffffff;
}

.master-content-table1 th:nth-child(1),
.master-content-table1 th:nth-child(2),
.master-content-table1 th:nth-child(3) {
    z-index: 3;
}

/* Sticky last column */
/* LAST column — always sticky on right */
.master-content-table1 th:last-child,
.master-content-table1 td:last-child {
    width: 150px;
    text-align: center;
    position: sticky;
    right: 0;
    background: #ffffff;
}

.master-content-table1 th:last-child {
    z-index: 2;
}

/* The entry registers carry a fifth icon in Action -- the share that sends the row to its party --
   and five icons at 20px with their 20px gaps come to 180px, so they wrapped onto a second line in
   the 150px above. Only the tables that actually have it widen: .wa-row-actions is set on those
   tables and nowhere else, so a three-column master keeps its narrow Action column. */
.master-content-table1.wa-row-actions th:last-child,
.master-content-table1.wa-row-actions td:last-child {
    width: 200px;
    white-space: nowrap;
}

/* CASE: exactly 3 columns — make the 2nd column the flexible filler */
.master-content-table1 th:nth-child(3):nth-last-child(2),
.master-content-table1 td:nth-child(3):nth-last-child(2),
.master-content-table1 th:nth-child(3):nth-last-child(3),
.master-content-table1 td:nth-child(3):nth-last-child(3) {
    position: sticky;
    width: auto !important;
}

/* Custom round checkbox with a guaranteed-white check mark. accent-color
   alone can't reliably force a fully circular shape or the check mark's
   own color — the browser still draws that glyph itself — so this
   replaces the native box/tick entirely with a plain circle + a
   rotated-border checkmark drawn in CSS. */
.master-content-table1 thead tr input[type="checkbox"],
.master-content-table1 tbody tr input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border: 1.5px solid #b9c0ca;
    border-radius: 50%;
    background: #eef0f3;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.master-content-table1 thead tr input[type="checkbox"]:hover,
.master-content-table1 tbody tr input[type="checkbox"]:hover {
    border-color: #3399ff;
}

.master-content-table1 thead tr input[type="checkbox"]:checked,
.master-content-table1 tbody tr input[type="checkbox"]:checked {
    background: #3399ff;
    border-color: #3399ff;
}

.master-content-table1 thead tr input[type="checkbox"]:checked::after,
.master-content-table1 tbody tr input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Normal hover applies to all cells */
.master-content-table1 tbody tr:hover td {
    background-color: #cce5ff !important;
}

/* Active row */
.master-content-table1 tbody tr.active td {
    background-color: #cce5ff !important;
    font-weight: 500;
}

/* Force sticky columns to lose gradient on hover */
.master-content-table1 tbody tr:hover td:nth-child(1),
.master-content-table1 tbody tr:hover td:nth-child(2),
.master-content-table1 tbody tr:hover td:nth-child(3),
.master-content-table1 tbody tr:hover td:last-child {
    background: #cce5ff !important; /* solid color override */
    z-index: 1; /* bring above */
}

/* Force sticky columns to lose gradient on active */
.master-content-table1 tbody tr.active td:nth-child(1),
.master-content-table1 tbody tr.active td:nth-child(2),
.master-content-table1 tbody tr.active td:nth-child(3),
.master-content-table1 tbody tr.active td:last-child {
    background: #cce5ff !important; /* solid color override */
    z-index: 1;
}

.filter-icon {
    fill: #3399ff;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

.filter-icon:hover {
    fill: #3399ff;
}

.edit-icon {
    fill: #808080;
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin-right: 20px;
}

.edit-icon:hover {
    fill: #3399ff;
}

/* Sends this row's document to its party. Grey at rest like the icons either side of it -- the
   Action column is a row of equals, and colouring one of them would read as a warning. */
.share-icon {
    fill: #808080;
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin-right: 20px;
}

.share-icon:hover {
    fill: #25d366;
}

.delete-icon {
    fill: #808080;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

.delete-icon:hover {
    fill: red;
}

/*======================================== Top BTNS Header ================================================*/
.top-btns-container {
    position: fixed; /* pin to viewport */
    top: 3rem; /* distance from top (adjust as needed) */
    left: 14.5rem; /* matches .master-table-container so the toolbar and table line up */
    right: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.05);
    transition: left 0.2s ease;
}

/* Sidebar collapsed to icon-only (4.5rem, see SidebarLayout.razor.css) —
   reclaim the freed-up width instead of leaving it empty. */
.top-btns-container.sidebar-collapsed {
    left: 5.5rem;
}

.top-btns-header {
    font-weight: bold;
    font-size: 18px;
    white-space: nowrap;
}

/* Back arrow ahead of the title on the settings pages (Invoice Settings and the pages it opens,
   Company Setting). Square, at the toolbar's 34px control height, in the same outlined style as
   the other toolbar buttons. */
.top-btns-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.top-btns-back-btn:hover {
    background: #eef2f7;
    border-color: #7d93b2;
}

.top-btns-back-btn svg {
    fill: #26303d;
}

/* "Add" button sits right next to the title — the primary action for this page */
.top-btns-add-btn {
    width: auto !important;
    flex-shrink: 0;
    padding: 0 18px !important;
    height: 34px !important;
}

/* Everything else (Delete/Filter/Reset/Import/Export) groups together,
   pushed away from the title+Add button by the search box's flex:1 */
.top-btns-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.search-container {
    position: relative;
    flex: 0 1 260px; /* fixed-ish width instead of stretching to fill the row */
    margin-left: auto; /* sticks to the right edge of whatever toolbar row it's in */
}

.search-container .search-input {
    width: 100%;
    height: 35px;
    padding: 6px 30px 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    font-size: 14px;
    background: #eef0f3;
}

.search-container .search-icon {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    fill: #3399ff;
    pointer-events: none;
}

/* Icon-only utility buttons — no text label, tooltip via the title attribute */
.delete-all-btn,
.filter-btn,
.filter-reset-all-btn,
.data-import-btn,
.data-export-btn,
.edit-btn,
/* Sale Invoice's toolbar actions — same treatment, page-specific names. */
.editor-btn,
.preview-btn,
.setting-btn,
.print-btn,
/* Sends the ticked document to its party as a WhatsApp message — every entry register has one. */
.whatsapp-btn {
    height: 34px;
    width: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e5e9f0;
    border-radius: 50%;
    background: #eef0f3;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.delete-all-btn:hover,
.filter-btn:hover,
.filter-reset-all-btn:hover,
.data-import-btn:hover,
.data-export-btn:hover,
.edit-btn:hover,
.editor-btn:hover,
.preview-btn:hover,
.setting-btn:hover,
.print-btn:hover,
.whatsapp-btn:hover {
    background: #f5f7fa;
    border-color: #d5dbe3;
}

/* These three only act on ticked rows, so they spend most of their time disabled. Without this they
   looked exactly like the live buttons — the icon carries an explicit fill, so the browser's own
   disabled styling never reaches it. The :hover rules above still match a disabled button, hence
   repeating the resting background here. */
.delete-all-btn:disabled,
.preview-btn:disabled,
.print-btn:disabled,
.whatsapp-btn:disabled,
.delete-all-btn:disabled:hover,
.preview-btn:disabled:hover,
.print-btn:disabled:hover,
.whatsapp-btn:disabled:hover {
    opacity: 0.4;
    cursor: not-allowed;
    background: #eef0f3;
    border-color: #e5e9f0;
}

/* Delete keeps a semantic red — it's the one destructive action here.
   Everything else is a neutral, muted gray, matching the reference look
   where color is reserved for meaningful state, not decoration. */
.delete-btn-icon {
    fill: #c0392b;
    height: 18px;
    width: 18px;
}

.filter-btn-icon,
.edit-btn-icon,
.reset-btn-icon,
.data-import-btn-icon,
.data-export-btn-icon,
.editor-btn-icon,
.preview-btn-icon,
.setting-btn-icon,
.print-btn-icon {
    fill: #6b7280;
    height: 18px;
    width: 18px;
}

/* WhatsApp's own green, the one exception to the muted grey beside it: the button sends a message
   out of the app under someone else's brand, and reads as that at a glance. */
.whatsapp-btn-icon {
    fill: #25d366;
    height: 18px;
    width: 18px;
}

.tooltip-panel label{
    display: flex;
    align-items: center; /* vertical center */
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
    padding-bottom: 5px;
}

.filter-tooltip-panel :not(:last-child){
    border-bottom: 1px solid #ccc;
}

.name-tooltip-panel :not(:first-child):not(:last-child),
.address1-tooltip-panel :not(:first-child):not(:last-child),
.address2-tooltip-panel :not(:first-child):not(:last-child),
.address3-tooltip-panel :not(:first-child):not(:last-child),
.address4-tooltip-panel :not(:first-child):not(:last-child),
.city-tooltip-panel :not(:first-child):not(:last-child),
.pincode-tooltip-panel :not(:first-child):not(:last-child),
.state-tooltip-panel :not(:first-child):not(:last-child),
.gstno-tooltip-panel :not(:first-child):not(:last-child),
.panno-tooltip-panel :not(:first-child):not(:last-child),
.msmeno-tooltip-panel :not(:first-child):not(:last-child),
.mobileno-tooltip-panel :not(:first-child):not(:last-child),
.emailid-tooltip-panel :not(:first-child):not(:last-child),
.referencepartyname-tooltip-panel :not(:first-child):not(:last-child),
.cashopeningbalance-tooltip-panel :not(:first-child):not(:last-child),
.chequeopeningbalance-tooltip-panel :not(:first-child):not(:last-child),
.ownershipinterest-tooltip-panel :not(:first-child):not(:last-child),
.ownershippercentage-tooltip-panel :not(:first-child):not(:last-child),
.interest-tooltip-panel :not(:first-child):not(:last-child),
.depreciation-tooltip-panel :not(:first-child):not(:last-child) {
    border-bottom: 1px solid #ccc;
}

.tooltip-panel input[type="checkbox"]{
    min-width: 15px;
    min-height: 15px;
    cursor: pointer;
    margin-left: 10px;
    accent-color: #3399ff;
}

/* Chrome, Safari, Edge, Opera */
.tooltip-panel input[type=number]::-webkit-inner-spin-button,
.tooltip-panel input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

.filter-tooltip-panel,
.name-tooltip-panel,
.address1-tooltip-panel,
.address2-tooltip-panel,
.address3-tooltip-panel,
.address4-tooltip-panel,
.city-tooltip-panel,
.pincode-tooltip-panel,
.state-tooltip-panel,
.gstno-tooltip-panel,
.panno-tooltip-panel,
.msmeno-tooltip-panel,
.mobileno-tooltip-panel,
.emailid-tooltip-panel,
.referencepartyname-tooltip-panel,
.cashopeningbalance-tooltip-panel,
.chequeopeningbalance-tooltip-panel,
.ownershipinterest-tooltip-panel,
.ownershippercentage-tooltip-panel,
.interest-tooltip-panel,
.depreciation-tooltip-panel {
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-auto-rows: min-content; /* prevent extra stretching */
    gap: 6px 12px;
    position: absolute;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    padding: 10px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
    height: 200px;
    width: 250px;
    z-index: 5;
    font-weight: 400;
    font-size: 15px;
    scrollbar-width: auto; /* auto | thin | none */
    scrollbar-color: #99c2ff #f1f1f1; /* thumb color | track color */
}

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

/*======================================== Responsive ================================================*/
/* Mobile: sidebar goes off-canvas (see SidebarLayout.razor.css). The toolbar
   wraps to 2-3 rows here and its real height varies by page (title length,
   how many icon buttons, text wrapping on narrow phones), so instead of
   guessing a fixed top offset for .master-table-container (which either
   overlapped the toolbar when too small, or left a big dead gap when too
   big), both cards drop out of position:fixed and become normal block
   elements: the table just follows the toolbar in document flow with a
   flat 1rem gap, self-adjusting to whatever height the toolbar actually
   renders at. .content1's own overflow-y:auto (see SidebarLayout.razor.css)
   scrolls the whole mobile page instead of the table having its own
   separate scroll region. */
@media (max-width: 700px) {
    .top-btns-container {
        position: static;
        margin: 5.5rem 1rem 0; /* clears the fixed top band, which is two lines / 4.5rem tall below 700px (MainLayout2.razor.css) */
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 8px 10px;
    }

    .top-btns-header {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
    }

    .top-btns-actions {
        order: 2;
        margin-left: 0;
    }

    .search-container {
        flex: 1 1 100%;
        order: 3; /* always its own row, after the title, Add button and icon buttons */
    }

    .master-table-container {
        position: static;
        margin: 1rem 1rem 1rem; /* dynamic: always exactly 1rem below the toolbar, whatever height it wrapped to */
        /* The height cap has to sit on the element that actually scrolls.
           Here this container is height:auto, so .master-table-scroll's
           height:100% resolved to auto and the scroll child grew to its full
           content height — a max-height on this container then just clipped
           the overflowing rows (overflow:hidden above) with no scrollbar
           anywhere. Capping .master-table-scroll instead gives it a definite
           height to scroll within, and this container sizes to it. */
        max-height: none;
    }

    .master-table-scroll {
        height: auto;
        max-height: 70vh; /* still cap it so a long list scrolls inside instead of growing forever */
    }

    .master-content-table1 th,
    .master-content-table1 td {
        padding: 6px 8px;
    }

    /* Frozen columns are a desktop affordance and actively harmful on a phone. The three pinned to
       the left (50 + 100 + 300px) and the Action column pinned to the right come to more than a
       narrow viewport is wide, so they overlap each other and every column in between stays
       covered — scrolling sideways moved the table under them and revealed nothing. Only Action
       stays frozen, at a width that leaves a usable window to scroll the rest through. */
    /* Header cells drop only the horizontal pin — position:sticky has to stay so the thead rule's
       top:0 keeps working and the header still holds while the rows scroll under it. */
    .master-content-table1 th:nth-child(-n+3),
    .master-content-table1 th:nth-child(3):nth-last-child(2),
    .master-content-table1 th:nth-child(3):nth-last-child(3) {
        left: auto;
    }

    .master-content-table1 td:nth-child(-n+3),
    .master-content-table1 td:nth-child(3):nth-last-child(2),
    .master-content-table1 td:nth-child(3):nth-last-child(3) {
        position: static;
    }

    .master-content-table1 th:last-child,
    .master-content-table1 td:last-child {
        width: 110px;
    }

    /* Five icons cannot fit 110px either. The table already scrolls sideways on a phone, so the
       Action column keeps the room it needs rather than wrapping. */
    .master-content-table1.wa-row-actions th:last-child,
    .master-content-table1.wa-row-actions td:last-child {
        width: 170px;
    }
}