/* ======================================
   GLOBAL
====================================== */

* {
    box-sizing: border-box;
}


body {

    margin:0;

    padding:20px;

    background:#f5f5f5;

    color:#333;

    font-family:Arial, Helvetica, sans-serif;

}



a {

    text-decoration:none;

}



/* ======================================
   PAGE
====================================== */


.client-page {

    max-width:1100px;

    margin:auto;

}





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


.client-toolbar {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}



.client-toolbar h1 {

    margin:0;

    font-size:24px;

    font-weight:600;

}



.client-toolbar p {

    margin:5px 0 0;

    color:#777;

    font-size:13px;

}





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


button {

    border:0;

    cursor:pointer;

    font-size:13px;

    padding:7px 12px;

    border-radius:5px;

}



.add-btn {

    background:#b9964a;

    color:white;

}



.add-btn:hover {

    background:#a3833e;

}





.view-btn {

    background:#b9964a;

    color:white;

}



.edit-btn {

    background:#e9e9e9;

    color:#333;

}



.delete-btn {

    background:#f5dddd;

    color:#a33;

}






/* ======================================
   CLIENT LIST
====================================== */


.client-list {


background:white;


border:1px solid #ddd;


border-radius:8px;


overflow:hidden;


}





.client-list-header {


display:grid;


grid-template-columns:
2fr 1.3fr 1fr 90px 90px 100px 170px;


background:#f1f1f1;


font-size:12px;


font-weight:bold;


color:#666;


padding:12px;


text-transform:uppercase;


}





.client-row {


display:grid;


grid-template-columns:
2fr 1fr 90px 90px 100px 170px;


align-items:center;


padding:12px;


border-top:1px solid #eee;


font-size:14px;


}



.client-row:hover {


background:#fafafa;


}




.client-name {


font-size:14px;


}





.client-date {


color:#777;


font-size:13px;


}





/* ======================================
   IMAGES
====================================== */


.thumb {


width:65px;


height:65px;


object-fit:cover;


border-radius:6px;


border:1px solid #ddd;


}



.missing {


font-size:12px;


color:#999;


}






/* ======================================
   STATUS
====================================== */


.status-complete,
.status-pending {


font-size:12px;


padding:4px 8px;


border-radius:12px;


}



.status-complete {


background:#e7f5e8;


color:#327a3a;


}



.status-pending {


background:#fff2d8;


color:#996500;


}






/* ======================================
   ACTIONS
====================================== */


.actions {


display:flex;


gap:5px;


}




.actions button {


font-size:12px;


padding:6px 9px;


}







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


@media(max-width:800px){



.client-list-header {


display:none;


}
.thumb{width:100% !important; 
height: inherit;}



.client-row {


display:block;


padding:15px;


}



.client-row > div {


margin-bottom:10px;


}



.actions {


margin-top:10px;


}



}


/* SEARCH */

.search-box {

width:100%;

max-width:350px;

padding:10px 12px;

border:1px solid #ddd;

border-radius:6px;

margin-bottom:15px;

font-size:14px;

outline:none;

}


.search-box:focus {

border-color:#b9964a;

}

/* ==========================
   CLIENT STATS
========================== */


.client-stats {

display:flex;

gap:12px;

margin-bottom:15px;

}



.stat-box {

background:white;

border:1px solid #ddd;

border-radius:8px;

padding:12px 20px;

min-width:140px;

}



.stat-box span {

display:block;

font-size:12px;

color:#777;

margin-bottom:5px;

}



.stat-box strong {

font-size:22px;

font-weight:600;

color:#333;

}





@media(max-width:650px){


.client-stats {

flex-direction:column;

}



.stat-box {

width:100%;

}


}


/* =====================================
   CLIENT PROFILE PAGE
===================================== */


.profile-container {

    max-width:900px;

    margin:auto;

    padding:20px;

}




/* PROFILE HEADER */

.profile-top {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}



.profile-top h1 {

    margin:0;

    font-size:24px;

    font-weight:600;

}



.profile-date {

    display:block;

    margin-top:5px;

    color:#777;

    font-size:14px;

}





.back-button {


    background:#eeeeee;

    color:#333;

    padding:8px 15px;

    border-radius:6px;

}





/* PROFILE CARD */


.profile-card {

    background:white;

    border:1px solid #ddd;

    border-radius:10px;

    padding:20px;

}





.profile-card h2 {

    text-align:center;

    margin:0 0 20px;

    font-size:18px;

}





/* BEFORE AFTER SLIDER */


.comparison {

    position:relative;

    width:600px;

    max-width:100%;

    margin:auto;

    overflow:hidden;

    border-radius:8px;

}



.comparison img {

    display:block;

    width:100%;

    height:400px;

    object-fit:cover;

}





.before-photo {

    width:100%;

}





.after-image {


    position:absolute;

    top:0;

    left:0;

    width:50%;

    height:100%;

    overflow:hidden;


}




.after-photo {


    width:600px !important;

    max-width:none !important;

    height:400px;

    object-fit:cover;


}





.slider {


    position:absolute;

    bottom:15px;

    left:5%;

    width:90%;


}





.instruction {


    text-align:center;

    color:#777;

    font-size:13px;

    margin-top:12px;


}






/* SINGLE PHOTO */


.single-photo-area {


    text-align:center;


}




.single-photo {


    width:400px;

    max-width:100%;

    border-radius:8px;

}



.pending-message {


    margin-top:15px;

    background:#fff3d9;

    color:#946300;

    padding:10px;

    border-radius:6px;

    font-size:14px;


}






/* ACTION BUTTONS */


.profile-actions {


    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:25px;


}



.edit-profile {


    background:#b9964a;

    color:white;

}



.back-profile {


    background:#eeeeee;

    color:#333;


}






/* MOBILE */


@media(max-width:700px){



.profile-top {


    flex-direction:column;

    align-items:flex-start;

    gap:15px;


}



.comparison img {


    height:280px;


}



.after-photo {


    height:280px;


}



.profile-actions {


    flex-direction:column;


}



.profile-actions button {


    width:100%;


}



}





/* =====================================
   EDIT CLIENT PAGE
===================================== */


.edit-container {

    max-width:850px;

    margin:auto;

    padding:20px;

}




.edit-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}



.edit-header h1 {

    margin:0;

    font-size:24px;

    font-weight:600;

}






/* EDIT CARD */


.edit-card {

    background:white;

    border:1px solid #ddd;

    border-radius:10px;

    padding:20px;

}






/* FORM SECTIONS */


.form-section,
.photo-section {


    border-bottom:1px solid #eee;

    padding-bottom:20px;

    margin-bottom:20px;


}



.form-section h3,
.photo-section h3 {


    margin-top:0;

    margin-bottom:15px;

    font-size:17px;


}





label {


    display:block;

    font-size:13px;

    color:#555;

    margin-bottom:6px;

}





input[type="text"],
input[type="date"] {


    width:100%;

    max-width:400px;

    padding:10px;

    border:1px solid #ccc;

    border-radius:6px;

    font-size:14px;

    margin-bottom:15px;


}





input[type="file"] {


    margin-top:8px;

    font-size:13px;


}







/* PHOTOS */


.edit-photo {


    width:160px;

    height:160px;

    object-fit:cover;

    border-radius:8px;

    border:1px solid #ddd;

    display:block;

    margin-bottom:15px;


}




.preview-photo {


    width:160px;

    height:160px;

    object-fit:cover;

    border-radius:8px;

    border:1px solid #b9964a;

    margin-top:15px;


}




.missing {


    color:#999;

    font-size:13px;

}






/* ACTION BUTTONS */


.edit-actions {


    display:flex;

    gap:10px;

    justify-content:flex-end;

    margin-top:20px;


}



.save-button {


    background:#b9964a;

    color:white;


}



.save-button:hover {


    background:#a3833e;


}



.cancel-button {


    background:#eeeeee;

    color:#333;


}






/* MOBILE */


@media(max-width:700px){



.edit-header {


    flex-direction:column;

    align-items:flex-start;

    gap:15px;


}



.edit-actions {


    flex-direction:column;


}



.edit-actions button {


    width:100%;


}



.edit-photo,
.preview-photo {


    width:130px;

    height:130px;


}


}


select {

    width:100%;

    max-width:400px;

    padding:10px;

    border:1px solid #ccc;

    border-radius:6px;

    font-size:14px;

    margin-bottom:15px;

    background:white;

}

.client-service {

    font-size:13px;

    color:#666;

}

.filters {

    display:flex;

    gap:10px;

    margin-bottom:15px;

}



.service-filter {

    padding:10px 12px;

    border:1px solid #ddd;

    border-radius:6px;

    font-size:14px;

    background:white;

}



@media(max-width:650px){


.filters {

    flex-direction:column;

}



.service-filter,
.search-box {

    width:100%;

}


}