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

:root {
    --color-primary:#7380ec;
    --color-secondary:#595e89;
    --color-danger:#ff7782;
    --color-success:#4caf50;/*/#41f1b6*/
    --color-warning:#ffbb55;
    --color-white:#fff;
    --color-red:#f00;
    --color-info-dark:#7d8da1;
    --color-info-light:#dce1eb;
    --color-dark:#23242a;
    --color-light:rgba(132,139,200,0.18);
    --color-primary-variant:#111e88;
    --color-dark-variant:#677483;
    --color-background:#f6f6f9;
    --color-option:#ddd;
    --color-option-active:#999;
    --border-radius-0:0.2rem;
    --border-radius-1:0.4rem;
    --border-radius-2:0.8rem;
    --border-radius-3:1.2rem;
    --card-border-radius:2rem;
    --card-padding:1.8rem;
    --padding-1:1.2rem;
    --box-shadow:0 2rem 3rem var(--color-light);
    --scrollbar-width: calc(100vw - 100%);
    --btn-opacity:1;
}

.dark-theme-variables{
    --color-background:#181a1e;
    --color-white:#202528;
    --color-dark:#edeffd;
    --color-dark-variant:#a3bdcc;
    --color-light:rgba(0,0,0,0.4);
    --color-option:#999;
    --color-option-active:#666;
    --box-shadow:0 2rem 3rem var(--color-light);
    --btn-opacity:0.8;
}

* {margin:0;padding:0;outline:0;border:0;list-style:none;box-sizing:border-box;}
html {font-size:16px;line-height:1.5rem;}
body {width:100%;display:flex;flex-direction:column;min-height:100vh;font-family:"Poppins",sans-serif;font-size:0.88rem;background:var(--color-background);overflow-x:hidden;color:var(--color-dark);margin:0;padding:0;}
html, body {height:100%;}
body > header, body > #title {flex-shrink:0;}

p {color:var(--color-dark-variant);}
b {color:var(--color-dark);}
a {color:var(--color-dark);text-decoration:none;}
h1 {font-weight:800;font-size:1.95rem;letter-spacing:-2%;line-height:2rem;}
h2 {font-size:1.5625rem;letter-spacing:-1.5%;line-height:1.75rem;}
h3 {font-size:1.25rem;letter-spacing:-0.5%;line-height:1.5rem}
h4 {font-size:1rem;font-weight:600;line-height:1.25rem}
h5 {font-size:0.75rem;line-height:1.4rem}
h6 {font-size:0.5rem;line-height:1.5rem}
small {font-size:0.75rem;}

header {display:flex;position:sticky;left:0;top:0;width:100%;height:2.5rem;padding:0 2rem;background:var(--color-background);z-index:7;gap:1.8rem;box-shadow:0 0.5rem 1rem var(--color-light);border-bottom:1px solid var(--color-light);}
header div {display:flex;align-items:center;}
header div a {display:inline-block;padding:0.4rem 0;transition:all 250ms ease;}
header div a:hover {padding-top:0.25rem;text-shadow:0 0.4rem 0.25rem var(--color-dark-variant);font-weight:500;}
header div a.active {font-weight:500;}

section {width:100%;margin:0 auto;padding:0;flex:1;}
section img {max-width:450px;width:66%;margin:0 auto;}
section .logo {text-align:center;margin-top:4rem;width:100%;}
section .logo img {min-width:220px;max-width:450px;width:66%;}
section .block {width:100%;max-width:1000px;padding:1rem 2rem;text-align:center;margin:0 auto;}
section .public {width:100%;margin:0 auto;padding:1rem 0;}
section .public .view {max-width:1000px;width:100%;display:flex;flex-direction:row;justify-content:space-evenly;margin:0 auto;align-items:center;padding:1rem 0;}
section .public .view div {text-align:center;padding:1rem 4rem;max-width:600px;width:100%;margin:0 auto;}
section .public .view img {max-width:450px;width:100%;transition:all 250ms ease;}
section .public .view img:hover {transform: scale(1.1, 1.1);}

footer {width:100%;background-color:var(--color-light);padding:1rem 2rem;margin-top:auto;/* footer always at bottom */}
footer .block {width:100%;text-align:center;}

#title {position:fixed;top:0;left:0;width:100%;text-align:center;z-index:9;padding-top:0.4rem;font-size:1.5625rem;letter-spacing:-1.5%;line-height:1.75rem;font-weight:700;pointer-events:none;}
#title img {display:none;}

.white {background-color:var(--color-white);}
.light {background-color:var(--color-background);}

.text-muted{color:var(--color-info-dark)}
.primary{color:var(--color-primary)}
.danger{color:var(--color-danger)}
.success{color:var(--color-success)}
.warning{color:var(--color-warning)}
.colred{color:var(--color-red)}
.clickable{cursor:pointer;}

.txtlow {text-transform:lowercase;}

.top-1 {padding-top:0.5rem}
.top-2 {padding-top:1rem}
.top-3 {padding-top:1.5rem}
.top-4 {padding-top:2rem}
.top-5 {padding-top:2.5rem}
.top-6 {padding-top:3rem}
.top-7 {padding-top:4rem}
.top-8 {padding-top:5rem}

table {text-align:left;width:100%;border-collapse:collapse;}
.regtable {margin-top: 1.5rem;}
.regtable td {padding:0.15rem 0;}
.regtable td:first-child {font-weight:bold;} /* Center label above input */
.regtable td input, .regtable td select {width:100%;padding:0.4rem;box-sizing:border-box;} /* Make input fields full width */

input,select,textarea {width:100%;font-size:1rem;margin-bottom:0.5rem;padding:0.1rem;border:1px solid var(--color-light);color:var(--color-dark);background-color:var(--color-light);border-radius:var(--border-radius-0);}
.input-error {border:2px solid red !important;box-shadow:0 0 5px red;}


.hide {display:none !important;}


/* buttons */
    button {cursor:pointer;border:1px solid #4d4d4d;border-radius:0.25rem;box-shadow:0 1px 3px #000;transition:all 150ms ease;}
    button:hover {opacity:var(--btn-opacity);box-shadow:0 2px 3px #000;}
    button:active, button.active {box-shadow:0 1px 3px #000 inset;}
    button:disabled, button.disabled {opacity:0.4;cursor:not-allowed;}

    .btnPri {font-size:1rem;margin-top:0.5rem;padding:0.75rem 1.5rem;font-weight:700;background-color:var(--color-primary);color:#000;}
    .btnPri:active, .btnPri.active {font-weight:700;background-color:var(--color-secondary);}
    .btnSec {font-size:1rem;margin-top:0.5rem;padding:0.75rem 1.5rem;font-weight:700;background-color:var(--color-option);border-color:var(--color-primary);color:var(--color-primary);}
    .btnSec:active, .btnSec.active {font-weight:700;border-color:var(--color-secondary);color:var(--color-secondary);}
    .btnTri {font-size:1rem;margin-top:0.5rem;padding:0.75rem 1.5rem;font-weight:700;background-color:var(--color-option);border-color:var(--color-active);color:var(--color-active);}
    .btnTri:active, .btnTri.active {font-weight:700;border-color:var(--color-active);color:var(--color-active);}
    .btnDel {font-size:1rem;margin-top:0.5rem;padding:0.75rem 1.5rem;font-weight:700;background-color:var(--color-primary);border-color:var(--color-secondary);color:#000;}
    .btnOpt {font-size:1rem;margin:0.25rem;padding:0.25rem 0.5rem;background-color:var(--color-option);min-width:3rem;color:#000;}
    .btnOpt:active, .btnOpt.active {background-color:var(--color-option-active);color:#fff}
/* end: buttons */

/* password validation */
    .pw-rules .rule {color:#999;font-size:0.85rem;line-height:0.9rem;}
    .pw-rules .rule.ok {color:#0a0;font-weight:bold;}
    .pw-rules .rule.bad {color:#c00;}
/* end: password validation */

/* loader */
    .loaderContainer {width:100%;text-align:center;}
    .loader {display:inline-flex;gap:0.08em;font-size:1.2rem;font-weight:600;user-select:none;}
    .loader span {display:inline-block;animation:loader-bounce 0.6s ease-in-out infinite;transform-origin:center;}
    .loader span:nth-child(1) { animation-delay: 0s;   }
    .loader span:nth-child(2) { animation-delay: 0.1s; }
    .loader span:nth-child(3) { animation-delay: 0.2s; }
    .loader span:nth-child(4) { animation-delay: 0.3s; }
    .loader span:nth-child(5) { animation-delay: 0.4s; }
    .loader span:nth-child(6) { animation-delay: 0.5s; }
    .loader span:nth-child(7) { animation-delay: 0.6s; }
    .loader span:nth-child(8) { animation-delay: 0.7s; }
    .loader span:nth-child(9) { animation-delay: 0.8s; }
    .loader span:nth-child(10){ animation-delay: 0.9s; }

    @keyframes loader-bounce {
        0%, 100% { transform: scale(1); }
        50%      { transform: scale(1.35); }
    }
/* end: loader */

/* registration progress bar */
    #progressbar {display:flex;justify-content:space-between;gap:0.25rem;}
    #progressbar .step {flex:1;padding:0;background:#e0e0e0;color:#555;text-align:center;font-size:0.85rem;font-weight:bold;border-radius:6px;transition:0.3s;}
    #progressbar .step.active {background:var(--color-primary);color:var(--color-white);} /* Active step (current page) */
    #progressbar .step.done {background:var(--color-success);color:var(--color-white);} /* Completed steps, if you want them */
/* end: registration progress bar */

@media screen and (max-width: 1000px){
    #title {text-align:right;padding-right:2rem;}
}

@media screen and (max-width: 800px){
    section .public .view {flex-direction:column;}
}

@media (max-width: 600px){
    .regtable, .regtable tr, .regtable td, .regtable tbody {display:block;width:100%;} /* Remove table layout */
    .regtable tr {margin-top:0.75rem;} /* Make each row act like a card */
    .regtable td:first-child {text-align:center;margin-bottom:0.4rem;} /* Center label above input */
    .regtable td input, .regtable td select {padding:0.7rem;} /* Make input fields full width */
    .regtable td:has(.btnOpt) {display:flex;width:100%;gap:0.5rem;padding-top:0.5rem;} /* Make the <td> holding the buttons a flex container */
    .regtable td:has(.btnOpt) .btnOpt {flex:1;margin:0;text-align:center;padding:0.75rem;} /* Buttons share equal space horizontally */
}

@media screen and (max-width: 500px){
    #title {text-align:right;padding-right:2rem;}
    #title img {display:inline-block;vertical-align:middle;}
    #title #name {display:none;}
}

@media (max-width: 300px) {
    td:has(.btnOpt) {flex-direction:column;gap:0.5rem;} /* stack */
    td:has(.btnOpt) .btnOpt {width:100%;flex:none;} /* full width per line */
}

/* ------------------------------------- * /

.container{display:grid;width:100vw;margin:0 0 1.5rem 0;gap:1.8rem;grid-template-columns:14rem auto 23rem;}

#header {display:flex;position:sticky;left:0;top:0;width:calc(100vw - 1rem);height:2.5rem;background:var(--color-background);z-index:9;gap:1.8rem;box-shadow:0 0.5rem 1rem var(--color-light);border-bottom:1px solid var(--color-light);}
#header div {display:flex;align-items:center;}
#header .pageid {flex-grow:1;}
#header .pageid .logo {gap:0.8rem;margin-left:2rem;}
#header .pageid .logo img {width:auto;height:2rem;}
#header .topmenu {justify-content:start;gap:2rem;padding-left:1.3rem;}
#header .useract {justify-content:end;gap:2rem;margin-right:1.4rem;}
#header .useract button {display:none;}
#header .useract .profile {gap:2rem;text-align:right;}
#header .useract .theme-toggler {background:var(--color-light);justify-content:space-between;align-items:center;height:1.6rem;width:4.2rem;cursor:pointer;border-radius:var(--border-radius-1);}
#header .useract .theme-toggler span {font-size:1.2rem;width:50%;height:100%;align-items:center;justify-content:center;}
#header .useract .theme-toggler span.active {background:var(--color-primary);color:white;border-radius:var(--border-radius-1);}
.headroom {transition:all 250ms ease}
.headroom:hover {padding-top:0.4rem;text-shadow:0 0.4rem 0.25rem var(--color-dark-variant);font-weight:500;}



.profile-photo{width:2.8rem;height:2.8rem;border-radius:50%;overflow:hidden}
.text-muted{color:var(--color-info-dark)}
.hiddentext {height:1px;color:#0000}
.primary{color:var(--color-primary)}
.danger{color:var(--color-danger)}
.success{color:var(--color-success)}
.warning{color:var(--color-warning)}
.colred{color:var(--color-red)}
.clickable{cursor:pointer;}

.txtctr{width:100%;text-align:center;}
.txtlhs{width:100%;text-align:left;}

.top-1 {padding-top:1rem}
.top-2 {padding-top:2rem}
.top-3 {padding-top:3rem}
.top-4 {padding-top:4rem}
.top-5 {padding-top:5rem}
.top-6 {padding-top:6rem}
.top-7 {padding-top:7rem}
.top-8 {padding-top:8rem}

.fs11 {font-size:1.1rem;}
.fs12 {font-size:1.2rem;}
.fs13 {font-size:1.3rem;}
.fs14 {font-size:1.4rem;}
.fs15 {font-size:1.5rem;}

.h16 {height:16px;}
.h32 {height:32px;}
.h64 {height:64px;}

.w100p {width:100%;}



    .basicweb {max-width:600px;width:100%;margin:0 auto;}
    #formlogin {background-color:var(--color-white);border:1px solid var(--color-primary);border-radius:var(--border-radius-2);box-shadow:var(--box-shadow);transition:all 300ms ease;padding:1rem 0.5rem;}
    #formlogin:hover {box-shadow:none;}

.formtable {margin:0 auto;}
.formtable input {font-size:1.1rem;margin-bottom:0.6rem;padding:0.1rem;border:1px solid var(--color-light);color:var(--color-dark);background-color:var(--color-light);border-radius:var(--border-radius-0);}
.formtable select {font-size:1.1rem;margin-bottom:0.6rem;padding:0.1rem}

.forminput input{padding:0.5rem 1rem;background-color:var(--color-white);color:var(--color-dark-variant);border:1px solid var(--color-light);}
.forminput button {display:inline-block;background:transparent;cursor:pointer;color:var(--color-dark);border:1px solid var(--color-dark-variant);border-radius:var(--border-radius-1);padding:0.4rem 0.6rem;background:var(--color-light);transition:all 250ms ease;}
.forminput button span{font-size:1.1rem;font-weight:600}
.forminput button:hover {background:var(--color-white);}

aside{height:100vh;}
aside h3{font-weight:500;}
aside .top{display:flex;align-items:center;justify-content:space-between;margin-top:1.4rem;}
aside .logo{display:flex;gap:0.8rem;margin-left:2rem;}
aside .logo img{width:2rem;height:2rem;}
aside .close{display:none;}
aside .sidebar{display:flex;flex-direction:column;height:86vh;position:relative;top:3rem;}
aside .sidebar a{display:flex;color:var(--color-info-dark);margin-left:2rem;gap:1rem;align-items:center;position:relative;height:3.7rem;transition:all 300ms ease;}
aside .sidebar a span{font-size:1.6rem;transition:all 250ms ease}
aside .sidebar a:last-child{margin-top:2rem}
aside .sidebar a.active{background:var(--color-light);color:var(--color-primary);margin-left:0;}
aside .sidebar a.active:before{content:"";width:6px;height:100%;background:var(--color-primary);}
aside .sidebar a.active span{color:var(--color-primary);margin-left:calc(1rem - 3px);}
aside .sidebar a:hover{color:var(--color-primary);}
aside .sidebar a:hover span{margin-left:1rem;}
aside .sidebar .message-count{background:var(--color-danger);color:var(--color-white);padding:2px 10px;font-size:11px;border-radius:var(--border-radius-1);}


    main {margin-top:4rem;margin-bottom:4rem;}
    main .date {display:inline-block;background:var(--color-light);border-radius:var(--border-radius-1);margin-top:1rem;padding:0.5rem 1.6rem;}
    main .date input[type='date'] {background:transparent;color:var(--color-dark)}
    main .insights h3 {margin:1rem 0 0.6rem;font-size:1rem;}
    main .insights {display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
    main .insights > div {background:var(--color-white);padding:var(--card-padding);border-radius:var(--card-border-radius);margin-top:1rem;box-shadow:var(--box-shadow);transition:all 300ms ease;}
    main .insights > div:hover {box-shadow:none;}
    main .insights > div span {background:var(--color-primary);padding:0.5rem;border-radius:50%;color:var(--color-white);font-size:2rem;}
    main .insights > div.expenses span{background:var(--color-danger);}
    main .insights > div.income span{background:var(--color-success);}
    main .insights > div .middle{display:flex;align-items:center;justify-content:space-between;}
    main .insights .progress{position:relative;width:92px;height:92px;border-radius:50%;}
    main .insights .progress .number{position:absolute;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center;}
    main .insights svg{width:7rem;height:7rem}
    main .insights svg circle{fill:none;stroke:var(--color-primary);stroke-width:14;stroke-linecap:round;transform:translate(5px,5px);stroke-dasharray:110;stroke-dashoffset:92;}
    main .insights .sales svg circle{stroke-dasharray:200;stroke-dashoffset:-30;}
    main .insights .expenses svg circle{stroke-dasharray:80;stroke-dashoffset:20;}
    main .insights .income svg circle{stroke-dasharray:110;stroke-dashoffset:35;}
    main .insights small{display:block;margin-top:1.3rem;}
    main .main-block{margin-top:2rem;}
    main .main-block a{text-align:center;display:block;margin:1rem auto;color:var(--color-primary)}
    main .main-block h3{margin-bottom:0.8rem;}

    main .main-block table{background:var(--color-white);width:100%;border-radius:var(--card-border-radius);padding:var(--card-padding);text-align:center;box-shadow:none;}
    main .main-block table:hover{box-shadow:var(--box-shadow);transition:all 300ms ease;}

    main table thead th {font-size:0.87rem;padding-bottom:1rem;}
    main table tbody td {height:2.8rem;border-bottom:1px solid var(--color-light);color:var(--color-dark-variant)}
    main table tbody tr:last-child td{border:none;}
    main table tbody tr:hover {background-color:var(--color-light)}
    main table tbody tr.nohighlight:hover {background-color:var(--color-white)}


.main-block .goback {display:flex;flex-direction:column;position:relative;}
.main-block .goback a {display:flex;color:var(--color-info-dark);margin-left:2rem;gap:0.8rem;align-items:center;position:relative;height:2.5rem;transition:all 300ms ease;}
.main-block .goback a h3{font-weight:500;font-size:1.1rem;padding-top:0.8rem}
.main-block .goback a span{font-size:1.8rem;transition:all 250ms ease;}
.main-block .goback a:hover{color:var(--color-primary);}
.main-block .goback a:hover span{margin-left:-1rem;}

.right{margin-top:1.4rem;margin-right:1.5rem}
.right .top{display:flex;justify-content:end;gap:2rem;}
.right .top button{display:none;}
.right .top .profile{display:flex;gap:2rem;text-align:right;margin-right:2rem}
.right .theme-toggler{background:var(--color-light);display:flex;justify-content:space-between;align-items:center;height:1.6rem;width:4.2rem;cursor:pointer;border-radius:var(--border-radius-1);}
.right .theme-toggler span{font-size:1.2rem;width:50%;height:100%;display:flex;align-items:center;justify-content:center;}
.right .theme-toggler span.active{background:var(--color-primary);color:white;border-radius:var(--border-radius-1);}
.right .recent-updates{margin-top:1rem}
.right .recent-updates h2{margin-bottom:0.8rem;}
.right .recent-updates .updates{background-color:var(--color-white);padding:var(--card-padding);border-radius:var(--card-border-radius);box-shadow:none;}
.right .recent-updates .updates:hover{box-shadow:var(--box-shadow);transition:all 300ms ease;}

.right .recent-updates .updates .update{display:grid;grid-template-columns:2.6rem auto;gap:1rem;margin-bottom:1rem;}

.right .recent-updates .updates .openshifts table {width:100%}
.right .recent-updates .updates .wopenshifts table {width:100%}

.right .sales-analytics {margin-top:2rem;}
.right .sales-analytics h2{margin-bottom:0.8rem;}
.right .sales-analytics .item{background:var(--color-white);display:flex;align-items:center;gap:1rem;margin-bottom:0.7rem;padding:1.4rem var(--card-padding);border-radius:var(--border-radius-3);box-shadow:var(--box-shadow);transition:all 300ms ease;}
.right .sales-analytics .item:hover{box-shadow:none;}
.right .sales-analytics .item .right{display:flex;justify-content:space-between;align-items:start;margin:0;width:100%;}
.right .sales-analytics .item .icon{padding:0.6rem;color:var(--color-white);border-radius:50%;background:var(--color-primary);display:flex;}
.right .sales-analytics .item.offline .icon{background:var(--color-danger);}
.right .sales-analytics .item.customers .icon{background:var(--color-success);}
.right .sales-analytics .add-product{background-color:transparent;border:2px dashed var(--color-primary);color:var(--color-primary);display:flex;align-items:center;justify-content:center;}
.right .sales-analytics .add-product:hover{background:var(--color-primary);color:white;}
.right .sales-analytics .add-product div{display:flex;align-items:center;gap:0.6rem}
.right .sales-analytics .add-product div h3{font-weight:600;}

.material-icons-sharp.md-12 { font-size: 12px; }
.material-icons-sharp.md-14 { font-size: 14px; }
.material-icons-sharp.md-18 { font-size: 18px; }
.material-icons-sharp.md-24 { font-size: 24px; }
.material-icons-sharp.md-36 { font-size: 36px; }
.material-icons-sharp.md-48 { font-size: 48px; }

/* star rating * /
    .star-rating{color: #bebebe; font-size:2em; }
    .my-star::before{content:"\002605";}
    .my-star{font-style: unset !important;}
    .is-active{color:#fb8900;}
    .my-star:not(.is-active):hover{color: #fb8900;}
/* end * /


/* loader * /
    .loader {margin: auto;border: 16px solid #f3f3f3;border-top: 16px solid var(--color-primary);border-radius: 50%;width: 45px;height: 45px;animation: spin 1.5s linear infinite;z-index:99999;}
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
/* loader end * /



@media screen and (max-width: 1200px){
    .container{width:94%;grid-template-columns:7rem auto 23rem;}
    aside .logo h2{display:none;}
    aside .sidebar h3{display:none;}
    aside .sidebar a{width:5.6rem;}
    aside .sidebar a:last-child{position:relative;margin-top:1.8rem;}
    main .insights{grid-template-columns:1fr;gap:0;}
    main .recent-orders{width:94%;position:absolute;left:50%;transform:translateX(-50%);margin:2rem 0 0 8.8rem}
    main .recent-orders table{width:83vw;}
    main table tbody tr td:first-child, main table tbody tr td:last-child{display:none;}
}



@media screen and (max-width: 800px){
    .container {width:100%;grid-template-columns:1fr;}
    aside {position:fixed;left:-100%;background:var(--color-white);width:18rem;z-index:3;box-shadow:1rem 3rem 4rem var(--color-light);height:100vh;padding-right:var(--card-padding);display:none;animation:showMenu 400ms ease forwards;}
    aside .logo{margin-left:1rem;}
    aside .logo h2{display:inline}
    aside .sidebar h3{display:inline;}
    aside .sidebar a{width:100%;height:3.4rem}
    aside .sidebar a:last-child{position:absolute;bottom:5rem}
    aside .close{display:inline-block;cursor:pointer;}
    @keyframes showMenu {
        to{
            left:0;
        }
    }
    main{margin-top:8rem;padding:0 1rem}
    main .recent-orders{position:relative;margin:3rem 0 0 0;width:100%;}
    main .recent-orders table{width:100%;margin:0;}
    .right{width:94%;margin:0 auto 4rem;}
    .right .top{position:fixed;top:0;left:0;align-items:center;padding:0 0.8rem;height:4.6rem;background:var(--color-white);width:100%;margin:0;z-index:2;box-shadow:0 1rem 1rem var(--color-light);}
    .right .top .theme-toggler{width:4.4rem;position:absolute;left:66%}
    .right .profile .info{display:none;}
    .right .top button{display:inline-block;background:transparent;cursor:pointer;color:var(--color-dark);position:absolute;left:1rem;}
    .right .top button span{font-size:2rem;} 


}


/* */