/*
 * SurveyorLink — Responsive stylesheet
 * Breakpoints follow UIKit's convention:
 *   small  : max-width 640px  (phones)
 *   medium : max-width 960px  (tablets)
 */

/* =====================================================================
   GLOBAL BOX MODEL
   ===================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* =====================================================================
   GLOBAL SPACING — tighten header, logo and nav across all screen sizes
   ===================================================================== */

/* Reduce the large top/bottom margin around the whole page */
#tm-container {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* Logo: strip the excessive 15px padding from the alignleft class */
.headerbar {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}
.headerbar img {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Nav links: reduce from the 55px UIKit default height */
.uk-navbar-nav > li > a {
    height: 36px !important;
    line-height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 12px !important;
}

/* Slightly larger nav on desktop */
@media (min-width: 771px) {
    .uk-navbar-nav > li > a {
        height: 46px !important;
        line-height: 46px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: 14px !important;
    }
}

/* Reduce the gap between the nav bar and the main content */
.tm-top-block + .tm-middle {
    margin-top: 6px !important;
}

/* Force main content column to full width on all screen sizes —
   uk-width-medium-1-1 only kicks in at 768px, leaving it unsized below that */
.tm-main {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
}

/* Override UIKit's flex grid entirely on small screens so nothing sits at 50% */
@media (max-width: 640px) {
    .tm-middle,
    .tm-middle.uk-grid {
        display: block !important;
        margin-left: 0 !important;
    }

    .tm-middle > *,
    .tm-middle.uk-grid > * {
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
    }

    .MainPanel {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =====================================================================
   PANELS — remove fixed widths
   ===================================================================== */
.LoginPanel,
.LoginPanelLogo {
    width: 95%;
    max-width: 400px;
}

.MainPanelLogo {
    width: 100%;
    max-width: 1000px;
}

/* SRA (Site Risk Assessment) icon grid — wraps when more than 3 items */
#sradiv {
    width: 100%;
}

.sl-sra-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.sl-sra-item {
    text-align: center;
    padding: 4px;
    flex: 0 0 auto;
    max-width: 80px;
}

.sl-sra-item img {
    display: block;
    margin: 0 auto 2px;
    max-width: 100%;
}

@media (max-width: 640px) {
    .sl-sra-item {
        max-width: 60px;
        font-size: 11px;
    }
}

.reportoverview {
    width: 100%;
    max-width: 1000px;
}

/* =====================================================================
   INPUTS & SELECTS — fluid widths instead of fixed px
   ===================================================================== */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="url"],
textarea {
    max-width: 100%;
    box-sizing: border-box;
}

select {
    max-width: 100%;
    box-sizing: border-box;
}

/* =====================================================================
   TABLES / GRIDVIEWS — horizontal scroll on overflow
   ===================================================================== */

.indWrap,
.quoWrap,
.ordWrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Bold GridView header cells globally */
.sl-table-scroll > table th {
    font-weight: bold !important;
}

/* Request-quote and other plain form tables — fluid layout */
.sl-form-table {
    width: 100%;
}

.sl-form-table table {
    width: 100%;
}

.sl-form-table select,
.sl-form-table input[type="text"],
.sl-form-table input[type="number"],
.sl-form-table textarea {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* CheckBoxList surveyor list — single column mobile, multi-column larger screens */
.sl-checklist,
.sl-checklist tbody {
    display: block !important;
    width: 100% !important;
}

.sl-checklist tr,
.sl-checklist td {
    display: block !important;
    width: 100% !important;
    padding: 2px 0;
    break-inside: avoid;
}

/* Mobile: 1 column (default) */
.sl-checklist tbody {
    column-count: 1;
    column-gap: 12px;
}

/* 350px+: 2 columns */
@media (min-width: 350px) {
    .sl-checklist tbody {
        column-count: 2;
    }
}

/* 500px+: 3 columns */
@media (min-width: 500px) {
    .sl-checklist tbody {
        column-count: 3;
    }
}

/* Desktop: 4 columns */
@media (min-width: 961px) {
    .sl-checklist tbody {
        column-count: 4;
    }
}

/* =====================================================================
   PHONE — max-width: 640px
   ===================================================================== */
@media (max-width: 640px) {

    /* --- GridView text smaller on mobile (overrides inline font-size) --- */
    .sl-table-scroll > table td,
    .sl-table-scroll > table th {
        font-size: 11px !important;
        padding: 4px 6px !important;
    }

    /* --- Request quote form: stack label/input rows vertically --- */
    .sl-form-table table,
    .sl-form-table tbody,
    .sl-form-table tr,
    .sl-form-table td {
        display: block !important;
        width: 100% !important;
    }

    .sl-form-table select,
    .sl-form-table input[type="text"],
    .sl-form-table textarea {
        width: 100% !important;
    }

    /* --- Record meta strip above tabs --- */
    .sl-record-meta {
        font-size: 10px !important;
        line-height: 1.4;
        margin-bottom: 4px;
    }

    .sl-record-meta * {
        font-size: 10px !important;
    }

    /* --- Headings scale down so they don't break over multiple lines --- */
    h1 { font-size: 18px !important; }
    h2 { font-size: 16px !important; }
    h3 { font-size: 14px !important; }

    .pHead       { font-size: 16px !important; }
    .Title       { font-size: 16px !important; }
    .SubTitle    { font-size: 13px !important; }
    .infTitle    { font-size: 13px !important; }
    .summTitle h2 { font-size: 14px !important; line-height: 1.3; }

    /* --- viewRecord info tab: stack label + value vertically --- */
    #sl-tab-info table,
    #sl-tab-info table tbody,
    #sl-tab-info table tr {
        display: block;
        width: 100% !important;
    }

    #sl-tab-info table td {
        display: block;
        width: 100% !important;
        padding: 2px 0;
        box-sizing: border-box;
    }

    /* Label cell: muted and slightly smaller */
    #sl-tab-info table tr td:first-child {
        font-size: 11px;
        color: #677791;
        padding-top: 8px;
        font-weight: bold;
    }

    /* Value cell: normal size, with a subtle bottom border */
    #sl-tab-info table tr td:last-child {
        font-size: 13px;
        padding-bottom: 6px;
        border-bottom: 1px solid #eee;
    }

    /* --- Inputs fill their container --- */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="search"],
    input[type="url"],
    input[type="password"],
    textarea {
        width: 100% !important;
    }

    select {
        width: 100% !important;
    }

    /* --- Buttons: stop floating, go full-width (exclude nav/tab controls) --- */
    input[type="submit"],
    input[type="button"],
    button:not(.sl-tab-btn):not(.sl-nav-toggle) {
        float: none !important;
        width: 100%;
        margin: 4px 0 !important;
        display: block;
    }

    /* Bootstrap btn class — ensure it doesn't float */
    .btn {
        float: none !important;
        display: block;
        width: 100%;
        margin: 4px 0;
    }

    /* --- Header logo --- */
    .headerbar img {
        height: 36px;
        width: auto;
    }

    /* --- Main panel padding tightens on small screens --- */
    .MainPanel {
        padding: 10px;
    }

    /* --- .pHead bleeds to tighter padding --- */
    .pHead {
        margin: -10px -10px 15px -10px;
    }

    /* --- Welcome strip --- */
    .welcome {
        width: 100%;
        padding: 10px;
    }

    /* --- Record list row: stack data + actions vertically --- */
    .indWrap .data,
    .quoWrap .data,
    .ordWrap .data {
        float: none;
        width: 100%;
    }

    .indWrap .actions,
    .quoWrap .actions,
    .ordWrap .actions {
        float: none;
        width: 100%;
        text-align: left;
    }

    .indWrap .actions a,
    .quoWrap .actions a,
    .ordWrap .actions a {
        float: none;
        display: inline-block;
        margin: 2px 2px 2px 0;
    }

    /* --- Summary header sections --- */
    .summTitle,
    .summRef,
    .summEdit,
    .cartBut {
        width: 100%;
        float: none;
    }

    .summRef {
        padding: 5px 8px;
    }

    /* --- Product/coverage layout --- */
    .detail,
    .cost,
    .duration {
        width: 100%;
        float: none;
        text-align: left;
        font-size: 18px;
        padding: 4px 0;
    }

    .prodHead h2,
    .coverSumm h2 {
        width: 100%;
        float: none;
    }

    /* --- Option rows --- */
    .singOpt {
        width: 50%;
    }

    #warSumm .singOpt {
        width: 50%;
    }

    /* --- Left/right content blocks --- */
    #main,
    #icons {
        width: 100%;
        float: none;
    }

    /* --- Price/slide layout --- */
    .slideCont {
        width: 100%;
        float: none;
        padding: 5px 0;
    }

    .priceSummary {
        width: 100%;
        float: none;
        text-align: left;
    }

    .slideLab,
    .slideLab2 {
        width: 50%;
    }

    /* --- Tooltips: reposition so they don't overflow screen --- */
    div.tooltip,
    div.tooltip2 {
        width: calc(100vw - 40px);
        left: 0;
        right: 0;
        top: auto;
    }

    /* --- accContent --- */
    .accIndSum,
    .accCovSum {
        width: 100%;
        box-sizing: border-box;
    }

    /* --- MainPanel2 links become block --- */
    .MainPanel2 a,
    a.mainLinks {
        width: 100%;
        box-sizing: border-box;
    }

    /* --- Actions links --- */
    .actions a {
        float: none;
        display: block;
        width: 100%;
        margin: 2px 0;
    }
}

/* =====================================================================
   TABLET — max-width: 960px
   ===================================================================== */
@media (max-width: 960px) {

    /* --- Inputs: give room to breathe --- */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    select {
        max-width: 100%;
    }

    /* --- Summary header: let ref wrap --- */
    .summTitle {
        width: 50%;
    }

    .summRef {
        width: 40%;
    }

    /* --- Product head table: don't overflow --- */
    .prodHead table {
        float: none;
        width: 100%;
    }

    /* --- singOpt rows: 4 columns on tablet --- */
    .singOpt {
        width: 25%;
    }
}

/* =====================================================================
   DASHBOARD LIST ITEMS — responsive action buttons
   ===================================================================== */
@media (max-width: 768px) {
    /* Stack buttons below record info in dashboard lists */
    .listBut {
        display: block;
        width: 100%;
        margin: 3px 0;
    }

}

/* =====================================================================
   TABLE SCROLL — individual GridView horizontal scroll wrappers
   ===================================================================== */
.sl-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 8px;
}

/* =====================================================================
   PIVOT CARD VIEW — defects / RFIs / subjectivities on mobile
   Each table row becomes a self-contained card with label::before
   ===================================================================== */
@media (max-width: 640px) {
    /* Keep scroll as safety net; JS adds sl-pivot-active when pivot runs */
    .sl-pivot-wrap {
        overflow-x: auto;
    }
    .sl-pivot-wrap.sl-pivot-active {
        overflow-x: visible !important;
    }

    /* Switch entire table out of table layout */
    .sl-pivot,
    .sl-pivot tbody {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sl-pivot thead {
        display: none !important;
    }

    /* Each data row becomes a card */
    .sl-pivot tbody tr {
        display: block !important;
        border: 2px solid #5D7B9D;
        border-radius: 4px;
        margin-bottom: 10px;
        overflow: hidden;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Each cell becomes a label + value row */
    .sl-pivot td {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #ddd;
        padding: 4px 8px !important;
        font-size: 11px !important;
        text-align: left !important;
        align-items: flex-start;
        background: #fff;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .sl-pivot tbody tr:nth-child(even) td {
        background: #f5f7fa;
    }

    /* Column header shown as bold prefix */
    .sl-pivot td::before {
        content: attr(data-label);
        font-weight: bold;
        min-width: 95px;
        max-width: 95px;
        margin-right: 8px;
        color: #444;
        font-size: 10px;
        flex-shrink: 0;
        padding-top: 1px;
    }

    /* No label prefix for unlabelled columns (checkbox, action links) */
    .sl-pivot td[data-label=""]::before {
        display: none;
    }

    /* Hide cells that only contain a hidden input */
    .sl-pivot td.sl-pivot-skip {
        display: none !important;
    }
}

/* =====================================================================
   MOBILE NAVIGATION — hamburger toggle
   ===================================================================== */

/* Hide the toggle button on desktop */
.sl-nav-toggle {
    display: none;
}

@media (max-width: 770px) {

    /* Show the nav bar block */
    .tm-top-block {
        display: block !important;
    }

    /* Hamburger button */
    .sl-nav-toggle {
        display: block;
        background: none;
        border: none;
        color: #dce4ee;
        font-size: 18px;
        padding: 10px 16px;
        cursor: pointer;
        width: auto !important;
        float: none !important;
        margin: 0 !important;
        line-height: 1.4;
    }

    .sl-nav-toggle.sl-nav-active {
        color: #ffffff;
    }

    /* Hide the nav list by default on mobile, show on .sl-nav-open */
    .uk-navbar-nav {
        display: none !important;
        flex-direction: column !important;
        width: 100%;
        background-color: #677791;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .uk-navbar-nav.sl-nav-open {
        display: flex !important;
    }

    /* Nav items stack vertically */
    .uk-navbar-nav > li {
        float: none !important;
        width: 100% !important;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .uk-navbar-nav > li > a,
    .uk-navbar-nav > li > span {
        display: block !important;
        padding: 12px 16px !important;
        color: #dce4ee !important;
        text-decoration: none;
        font-size: 14px;
    }

    .uk-navbar-nav > li > a:hover {
        background-color: rgba(255,255,255,0.12);
        color: #ffffff !important;
    }
}

@media (max-width: 640px) {

    /* Compact headerbar logo on mobile */
    .headerbar {
        overflow: hidden;
        margin-bottom: 0;
        padding: 2px 0 !important;
    }

    .headerbar img {
        float: none !important;
        display: block;
        height: 32px !important;
        width: auto !important;
        margin: 0;
        padding: 0 !important;
    }
}