/* =====================================================
   TJ SALON
   Version 1.2.0
   PART 1
=====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* =====================================================
   RESET
=====================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#0F0F10;

    color:#ffffff;

    min-height:100vh;

}

/* =====================================================
   COLORS
=====================================================*/

:root{

    --bg:#0F0F10;

    --card:#1A1A1C;

    --card2:#242427;

    --gold:#D4AF37;

    --gold-light:#F5D67A;

    --white:#ffffff;

    --text:#d6d6d6;

    --muted:#8b8b8b;

    --border:#2f2f32;

    --radius:18px;

    --shadow:0 15px 35px rgba(0,0,0,.35);

}

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

button{

    border:none;

    cursor:pointer;

    font-family:inherit;

}

input,
select{

    width:100%;

    background:var(--card2);

    color:white;

    border:1px solid var(--border);

    border-radius:14px;

    padding:14px;

    font-size:15px;

    outline:none;

}

input:focus,
select:focus{

    border-color:var(--gold);

}

label{

    display:block;

    margin-bottom:8px;

    color:var(--muted);

    font-size:14px;

}

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

.login-wrapper{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.login-card{

    width:100%;

    max-width:420px;

    background:var(--card);

    border-radius:22px;

    padding:35px;

    box-shadow:var(--shadow);

    border:1px solid var(--border);

}

.logo-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    background:var(--gold);

    color:black;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    margin:auto;

    margin-bottom:25px;

}

.login-card h1{

    text-align:center;

    color:var(--gold);

    font-size:30px;

}

.login-card p{

    text-align:center;

    color:var(--muted);

    margin-top:10px;

    margin-bottom:35px;

}

.login-card small{

    display:block;

    text-align:center;

    margin-top:20px;

    color:var(--muted);

}

.form-group{

    margin-bottom:20px;

}

.btn-primary{

    width:100%;

    padding:15px;

    background:var(--gold);

    color:black;

    font-weight:700;

    border-radius:14px;

    font-size:16px;

    transition:.25s;

}

.btn-primary:hover{

    background:var(--gold-light);

}

/* =====================================================
APP
=====================================================*/

#app-screen{

    width:100%;

    max-width:430px;

    margin:auto;

    min-height:100vh;

    background:var(--bg);

}

.app-header{

    padding:25px 20px 10px;

}

.app-header h2{

    color:var(--gold);

    font-size:28px;

}

.app-header span{

    color:var(--muted);

    font-size:14px;

}

.main-container{

    padding:14px 20px 20px;

}

/* =====================================================
HOME
=====================================================*/

.hero-card{

    background:linear-gradient(135deg,#D4AF37,#C79612);

    color:black;

    border-radius:22px;

    padding:28px;

    margin-bottom:20px;

    box-shadow:var(--shadow);

}

.hero-card .card-label{

    font-size:15px;

    opacity:.8;

}

.hero-card h1{

    margin-top:10px;

    font-size:42px;

}

.small-card-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-bottom:20px;

}

.small-card{

    background:var(--card);

    border-radius:18px;

    padding:20px;

    border:1px solid var(--border);

}

.small-card span{

    color:var(--muted);

    font-size:13px;

}

.small-card h2{

    margin-top:10px;

    font-size:28px;

    color:var(--gold);

}

.new-entry-button{

    width:100%;

    padding:18px;

    border-radius:18px;

    background:var(--gold);

    color:black;

    font-size:18px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}
/* =====================================================
   PART 2
   NEW ENTRY
=====================================================*/

.page-title{

    font-size:20px;

    font-weight:700;

    color:var(--gold);

    margin-bottom:12px;

}

.entry-number{

    font-size:20px;

    font-weight:700;

    color:var(--gold);

    margin-bottom:10px;

}

.form-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:22px;

    padding:22px;

    box-shadow:var(--shadow);

}

.form-card .form-group{

    margin-bottom:22px;

}

.form-card input,
.form-card select{

    height:52px;

    font-size:16px;

}

#entryNo,
#entryDate,
#entryTime{

    background:transparent;

    color:var(--gold);

    font-weight:600;

     letter-spacing:.4px;

     white-space:nowrap;

}

#amount,
#finalAmount{

    font-size:24px;

    font-weight:700;

    color:var(--gold);

}

/* =====================================================
PAYMENT
=====================================================*/

.payment-options{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-top:8px;

}

.payment-item{

    background:var(--card2);

    border:1px solid var(--border);

    border-radius:14px;

    padding:14px 10px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    cursor:pointer;

    transition:.25s;

}

.payment-item:hover{

    border-color:var(--gold);

}

.payment-item input{

    width:auto;

    accent-color:var(--gold);

}

.payment-item span{

    color:white;

    font-size:14px;

    font-weight:500;

}

/* =====================================================
TODAY SCREEN
=====================================================*/

.list-container{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.today-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:18px;

    padding:18px;

    box-shadow:var(--shadow);

}

.today-time{

    color:var(--muted);

    font-size:13px;

}

.today-service{

    margin-top:8px;

    font-size:18px;

    font-weight:600;

}

.today-staff{

    margin-top:6px;

    color:var(--gold);

}

.today-price{

    margin-top:14px;

    font-size:24px;

    font-weight:700;

}

.empty-state{

    background:var(--card);

    border-radius:18px;

    padding:40px 20px;

    border:1px dashed var(--border);

    color:var(--muted);

    text-align:center;

}

/* =====================================================
REPORTS
=====================================================*/

.report-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:18px;

    padding:20px;

    margin-bottom:18px;

    box-shadow:var(--shadow);

}

.report-card span{

    color:var(--muted);

    font-size:14px;

}

.report-card h2{

    margin-top:12px;

    color:var(--gold);

    font-size:32px;

}

.report-list{

    list-style:none;

    margin-top:18px;

}

.report-list li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid var(--border);

}

.report-list li:last-child{

    border-bottom:none;

}

.report-list strong{

    color:var(--gold);

}

/* =====================================================
SETTINGS
=====================================================*/

.settings-list{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.settings-item{

    width:100%;

    background:var(--card);

    color:white;

    border:1px solid var(--border);

    border-radius:18px;

    padding:18px;

    text-align:left;

    font-size:16px;

    transition:.25s;

}

.settings-item:hover{

    border-color:var(--gold);

    color:var(--gold);

}

/* =====================================================
UTILITY
=====================================================*/

.screen{

    animation:fadeIn .25s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* =====================================================
   PART 3
   BOTTOM NAVIGATION
=====================================================*/

.bottom-nav{

    position:fixed;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    max-width:430px;

    height:78px;

    background:#171719;

    border-top:1px solid var(--border);

    display:flex;

    justify-content:space-around;

    align-items:center;

    z-index:999;

    box-shadow:0 -5px 25px rgba(0,0,0,.35);

}

.nav-item{

    flex:1;

    height:100%;

    background:none;

    border:none;

    color:var(--muted);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    transition:.25s;

}

.nav-item .material-icons{

    font-size:24px;

}

.nav-item small{

    font-size:11px;

    font-weight:500;

}

.nav-item.active{

    color:var(--gold);

}

.nav-item:hover{

    color:var(--gold-light);

}

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

.page-bottom-space{

    height:100px;

}

/* =====================================================
SCROLLBAR
=====================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}

/* =====================================================
TRANSITIONS
=====================================================*/

button,
input,
select{

    transition:.25s ease;

}

/* =====================================================
DESKTOP
=====================================================*/

@media (min-width:431px){

    body{

        display:flex;

        justify-content:center;

        background:#090909;

    }

    #app-screen{

        min-height:100vh;

        border-left:1px solid #202020;

        border-right:1px solid #202020;

    }

}

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

@media (max-width:430px){

    .login-card{

        padding:28px;

        border-radius:20px;

    }

    .hero-card h1{

        font-size:38px;

    }

    .small-card h2{

        font-size:24px;

    }

    .new-entry-button{

        height:60px;

        font-size:17px;

    }

    .page-title{

        font-size:24px;

    }

}

/* =====================================================
UTILITY
=====================================================*/

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.text-gold{

    color:var(--gold);

}

.text-muted{

    color:var(--muted);

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

/* =====================================================
END
=====================================================*/
/* =====================================
   TOAST
===================================== */

.toast{

    position:fixed;

    left:50%;

    bottom:90px;

    transform:translateX(-50%);

    background:#222;

    color:#fff;

    padding:14px 22px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    opacity:0;

    pointer-events:none;

    transition:.25s;

    z-index:9999;

    box-shadow:0 6px 20px rgba(0,0,0,.25);

}

.toast.show{

    opacity:1;

    bottom:105px;

}

/* =====================================
   ENTRY INFO CARD
===================================== */

.entry-info-card{

    display:flex;

    justify-content:space-between;

    gap:10px;

    background:#1e1e20;

    border:1px solid #34343a;

    border-radius:14px;

    padding:12px;

    margin-bottom:16px;

}

.info-item{

    flex:1;

    text-align:center;

}

.info-label{

    display:block;

    font-size:11px;

    color:#9a9a9a;

    margin-bottom:4px;

}

.info-value{

    display:block;

    font-size:14px;

    font-weight:600;

    color:#f4c430;

    line-height:1.3;

    background:transparent;

    padding:0;

    border:none;

    border-radius:0;

    box-shadow:none;

}

@media(max-width:480px){

    .entry-info-card{

        gap:6px;

        padding:10px 12px;
    }

    .info-value{

        font-size:15px;

    }

}
/* ======================================================
   TODAY SCREEN (Grouped by Staff)
====================================================== */

.today-summary{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    margin-bottom:18px;

    background:#ffffff;

    border-left:4px solid #d4af37;

    border-radius:12px;

    box-shadow:0 2px 6px rgba(0,0,0,.06);

}

.today-summary strong{

    font-size:18px;

    font-weight:600;

}

.today-summary div{

    color:#666;

    font-size:14px;

}

/* Staff Card */

.staff-card{

    background:#ffffff;

    border-radius:12px;

    margin-bottom:5px;

    padding:10px 14px;

    border-left:4px solid #d4af37;

    box-shadow:0 2px 6px rgba(0,0,0,.06);

    transition:.2s;

    cursor:pointer;

}

.staff-card:hover{

    transform:translateY(-2px);

}

/* Header */

.staff-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.staff-header strong{

     font-size:20px;

    font-weight:700;

    color:#222;

}

.staff-header div div{

    font-size:13px;

    color:#888;

    margin-top:2px;

}

.staff-header > div:last-child strong{

    font-size:22px;

    font-weight:700;

    color:#111;

}

/* Expand Arrow */

.expand-arrow{

    display:inline-block;

    margin-left:8px;

    font-size:18px;

    color:#999;

    transition:.25s;

}

/* Expanded Area */

.staff-services{

    margin-top:10px;

    border-top:1px solid #eeeeee;

    padding-top:8px;

}

/* Individual Service */

.service-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:7px 0;

    border-bottom:1px dashed #eeeeee;

    font-size:15px;

    color:#333;

}

.service-row span{

    color:#333;

}

.service-row strong{

    color:#111;

    font-weight:600;

}

.service-row:last-child{

    border-bottom:none;

}

/* Total */

.service-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:5px;

    padding-top:5px;

    border-top:2px solid #ddd;

    font-size:17px;

    font-weight:700;

}
.service-total span{

    color:#555;

}

.service-total strong{

    color:#111;

}

/* Mobile */

@media(max-width:480px){

    .today-summary{

        padding:15px;

    }

    .staff-card{

        padding:15px;

    }

    .staff-header strong{

        font-size:16px;

    }

   .service-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 0;

    border-bottom:1px dashed #ececec;

    font-size:15px;

}

}