/* ============================================================================
   site-tabs.css - tab strip and tab panels
   Replaces Telerik RadTabStrip / RadMultiPage / RadPageView
   (which used Skin="Silk" on Manage_Leads and Skin="Vista" on
   Manage_KitchenProduct).

   Part of the Telerik removal project. See .kiro/specs/telerik-removal/
   Markup is rendered by App_Code/Controls/SccTabs.vb.

   MARKUP RENDERED:
     div.scc-tabs > ul[role=tablist] > li.scc-tab > button.scc-tab-button
     div.scc-tabpanels > div.scc-tabpanel[role=tabpanel]

   Palette from Factory/css/factory.css: #383a35 dark neutral, #FF6B00 brand
   orange, Raleway.

   Tab switching is a POSTBACK, not client-side. That is deliberate: the pages
   rebuild grids and run SQL per tab in their TabClick handler, so the server has
   to be involved. Telerik's RadTabStrip also posted back for these pages
   (AutoPostBack behaviour via TabClick).
   ============================================================================ */

.scc-tabs {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    border-bottom: 2px solid #383a35;
    margin-bottom: 0;
}

.scc-tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.scc-tab {
    margin: 0 2px -2px 0;   /* pull down onto the strip's bottom border */
}

.scc-tab-button {
    display: block;
    font-family: inherit;
    font-size: inherit;
    padding: 8px 16px;
    cursor: pointer;

    color: #383a35;
    background-color: #e4e4e4;
    border: 1px solid #c9c9c9;
    border-bottom: 2px solid #383a35;
    border-radius: 3px 3px 0 0;
}

.scc-tab-button:hover {
    background-color: #f2f2f2;
    color: #FF6B00;
}

/* Selected tab joins the content area: white, and its bottom border is erased so
   it reads as continuous with the panel below. */
.scc-tab-selected > .scc-tab-button {
    background-color: #ffffff;
    color: #383a35;
    font-weight: 600;
    border-color: #383a35;
    border-bottom-color: #ffffff;
    cursor: default;
}

.scc-tab-button:focus-visible {
    outline: 2px solid #FF6B00;
    outline-offset: -2px;
}

/* ---------- Panels ---------------------------------------------------- */

.scc-tabpanels {
    background-color: #ffffff;
    border: 1px solid #383a35;
    border-top: 0;
    padding: 12px;
}

/* Visibility is set inline by SccMultiPage (display:none on unselected panels)
   rather than by a class, so a panel the page has explicitly hidden via
   FindPageViewByID(...).Visible = False stays hidden. These rules only cover
   spacing. */
.scc-tabpanel {
    /* nothing needed; present as a hook for page-level overrides */
}

/* ---------- Narrow screens ------------------------------------------- */

@media (max-width: 900px) {
    .scc-tabs ul {
        flex-direction: column;
    }

    .scc-tab {
        margin: 0 0 1px 0;
    }

    .scc-tab-button {
        border-radius: 3px;
        border-bottom: 1px solid #c9c9c9;
        width: 100%;
        text-align: left;
    }

    .scc-tab-selected > .scc-tab-button {
        border-bottom-color: #383a35;
    }
}

/* ---------- Print ---------------------------------------------------- */
/* On paper the tab bar is meaningless; the selected panel is the content. */

@media print {
    .scc-tabs {
        display: none;
    }

    .scc-tabpanels {
        border: 0;
        padding: 0;
    }
}