/* =========================================================
   LCDA JOB MANAGER - MAIN STYLESHEET
   ========================================================= */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,sans-serif;
    background:#f5f7fb;
    color:#10233f;
}

a{
    color:#123d7a;
    text-decoration:none;
}


/* =========================================================
   HEADER
   ========================================================= */

header{
    background:#fff;
    border-bottom:1px solid #dce3ed;
    padding:14px max(18px,calc((100% - 1120px)/2));
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}

header b{
    font-size:18px;
}

header small{
    display:block;
    color:#65758b;
    margin-top:3px;
}

nav{
    display:flex;
    align-items:center;
    gap:12px;
}


/* =========================================================
   GENERAL LAYOUT
   ========================================================= */

.wrap{
    max-width:1120px;
    margin:auto;
    padding:24px 16px;
}

.title h1,
.card h1{
    margin:0 0 6px;
}

.title p{
    margin:0;
    color:#65758b;
}

.row{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:14px;
    margin-bottom:18px;
}

.card,
.job{
    background:#fff;
    border:1px solid #dce3ed;
    border-radius:14px;
    padding:18px;
}

.muted{
    color:#65758b;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
button{
    display:inline-block;
    border:0;
    border-radius:9px;
    padding:11px 15px;
    background:#123d7a;
    color:#fff;
    font:inherit;
    font-weight:650;
    cursor:pointer;
}

.secondary{
    background:#edf2f8!important;
    color:#0b356d!important;
}

.danger{
    background:#a42323!important;
}


/* =========================================================
   FORMS
   ========================================================= */

label{
    display:block;
    font-weight:600;
    font-size:14px;
}

label input,
label select,
label textarea{
    display:block;
    margin-top:6px;
    font-weight:400;
}

form label{
    margin-bottom:14px;
}

select,
input,
textarea{
    font:inherit;
    border:1px solid #b9c5d5;
    border-radius:9px;
    background:#fff;
    padding:11px;
    width:100%;
    min-height:44px;
}

textarea{
    min-height:90px;
    resize:vertical;
}

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 14px;
}

.wide{
    grid-column:1/-1;
}

.alert,
.ok{
    padding:12px;
    border-radius:9px;
    margin:12px 0;
}

.alert{
    background:#fff0f0;
    color:#8a1d1d;
}

.ok{
    background:#edf8ef;
    color:#1e6631;
}


/* =========================================================
   LOGIN
   ========================================================= */

.login{
    min-height:80vh;
    display:grid;
    place-items:center;
    padding:20px;
}

.login .card{
    width:min(440px,100%);
}


/* =========================================================
   CUSTOMER / JOB PAGE
   ========================================================= */

.customer{
    grid-column:1/-1;
    background:#f6f8fb;
    border-radius:10px;
    padding:14px;
    margin-bottom:14px;
}

.customer h2{
    margin-top:0;
}


/* =========================================================
   JOB LIST
   ========================================================= */

.jobs{
    display:grid;
    gap:12px;
}

.job{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
}

.jobmain{
    display:flex;
    gap:18px;
    flex:1;
    color:inherit;
}

.when{
    min-width:88px;
}

.when span{
    display:block;
    font-size:20px;
    margin-top:3px;
}

.job h2{
    font-size:18px;
    margin:0 0 4px;
}

.job p{
    margin:3px 0;
}

.engineer{
    font-weight:700;
}

.status select{
    width:auto;
}


/* =========================================================
   FILTERS
   ========================================================= */

.filters{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr auto;
    gap:12px;
    align-items:end;
    margin-bottom:14px;
    padding:14px;
}

.filters label{
    margin:0;
}

.filteractions{
    display:flex;
    gap:8px;
}


/* =========================================================
   SUMMARY BOXES
   ========================================================= */

.summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:14px 0;
}

.summary>div{
    background:#fff;
    border:1px solid #dce3ed;
    border-radius:12px;
    padding:12px;
}

.summary b{
    display:block;
    font-size:22px;
}

.summary span{
    font-size:13px;
    color:#65758b;
}


/* =========================================================
   VIEW TABS
   ========================================================= */

.viewtabs{
    display:flex;
    background:#e9eef5;
    border-radius:10px;
    padding:3px;
}

.viewtabs a{
    padding:8px 12px;
    border-radius:8px;
}

.viewtabs a.active{
    background:#fff;
    font-weight:700;
}


/* =========================================================
   DATE NAVIGATION
   ========================================================= */

.date-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:14px 2px;
}

.dayhead{
    font-size:16px;
    margin:10px 2px 0;
    color:#4d6078;
}

hr{
    border:0;
    border-top:1px solid #dce3ed;
    margin:18px 0;
}


/* =========================================================
   PLANNER
   ========================================================= */

.planner{
    display:grid;
    grid-template-columns:58px repeat(4,minmax(190px,1fr));
    border:1px solid #dce3ed;
    border-radius:14px;
    overflow:auto;
    background:#fff;
}

.planner-head{
    font-weight:750;
    padding:11px;
    border-bottom:1px solid #dce3ed;
    border-left:1px solid #e8edf4;
    background:#f8fafc;
}

.planner-time{
    padding:10px;
    color:#65758b;
    font-size:12px;
    border-top:1px solid #edf1f6;
}

.planner-cell{
    min-height:74px;
    padding:7px;
    border-left:1px solid #e8edf4;
    border-top:1px solid #edf1f6;
}

.mini-job{
    display:block;
    border-left:4px solid #8091a8;
    border-radius:8px;
    background:#f6f8fb;
    padding:8px;
    color:inherit;
}

.mini-job b,
.mini-job span,
.mini-job em{
    display:block;
}

.mini-job b{
    font-size:13px;
}

.mini-job span{
    font-size:12px;
    color:#53667f;
    margin-top:3px;
}

.mini-job em{
    font-size:11px;
    font-style:normal;
    margin-top:5px;
}

.compact .job{
    padding:12px 16px;
}


/* =========================================================
   CUSTOMER HISTORY
   ========================================================= */

.history{
    margin-top:14px;
}

.history h2{
    margin-top:0;
}

.history-list{
    display:grid;
    gap:7px;
}

.history-list a{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px;
    border-radius:9px;
    background:#f6f8fb;
    color:inherit;
}

.history-list span{
    color:#65758b;
    font-size:13px;
}


/* =========================================================
   JOB PHOTOS
   ========================================================= */

.photos{
    margin-top:18px;
}

.photo-upload{
    display:grid;
    grid-template-columns:1.2fr 2fr auto;
    gap:12px;
    align-items:end;
    margin:14px 0 18px;
}

.photo-upload label{
    display:grid;
    gap:6px;
    font-weight:600;
}

.photo-upload input{
    min-height:44px;
    padding:10px;
    border:1px solid #ccd6e4;
    border-radius:9px;
    background:#fff;
    font-size:16px;
}

.photo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:14px;
}

.photo-grid figure{
    margin:0;
    border:1px solid #d8e0eb;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}

.photo-grid img{
    display:block;
    width:100%;
    height:160px;
    object-fit:cover;
}

.photo-grid figcaption{
    padding:10px;
    font-size:13px;
    line-height:1.4;
}

.photo-grid figcaption span{
    color:#60718b;
}

.photo-delete{
    margin-top:8px;
    background:#fff;
    color:#a11;
    border:1px solid #d9a6a6;
    padding:7px 10px;
    border-radius:7px;
}

.photo-flash{
    padding:10px 12px;
    border-radius:8px;
    background:#eaf6ec;
    color:#176b2c;
}


/* =========================================================
   ONLINE BOOKING RECORDS
   ========================================================= */

.booking-success{
    padding:20px;
    border-radius:12px;
    background:#eef8f0;
}

.booking-requests{
    margin-bottom:20px;
}

.booking-requests .row{
    align-items:center;
}

.request-list{
    display:grid;
    gap:8px;
}

.request-list a{
    display:grid;
    grid-template-columns:180px 1fr 100px;
    gap:12px;
    padding:12px;
    border:1px solid #d8e0ec;
    border-radius:10px;
    text-decoration:none;
    color:inherit;
}

.request-list span{
    color:#56657a;
}

.request-list em{
    font-style:normal;
    text-align:right;
}

.request-details{
    font-size:1.05rem;
    line-height:1.55;
}

.request-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}


/* =========================================================
   DEPOSIT / TERMS
   ========================================================= */

.deposit-notice,
.deposit-box{
    padding:14px;
    border:1px solid #d8dee8;
    border-radius:10px;
    background:#f7f9fc;
    margin:14px 0;
}

.deposit-notice p{
    margin:10px 0 0;
    line-height:1.5;
}

.deposit-box{
    line-height:1.7;
}

.terms{
    display:flex!important;
    gap:10px;
    align-items:flex-start;
    margin:14px 0;
}

.terms input{
    width:auto!important;
    min-height:auto;
    margin-top:4px;
    flex:0 0 auto;
}

.terms span{
    display:block;
}


/* =========================================================
   PUBLIC BOOKING PAGE
   ========================================================= */

.public-booking{
    width:100%;
    max-width:1320px;
    margin:35px auto;
    padding:0 20px;
}

.booking-layout{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(330px,0.9fr);
    gap:24px;
    align-items:start;
    width:100%;
}

.booking-layout > .card{
    width:100%;
    max-width:none;
    margin:0;
}

.public-booking .card{
    padding:28px;
}

.booking-form-card{
    min-width:0;
}


/* =========================================================
   CHARGES PANEL
   ========================================================= */

.charges-card{
    position:sticky;
    top:20px;
    padding:26px!important;
    min-width:0;
}

.charges-card h2{
    margin:0 0 5px;
    font-size:26px;
    line-height:1.2;
    color:#10233f;
}

.charges-intro{
    margin:0 0 20px;
    color:#65758b;
    line-height:1.5;
}


/* Each charge is its own clear section */

.charge-item{
    padding:18px 0;
    border-bottom:1px solid #d8e0eb;
}

.charge-item:first-of-type{
    padding-top:0;
}

.charge-label{
    display:block;
    font-size:16px;
    font-weight:700;
    color:#10233f;
    margin-bottom:5px;
}

.charge-price{
    display:block;
    margin:5px 0 8px;
    font-size:32px;
    line-height:1.1;
    font-weight:800;
    color:#123d7a;
}

.charge-item p{
    margin:5px 0 8px;
    line-height:1.5;
    color:#53667f;
}

.charge-item small{
    display:block;
    font-size:14px;
    line-height:1.55;
    color:#53667f;
}


/* Parts section */

.parts-charge strong{
    display:block;
    margin:5px 0 8px;
    font-size:18px;
    color:#123d7a;
}


/* Deposit section */

.deposit-charge .charge-price{
    margin-bottom:7px;
}


/* Bottom reassurance box */

.charges-note{
    margin-top:20px;
    padding:16px;
    border-radius:10px;
    background:#f7f9fc;
    border:1px solid #d8e0eb;
    color:#53667f;
    font-size:14px;
    line-height:1.55;
}

.charges-note b{
    display:block;
    margin-bottom:7px;
    color:#10233f;
    font-size:15px;
}

.charges-note p{
    margin:0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

    .planner{
        grid-template-columns:52px repeat(4,minmax(170px,1fr));
    }

    .filters{
        grid-template-columns:1fr 1fr;
    }

    .filteractions{
        align-self:end;
    }

    .summary{
        grid-template-columns:1fr 1fr;
    }

    /*
       Booking becomes one column on tablet/mobile.

       IMPORTANT:
       Form remains FIRST.
       Charges appear UNDER the booking form.
    */

    .public-booking{
        max-width:720px;
        margin:20px auto;
        padding:0 14px;
    }

    .booking-layout{
        display:flex;
        flex-direction:column;
        gap:18px;
    }

    .booking-form-card{
        order:1;
        width:100%;
    }

    .charges-card{
        position:static;
        order:2;
        width:100%;
    }

    .booking-layout > .card{
        width:100%;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .photo-upload{
        grid-template-columns:1fr;
    }

    .photo-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .photo-grid img{
        height:140px;
    }

    .request-list a{
        grid-template-columns:1fr;
    }

    .request-list em{
        text-align:left;
    }

    .public-booking{
        margin:12px auto;
        padding:0 10px;
    }

    .public-booking .card{
        padding:18px;
    }

    .charges-card{
        padding:18px!important;
    }

    .charges-card h2{
        font-size:23px;
    }

    .charge-price{
        font-size:28px;
    }
}


@media(max-width:650px){

    .job{
        align-items:stretch;
        flex-direction:column;
    }

    .jobmain{
        gap:10px;
    }

    .when{
        min-width:65px;
    }

    .status select{
        width:100%;
    }

    .grid{
        grid-template-columns:1fr;
    }

    .wide{
        grid-column:auto;
    }

    header{
        align-items:flex-start;
    }

    .btn{
        margin-bottom:6px;
    }

    .row{
        align-items:flex-start;
        flex-direction:column;
    }

    .filters{
        grid-template-columns:1fr;
    }

    .summary{
        grid-template-columns:1fr 1fr;
    }

    .viewtabs{
        width:100%;
    }

    .viewtabs a{
        flex:1;
        text-align:center;
    }

    .planner{
        grid-template-columns:48px repeat(4,minmax(155px,1fr));
    }

    .history-list a{
        flex-direction:column;
    }
}