/* Centered in the same fixed strip as MainLayout2's brand/logout bar
   (app.css .top-row: position:fixed; top:0; height:2.5rem) — this page
   renders below that bar in the DOM, so it needs its own matching
   position:fixed to actually land in the same visual row instead of
   flowing in as an unstyled block underneath it. */
.top-row-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* above app.css .top-row's own z-index:0 */
    pointer-events: none; /* purely informational, never blocks clicks on brand/logout */
}

.top-row-header2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 13px;
    color: #333;
}

.top-row-header-icon {
    fill: #808080;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.welcome {
    position: absolute;
    left: calc(13.5rem + 3%);
    right: 5%;
    transition: left 0.2s ease;
}

.welcome.sidebar-collapsed {
    left: calc(4.5rem + 3%);
}

/* Single real <table>, scrolled via the shared .master-table-scroll wrapper
   (see SaleAccount.css) instead of the old two-table display:block/display:table
   hack — that hack let rows visually paint outside the element that actually
   owned overflow-y:auto, so only a sliver near the bottom was truly
   scrollable. A plain table inside .master-table-scroll doesn't have that
   mismatch. */
.company-list-table {
    width: 100%;
    border-collapse: collapse;
}

.addcmpbtn {
    width: 250px;
    height: 35px;
    font-size: 12px;
    border-radius: 5px;
    padding: 16px 24px;
    background: #007BFF;
    border: none;
    color: #ffffff;
    font-family: sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

/* Header styling */
.company-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px;
    border-bottom: 1px solid #d1d1d1;
    text-align: left;
    font-weight: bold;
    background-color: #99ccff;
    font-size: 12px;
}

.company-list-table thead tr th:first-child {
    border-top-left-radius: 5px;
}

.company-list-table thead tr th:last-child {
    border-top-right-radius: 5px;
}

/* Row styling */
.company-list-table tbody td {
    padding: 10px;
    border-bottom: 1px solid #d1d1d1;
    padding-left: 50px;
}

.company-list-table tbody tr {
    cursor: pointer;
    transition: background 0.2s ease;
    padding-left: 50px;
}

.company-list-table tbody tr:hover td {
    background-color: #e6f2ff;
    font-weight: 500;
}

.company-list-table tbody tr.active td {
    background-color: #cce5ff !important;
    font-weight: bold;
}

/* Show "No Data Found" when empty */
.master-table-scroll:has(.company-list-table tbody:empty)::after {
    content: "No Data Found";
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #cce5ff;
    padding: 24px 0;
}

.welcome-footer {
    position: fixed;
    bottom: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    gap: 10px;
}

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

.company-list-table tbody tr td {
    position: relative;
}

.company-list-table tbody tr .edit-icon {
    position: absolute;
    cursor: pointer;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    fill: #808080;
    width: 20px;
    height: 20px;
    transition: fill 0.3s ease;
}

.company-list-table tbody tr.active td .edit-icon {
    fill: #3399ff;
}

.company-list-table tbody tr .edit-icon:hover {
    fill: #3399ff !important;
}

.search-container {
    display: flex;
    justify-content: flex-end; /* Align to right */
    align-items: center;
}

.search-container .search-input {
    padding: 6px 30px 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    font-size: 14px;
    position: relative;
    width: auto;
}

.search-container .search-icon {
    position: relative;
    fill: #999;
    pointer-events: none;
    right: 3px;
}

/* ==========================================================================
   Left menu (List of Companies screen)
   ========================================================================== */
.company-side-bar {
    background: #ffffff;
    border-right: 1px solid #ccc;
    width: 13.5rem;
    position: fixed;
    top: 2.5rem;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.2s ease, left 0.2s ease;
}

.company-side-bar.collapsed {
    width: 4.5rem;
}

.company-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 8px 0;
}

.company-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13.5px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    fill: #808080;
    /* These links carry a class but no href, so Bootstrap's reboot underlines
       them (a:not([href]):not([class]) is the only unstyled case). */
    text-decoration: none;
}

.company-nav a:hover {
    background: #f0f0f0;
}

.company-nav a.active {
    background: #e6f2ff;
    color: #3399ff;
    fill: #3399ff;
}

.company-side-bar.collapsed .company-nav a .label {
    display: none;
}

.sidebar-collapse-btn {
    margin: auto 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    fill: #808080;
}

.sidebar-collapse-btn:hover {
    background: #f0f0f0;
}

.company-side-bar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

.company-sidebar-backdrop {
    display: none;
}

/* ==========================================================================
   Responsive (List of Companies screen)
   ========================================================================== */
/* Matches SidebarLayout's off-canvas drawer pattern (used by the other 11
   Master pages, see SidebarLayout.razor.css/SaleAccount.css): below 700px
   this sidebar slides off-canvas instead of staying pinned at left:0, where
   it used to sit on top of the toolbar/table (which drop to left:0 on
   mobile) and crowd the brand row above it. The always-visible menu-toggle
   button in MainLayout2's top-row (wired via MobileMenuService) brings it
   back on top, same control used on the Master-menu pages. */
@media (max-width: 700px) {
    .company-side-bar,
    .company-side-bar.collapsed {
        left: -13.5rem;
        width: 13.5rem;
        top: 4.5rem; /* clears the two-line top band below */
    }

    .company-side-bar.open {
        left: 0;
    }

    .company-side-bar.collapsed .company-nav a .label {
        display: inline;
    }

    .company-sidebar-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1;
    }

    /* This page is the one screen with no company chosen yet, so it shows its
       own user label instead of HeaderUser. It takes the same right half of
       the top band's second line that HeaderUser.razor.css docks into on
       every other page — the band itself is two lines tall below 700px, see
       MainLayout2.razor.css.

       Scoped through .page:has(.company-side-bar), which is true only here.
       .top-row-header is not this page's own class: Login, Register and No
       Internet put their brand in an element of the same name, and every
       stylesheet is global, so an unscoped rule would move their heading into
       the right-hand half of a two-line band those pages do not have. The
       scoping doubles as the specificity (0,3,0) that beats Login.css's plain
       .top-row-header — that file loads after this one and would otherwise
       re-stack the label into a column, leaving justify-content below
       pointing down the wrong axis. */
    .page:has(.company-side-bar) .top-row-header {
        top: 2.5rem;
        left: auto;
        right: 0;
        width: 55%;
        height: 2rem;
        flex-direction: row;
        justify-content: flex-end;
        padding-right: 10px;
        overflow: hidden;
    }

    .page:has(.company-side-bar) .top-row-header2 {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        font-size: 12px;
        gap: 6px;
    }

    .page:has(.company-side-bar) .top-row-header-icon {
        width: 16px;
        height: 16px;
    }

    /* 50px of left padding is a desktop indent — on a phone it is most of the
       row, and the edit icon at right:5% then has almost nothing left. */
    .company-list-table tbody td {
        padding-left: 14px;
        padding-right: 40px;
    }

    .company-list-table tbody tr .edit-icon {
        right: 12px;
    }

    /* Purely decorative footer holder, but its desktop left offset
       (13.5rem + 3%) leaves it hanging off a narrow screen. */
    .welcome,
    .welcome.sidebar-collapsed {
        left: 0;
        right: 0;
    }
}