/* ===== Base / Global ===== */
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Typography scale */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Layout helpers */
html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}
/* Footer space */

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    /* line-height: 60px; */
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1500px;
    }
}

.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

.col {
    padding-bottom: 20px;
    text-align: center;
}

    .col .boldLink {
        color: #364394;
        font-weight: bold;
    }

.btn {
    padding: 4px 12px;
    margin-left: 5px;
}

/* Inputs (global) */
input[type=text], select {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    padding: 4px 8px;
    width: 100%;
}

/* ===== Modules & Stripes ===== */
.module {
    background: #fff;
    border: 1px solid #ccc;
    margin: 3%;
}

    .module > h2 {
        padding: 1rem;
        margin: 0 0 .5rem;
    }

    .module > p {
        padding: 0 1rem;
    }

.stripe-1 {
    color: #fff;
    background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
}

.stripe-dispute {
    color: #fff !important;
    background: repeating-linear-gradient( 45deg, #364394, #364394 10px, grey 10px, grey 20px );
}

/* ===== Icon Tiles (GLOBAL — keep here) =====
   Use absolute URLs to avoid bundler path issues. */
.clients {
    background-image: url('/images/icons/clients.svg');
}

.healthCheck {
    background-image: url('/images/icons/health.svg');
}

.contacts {
    background-image: url('/images/icons/contacts.svg');
}

.employees {
    background-image: url('/images/icons/employees.svg');
}

.jobs {
    background-image: url('/images/icons/jobs.svg');
}

.properties {
    background-image: url('/images/icons/properties.svg');
}

.propertiesSmall {
    background-image: url('/images/icons/propertiesSmall.svg');
}

.settings {
    background-image: url('/images/icons/settings.svg');
}

.disputes {
    background-image: url('/images/icons/dispute.svg');
}

.wages {
    background-image: url('/images/icons/salary.svg');
}

.holiday {
    background-image: url('/images/icons/holiday.svg');
}

.reminder {
    background-image: url('/images/icons/reminder.svg');
}

.statement {
    background-image: url('/images/icons/statement.svg');
}

.notification {
    background-image: url('/images/icons/notifcation.svg');
}

.carts {
    background-image: url('/images/icons/cart.svg');
}

.street {
    background-image: url('/images/icons/street.svg');
}

.certificate {
    background-image: url('/images/icons/certificate.svg');
}

.iso {
    background-image: url('/images/BSI900114001.jpg');
    background-size: 100px;
    width: 100px;
}

.boiler {
    background-image: url('/images/icons/boiler.svg');
}

.drain {
    background-image: url('/images/icons/cleaner.svg');
}

.roof {
    background-image: url('/images/icons/roof.svg');
}

.waterTank {
    background-image: url('/images/icons/watertank.svg');
}

.winterTurn {
    background-image: url('/images/icons/snowflake.svg');
}

.overtime {
    background-image: url('/images/icons/overtime.svg');
}

.patTest {
    background-image: url('/images/icons/dishwasher.svg');
}

.objective {
    background-image: url('/images/icons/notepad.svg');
}

.assessment {
    background-image: url('/images/icons/feedback.svg');
}

.maintenance {
    background-image: url('/images/icons/construction.svg');
}

.assets {
    background-image: url('/images/icons/tools.svg');
}

.meeting {
    background-image: url('/images/icons/conference.svg');
}

.internalAudit {
    background-image: url('/images/icons/check-list.svg');
}

.correctiveAction {
    background-image: url('/images/icons/jigsaw.svg');
}

.house {
    background-image: url('/images/icons/house.svg');
}

.missing {
    background-image: url('/images/icons/warning.svg');
}

.email {
    background-image: url('/images/icons/email.svg');
}

.survey {
    background-image: url('/images/icons/survey.svg');
}

.missingRed {
    background-image: url('/images/icons/warningRed.svg');
}

.like {
    background-image: url('/images/icons/like.svg');
}

.dislike {
    background-image: url('/images/icons/dislike.svg');
}

/* Shared icon box sizing */
.clients, .healthCheck, .contacts, .employees, .jobs, .properties, .settings,
.disputes, .wages, .holiday, .reminder, .statement, .notification, .carts, .street,
.certificate, .boiler, .drain, .roof, .waterTank, .winterTurn, .overtime, .patTest,
.objective, .assessment, .maintenance, .assets, .meeting, .internalAudit,
.correctiveAction, .house, .missing, .email, .survey, .missingRed, .like, .dislike {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 10px;
}

.propertiesSmall {
    width: 12px;
    height: 12px;
    margin: 10px;
}

/* ===== Tables & States ===== */
tr, td, th {
    border: 1px solid #fff;
}

.table > tbody > tr > td {
    border-top: 0;
    padding-left: 20px;
}

.jobHistoryBlueCell {
    background-color: #364394;
    color: #fff;
}

.table > tbody > tr.overdue,
.table > tbody > tr td div.overdue {
    background-color: rgba(255,0,0,.85);
    color: #fff;
}

.table > tbody > tr.nearlyOverdue,
.table > tbody > tr td div.nearlyOverdue {
    background-color: rgba(255,165,0,.85);
    color: #fff;
}

div.invoice, .table > tbody > tr.invoice, .table > tbody > tr td div.invoice {
    background-color: rgba(54,67,148,.85);
    color: #fff;
}

div.invoicing, .table > tbody > tr.invoicing, .table > tbody > tr td div.invoicing {
    background-color: rgba(142,68,173,.85);
    color: #fff;
}

.table > tbody > tr.cancelled, .table > tbody > tr td div.cancelled {
    background-color: gray;
    color: #fff;
}

div.todo, .table > tbody > tr.todo, .table > tbody > tr td div.todo {
    background-color: rgba(45,199,45,.85);
    color: #fff;
}

.table > tbody > tr.todoLight, .table > tbody > tr td div.todoLight {
    background-color: rgba(45,199,45,.85);
    color: #fff;
}

.table > tbody > tr.overdueLight, .table > tbody > tr td div.overdueLight {
    background-color: rgba(255,0,0,.85);
    color: #fff;
}

div .complete, .table > tbody > tr.complete, .table > tbody > tr td div.complete {
    background-color: rgba(45,199,45,.40);
    color: #000;
}

div .arrangeAccess, .table > tbody > tr.arrangeAccess, .table > tbody > tr td div.arrangeAccess {
    background-color: rgba(247,202,24,1);
    color: #000;
}

    .table > tbody > tr.arrangeAccess > td a {
        color: #000;
    }

div estimate, .table > tbody > tr.estimate, .table > tbody > tr td div.estimate {
    background-color: rgba(255,140,0,1);
    color: #000;
}

    .table > tbody > tr.estimate > td a {
        color: #000;
    }

div.inProgress, .table > tbody > tr.inProgress, .table > tbody > tr td div.inProgress {
    background-color: lightslategray;
    color: #fff;
}

.table > tbody > tr.complete > td a {
    color: #000;
}

.table > tbody > tr.overdue > td a,
.table > tbody > tr.todoLight > td a,
.table > tbody > tr.nearlyOverdue > td a,
.table > tbody > tr.invoice > td a,
.table > tbody > tr.invoicing > td a,
.table > tbody > tr.todo > td a,
.table > tbody > tr.overdueLight > td a,
.table > tbody > tr.inProgress > td a,
.table > tbody > tr.cancelled > td a {
    color: #fff;
}

/* List “cards” on small screens (global, used across pages) */
.container-fluid > ul {
    display: block;
    list-style: none;
    padding: 0;
}

.container-fluid > p {
    padding-bottom: 10px;
}

.container-fluid > ul li {
    border-color: #364394;
    border-radius: 10px;
    border-style: solid;
    margin: 0 0 5px;
}

.container-fluid ul li h3 {
    background-color: #364394;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #fff;
    margin-top: 0;
    padding: 5px;
    text-align: center;
}

.container-fluid > ul li.overdue {
    border-color: rgba(255,0,0,.85);
}

.container-fluid ul li.overdue h3 {
    background-color: rgba(255,0,0,.85);
}

.container-fluid > ul li.cancelled {
    border-color: gray;
}

.container-fluid ul li.cancelled h3 {
    background-color: gray;
}

.container-fluid > ul li.todo {
    border-color: rgba(45,199,45,.85);
}

.container-fluid ul li.todo h3 {
    background-color: rgba(45,199,45,.85);
}

.container-fluid > ul li.inProgress {
    border-color: lightslategray;
}

.container-fluid ul li.inProgress h3 {
    background-color: lightslategray;
}

.container-fluid > ul li.nearlyOverdue {
    border-color: rgba(255,165,0,.85);
}

.container-fluid ul li.nearlyOverdue h3 {
    background-color: rgba(255,165,0,.85);
}

.container-fluid ul li a {
    display: block;
    min-height: 50px;
    min-width: 50px;
    padding-left: 10px;
}

.container-fluid ul li p {
    display: block;
    padding-left: 10px;
    word-wrap: break-word;
}

/* Overtime badges */
.invoiceOvertime {
    background: #364394;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding-top: 5px;
    margin-bottom: 5px;
}

.cancelledOvertime {
    background: gray;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding-top: 5px;
    margin-bottom: 5px;
}

.todoOvertime {
    background: rgba(45,199,45,.85);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding-top: 5px;
    margin-bottom: 5px;
}

.overdueOvertime {
    background: rgba(255,0,0,.85);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding-top: 5px;
    margin-bottom: 5px;
}

.onCallOvertime {
    background: rgba(0,50,0,.45);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding-top: 5px;
    margin-bottom: 5px;
    border-style: dashed;
}

.completeOvertime {
    background: rgba(45,199,45,.40);
    color: #000;
    text-align: center;
    border-radius: 6px;
    padding-top: 5px;
    margin-bottom: 5px;
}

/* Diary colors */
.diary {
    color: #fff;
}

    .diary .overdue {
        background-color: rgba(255,0,0,.85);
    }

    .diary .todo {
        background-color: rgba(45,199,45,.85);
    }

    .diary .inProgress {
        background-color: lightslategray;
    }

    .diary .cancelled {
        background-color: gray;
    }

    .diary .invoice {
        background-color: rgba(54,67,148,.85);
    }

    .diary .invoicing {
        background-color: rgba(142,68,173,.85);
    }

    .diary .complete {
        background-color: rgba(45,199,45,.60);
    }

/* Utility & misc */
.add {
    background-image: url('/images/icons/add.svg');
}

.home {
    background-image: url('/images/icons/home.svg');
}

.edit {
    background-image: url('/images/icons/edit.svg');
}

    .edit.todo {
        background-image: url('/images/icons/editGreen.svg');
    }

    .edit.overdue {
        background-image: url('/images/icons/editRed.svg');
    }

    .edit.nearlyOverdue {
        background-image: url('/images/icons/editOrange.svg');
    }

.delete {
    background-image: url('/images/icons/delete.svg');
}

    .delete.todo {
        background-image: url('/images/icons/deleteGreen.svg');
    }

    .delete.overdue {
        background-image: url('/images/icons/deleteRed.svg');
    }

    .delete.nearlyOverdue {
        background-image: url('/images/icons/deleteOrange.svg');
    }

.view {
    background-image: url('/images/icons/view.svg');
}

    .view.todo {
        background-image: url('/images/icons/viewGreen.svg');
    }

    .view.overdue {
        background-image: url('/images/icons/viewRed.svg');
    }

    .view.nearlyOverdue {
        background-image: url('/images/icons/viewOrange.svg');
    }

.add, .home, .edit, .delete, .view {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 25px;
}

/* Inputs with pound £ prefix */
.input-pound {
    position: relative;
}

    .input-pound.left input {
        padding-left: 18px;
    }

    .input-pound:before {
        position: absolute;
        top: 0;
        content: "£";
    }

    .input-pound.left:before {
        left: 5px;
    }

/* Ratings */
#rating_bar {
    width: 80px;
    height: 80px;
    display: inline-block;
}

    #rating_bar > span:before {
        content: '\2605';
        cursor: pointer;
        font-size: 3em;
    }

.starUnChecked:before {
    color: rgba(238,238,238,.50);
}

.starUnChecked:hover:before {
    color: #fff;
}

.starChecked:before {
    color: #fff;
}

.starChecked:hover:before {
    color: rgba(238,238,238,.50);
}

/* Misc visuals */
.inset {
    border: 8px double black;
}

.container {
    position: relative;
}

    .container .image {
        opacity: 1;
        display: block;
        width: 100%;
        height: auto;
        transition: .5s ease;
        backface-visibility: hidden;
    }

    .container .middle {
        transition: .5s ease;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        text-align: center;
    }

    .container:hover .image {
        opacity: .3;
    }

    .container:hover .middle {
        opacity: 1;
    }

    .container .middle .text {
        background-color: #4CAF50;
        color: #fff;
        font-size: 16px;
        padding: 16px 32px;
        margin-bottom: 5px;
    }

/* Repeatable jobs badge */
.repeatableJobsDate {
    margin: 15px;
    display: inline-block;
    background: lightsteelblue;
    padding: 20px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
}

/* VAT table */
.vATValues tr, .vATValues td, .vATValues th {
    border: 1px solid #000;
}

/* FullCalendar bg event */
.fc-bgevent {
    background-color: lightslategray !important;
    content: "Holiday";
}

/* Loader */
.loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') 50% 50% no-repeat rgba(249,249,249,0.4);
}

/* Chat bubbles */
.chatContainer {
    border: 2px solid #dedede;
    background: #f1f1f1;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
}

.darker {
    border-color: #ccc;
    background: #ddd;
}

.chatContainer::after {
    content: "";
    clear: both;
    display: table;
}

.chatContainer .person {
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 20px;
    border-radius: 50%;
    color: #fff;
    background: blue;
    text-align: center;
    font-size: xx-large;
    padding-top: 7px;
}

    .chatContainer .person.right {
        float: right;
        margin-left: 20px;
        margin-right: 0;
    }

.time-right {
    float: right;
    color: #aaa;
}

.time-left {
    float: left;
    color: #999;
}

/* Privacy policy / accordion bits */
.privacyPaddingLeft {
    padding-left: 15px;
}

.accordion-toggle {
    text-decoration: none !important;
}

.panel-heading .accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    color: grey;
}

.panel-heading .accordion-toggle.collapsed:after {
    content: "\e080";
}

.ii a[href] {
    color: white;
}

/* ===== Legacy desktop-era rules (kept for old pages) =====
   NOTE: These are neutralized in job-edit.css for that page only. */
label {
    float: left;
    width: 150px;
}

input, select, textarea {
    max-width: 280px;
}

/* ===== Print ===== */
@media print {
    .btn.btn-secondary, .searchSection, .links, .linkHeader, .pageFooter {
        display: none;
    }

    a[href]:after {
        content: none !important;
    }
}

/* Chips */
.job-edit .chip-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.job-edit .chip {
    appearance: none;
    border: 1px solid #d1d5db;
    background: #fff;
    padding: 8px 12px;
    border-radius: 9999px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

    .job-edit .chip[aria-pressed="true"] {
        color: #fff;
        border-color: transparent;
    }

.job-edit .chip--success[aria-pressed="true"] {
    background: #22c55e;
}
/* green */
.job-edit .chip--danger[aria-pressed="true"] {
    background: #ef4444;
}
/* red  */

/* Compact date next to chip */
.job-edit .chip-date {
    width: 160px;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 10px;
}

/* ===== Mobile header alignment & spacing fixes ===== */
@media (max-width: 767.98px) {
    /* Give the navbar the SAME side gutters */
    .navbar .container,
    .navbar .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Chip row: reduce gaps + allow nice wrapping on small screens */
    .job-edit .chip-group {
        gap: 8px;
    }

    .job-edit .chip-date {
        width: 140px; /* smaller date field on phones */
        min-height: 34px;
        padding: 6px 10px;
    }
}

/* If your navbar is fixed, add top padding so content
   doesn’t slide under it on small screens. Prefer a class so
   it’s opt-in and won’t affect other layouts. */
body.navbar-fixed {
    padding-top: 56px; /* adjust to your navbar height */
}


/* If your navbar is fixed, add this class to <body> to prevent overlap */
body.navbar-fixed {
    padding-top: 56px;
}
/* adjust to your navbar height */

/* =========================================
   Client Properties - Sticky Bottom Section
   ========================================= */

.properties-page,
.business-contacts-page,
.clients-page,
.addresses-page,
.part-orders-page {
    padding-bottom: 140px; /* Space for sticky bottom section */
}

/* Sticky bottom container */
.sticky-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 12px 15px;
    z-index: 1000;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

/* Single row bottom controls */
.bottom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Search input container */
.search-input-container {
    position: relative;
    flex: 0 1 auto;
    min-width: 150px;
    max-width: 300px;
}

/* Search input and button group - no gap between them */
.search-group {
    display: flex;
    gap: 0;
    align-items: center;
    flex: 0 0 auto;
}

/* Search input */
.search-input {
    width: 100%;
    padding: 8px 30px 8px 12px; /* Extra padding on right for X button */
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Clear input button - hidden on desktop by default */
.clear-input-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: none; /* Hidden on desktop */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.clear-input-btn:hover {
    background-color: #f0f0f0;
    color: #666;
}

/* Buttons */
.search-btn,
.clear-btn,
.pagination-btn {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 6px;
}

/* Pagination buttons - positioned on the left */
.pagination-btn {
    min-width: 80px;
    flex-shrink: 0;
}

/* Search button with icon */
.search-btn {
    flex-shrink: 0;
}

/* Button text visibility */
.btn-text-mobile {
    display: none;
}

.btn-text-desktop {
    display: inline;
}

/* Hide mobile cards on desktop by default */
.mobile-cards {
    display: none;
}

/* Mobile Cards Layout (under 700px) */
@media (max-width: 699px) {
    /* Hide table on mobile for all pages */
    .properties-page .table-responsive,
    .clients-page .table-responsive,
    .business-contacts-page .table-responsive,
    .addresses-page .table-responsive,
    .part-orders-page .table-responsive {
        display: none;
    }
    
    /* Show mobile cards */
    .mobile-cards {
        display: block;
    }
    
    /* Mobile card styling */
    .mobile-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 16px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .card-content {
        padding: 16px;
    }
    
    .card-header h4 {
        margin: 0 0 12px 0;
        color: #1f2937;
        font-size: 16px;
        font-weight: 600;
    }
    
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .card-header h4 {
        flex: 1;
        min-width: 200px;
        margin-bottom: 8px;
    }
    
    .card-info {
        background: #f9fafb;
        padding: 8px 12px;
        border-radius: 6px;
        margin-bottom: 12px;
        font-size: 14px;
        color: #374151;
    }
    
    .card-details {
        margin-bottom: 16px;
    }
    
    .detail-row {
        margin-bottom: 8px;
        font-size: 14px;
        color: #374151;
    }
    
    .detail-row strong {
        color: #1f2937;
        font-weight: 600;
    }
    
    .card-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .card-actions .btn {
        flex: 1;
        min-width: 80px;
        text-align: center;
        font-size: 14px;
        padding: 8px 12px;
    }
    
    /* Addresses page specific styling */
    .addresses-page .mobile-card.street-header {
        background: #f8f9fa;
        border-left: 4px solid #007bff;
    }
    
    .addresses-page .mobile-card.property-item {
        margin-left: 20px;
        border-left: 2px solid #dee2e6;
    }
    
    .addresses-page .mobile-card.street-header .card-header h4 {
        color: #007bff;
        font-weight: 700;
    }
}

/* Sticky search bar - remove unwanted margins */
.sticky-search {
    margin: 0 !important;
}

.sticky-search .form-actions {
    margin: 0 !important;
}

/* Gas Inspections Tabs */
.gas-inspection-tabs {
    margin-bottom: 20px;
}

.tab-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 10px;
}

.tab-button {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-button:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.tab-button.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.tab-count {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

.tab-button.active .tab-count {
    background: rgba(255, 255, 255, 0.2);
}

.gas-inspections-page .tab-content {
    display: none;
}

.gas-inspections-page .tab-content.active {
    display: block;
}

/* Gas Inspections Cards - visible on all screens */
.gas-inspections-page .inspection-cards,
.gas-inspections-page .mobile-cards {
    display: block;
}

/* Mobile specific styling */
@media (max-width: 699px) {
    /* Mobile tab styling */
    .tab-container {
        flex-direction: column;
        gap: 4px;
    }
    
    .tab-button {
        width: 100%;
        justify-content: space-between;
        padding: 12px 16px;
    }
}

.gas-inspections-page .inspection-card,
.gas-inspections-page .mobile-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gas-inspections-page .card-content {
    padding: 16px;
}

.gas-inspections-page .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.gas-inspections-page .card-header h4 {
    flex: 1;
    min-width: 200px;
    margin: 0 0 8px 0;
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
}

.gas-inspections-page .card-status-label {
    margin-bottom: 12px;
}

.gas-inspections-page .status-label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gas-inspections-page .status-label.to-be-sent {
    background-color: #fbbf24;
    color: #92400e;
}

.gas-inspections-page .status-label.expired {
    background-color: #ef4444;
    color: white;
}

.gas-inspections-page .status-label.expiring {
    background-color: #f59e0b;
    color: white;
}

.gas-inspections-page .status-label.current {
    background-color: #10b981;
    color: white;
}

.gas-inspections-page .status-label.archived {
    background-color: #6b7280;
    color: white;
}

.gas-inspections-page .status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.gas-inspections-page .status-badge.pass {
    background-color: #10b981;
    color: white;
}

.gas-inspections-page .status-badge.fail {
    background-color: #ef4444;
    color: white;
}

.gas-inspections-page .status-badge.unknown {
    background-color: #9ca3af;
    color: white;
}

.gas-inspections-page .card-info {
    background: #f9fafb;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #374151;
}

.gas-inspections-page .card-details {
    margin-bottom: 16px;
}

.gas-inspections-page .detail-row {
    margin-bottom: 8px;
    font-size: 14px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gas-inspections-page .detail-row strong {
    color: #1f2937;
    font-weight: 600;
    min-width: 100px;
}

.gas-inspections-page .count-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}

.gas-inspections-page .count-badge.has-items {
    background-color: #10b981;
    color: white;
}

.gas-inspections-page .count-badge.no-items {
    background-color: #ef4444;
    color: white;
}

.gas-inspections-page .card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gas-inspections-page .card-actions .btn {
    flex: 1;
    min-width: 80px;
    text-align: center;
    font-size: 14px;
    padding: 8px 12px;
}

/* Desktop layout for gas inspection card body */
@media (min-width: 992px) {
    .gas-inspections-page .inspection-card .card-content {
        display: grid;
        grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(260px, 2fr);
        column-gap: 20px;
        row-gap: 12px;
        align-items: start;
    }

    .gas-inspections-page .inspection-card .card-header,
    .gas-inspections-page .inspection-card .card-status-label,
    .gas-inspections-page .inspection-card .card-info,
    .gas-inspections-page .inspection-card .card-actions {
        grid-column: 1 / 4;
    }

    .gas-inspections-page .inspection-card .card-details {
        grid-column: 1 / 3;
        margin-bottom: 0;
        display: grid;
        grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr);
        column-gap: 20px;
        row-gap: 8px;
    }

    .gas-inspections-page .inspection-card .card-details .detail-row {
        margin-bottom: 0;
    }

    /* Left column: client/contact/engineer + dates */
    .gas-inspections-page .inspection-card .card-details .detail-row:nth-child(1),
    .gas-inspections-page .inspection-card .card-details .detail-row:nth-child(2),
    .gas-inspections-page .inspection-card .card-details .detail-row:nth-child(3),
    .gas-inspections-page .inspection-card .card-details .detail-row:nth-child(4),
    .gas-inspections-page .inspection-card .card-details .detail-row:nth-child(5) {
        grid-column: 1;
    }

    /* Middle column: appliances + defects */
    .gas-inspections-page .inspection-card .card-details .detail-row:nth-child(6),
    .gas-inspections-page .inspection-card .card-details .detail-row:nth-child(7) {
        grid-column: 2;
    }

    .gas-inspections-page .inspection-card .card-notes {
        grid-column: 3;
        margin-top: 0 !important;
    }

    .gas-inspections-page .inspection-card .card-notes textarea {
        min-height: 132px;
    }
}

/* Gas inspection slideout panel */
body.inspection-panel-open {
    overflow: hidden;
}

.inspection-slideout-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1040;
}

.inspection-slideout-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.inspection-slideout-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(460px, 95vw);
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.24s ease;
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

.inspection-slideout-panel.open {
    transform: translateX(0);
}

.inspection-slideout-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.inspection-slideout-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: #1f2937;
}

.inspection-slideout-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.inspection-slideout-body {
    padding: 16px;
    overflow-y: auto;
}

.inspection-slideout-notes {
    white-space: pre-wrap;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    min-height: 120px;
    padding: 10px 12px;
    color: #374151;
}

@media (max-width: 768px) {
    .inspection-slideout-panel {
        width: 100vw;
    }
}

/* Status-specific card styling */
.gas-inspections-page .inspection-card.overdue,
.gas-inspections-page .mobile-card.overdue {
    border-left: 4px solid #ef4444;
}

.gas-inspections-page .inspection-card.nearlyOverdue,
.gas-inspections-page .mobile-card.nearlyOverdue {
    border-left: 4px solid #f59e0b;
}

.gas-inspections-page .inspection-card.todo,
.gas-inspections-page .mobile-card.todo {
    border-left: 4px solid #3b82f6;
}

.gas-inspections-page .inspection-card.cancelled,
.gas-inspections-page .mobile-card.cancelled {
    border-left: 4px solid #6b7280;
    opacity: 0.7;
}

/* Hide mobile cards on larger screens for other pages (but NOT gas-inspections-page) */
@media (min-width: 700px) {
    .properties-page .mobile-cards,
    .clients-page .mobile-cards,
    .business-contacts-page .mobile-cards,
    .addresses-page .mobile-cards {
        display: none;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .properties-page,
    .business-contacts-page,
    .clients-page,
    .addresses-page,
    .gas-inspections-page {
        padding-bottom: 80px; /* Reduced space on mobile */
    }
    
    .sticky-bottom {
        padding: 10px 12px;
    }
    
    .bottom-controls {
        gap: 6px;
    }
    
    /* Hide clear button on mobile */
    .clear-btn {
        display: none;
    }
    
    /* Show mobile button text */
    .btn-text-mobile {
        display: inline;
    }
    
    .btn-text-desktop {
        display: none;
    }
    
    /* Compact pagination buttons */
    .pagination-btn {
        min-width: 44px;
        padding: 8px;
        font-size: 16px;
    }
    
    /* Adjust search input container */
    .search-input-container {
        min-width: 100px;
        max-width: 120px;
    }
    
    /* Adjust search input */
    .search-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Show clear button on mobile */
    .clear-input-btn {
        display: flex;
    }
    
    /* Compact search button with magnifying glass */
    .search-btn {
        padding: 8px;
        min-width: 44px;
        font-size: 16px;
    }
    
    /* Table responsiveness for medium screens (700px-768px) */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: none;
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .table-responsive table {
        min-width: 600px;
        margin-bottom: 0;
    }
    
    .table th,
    .table td {
        white-space: nowrap;
        padding: 8px 6px;
        font-size: 14px;
    }
}