:root{
--primary:#33691e;
--bg:#f0f4c3;
--card:#ffffff;
--text:#222;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

body{
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}

/* ================= TOP BAR ================= */

.top-bar {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 48px;

display:flex;

justify-content:space-between;

align-items:center;

background:#f0f4c3;

padding:0 12px;

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

z-index:1000;

}

.user-name {

font-weight:600;

font-size:14px;

color:#333;

}

.top-bar-actions{
display:flex;
gap:8px;
}

.hidden{
display:none;
}

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

.app-header {

position: fixed;

top: 48px;

left: 0;

width: 100%;

height: 64px;

background:#33691e;

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 2px 10px rgba(0,0,0,0.15);

z-index:999;

}

/* контент внутри */

.header-content{

display:flex;

align-items:center;

gap:10px;

}

/* логотип */

.logo-img{

width:28px;

height:28px;

object-fit:contain;

}

/* заголовок */

.app-header h1{

font-size:17px;

font-weight:600;

color:white;

letter-spacing:0.3px;

}

/* ================= MAIN ================= */

main{

padding:140px 12px 90px 12px;

max-width:600px;

margin:auto;

width:100%;
}

/* ================= MENU ================= */

.menu-grid{

max-width:500px;

margin:0 auto;

display:flex;

flex-direction:column;

gap:12px;

}

/* карточка пункта */

.menu-item{

background:#fffdf2;

border-radius:14px;

padding:16px 18px;

display:flex;

align-items:center;

gap:14px;

font-size:16px;

font-weight:500;

box-shadow:0 3px 8px rgba(0,0,0,0.08);

cursor:pointer;

transition:all 0.15s ease;

}

/* иконка */

.menu-item .icon{

font-size:22px;

width:28px;

text-align:center;

}

/* стрелка справа */

.menu-item::after{

content:"";

margin-left:auto;

width:10px;

height:10px;

border-right:2px solid #777;

border-top:2px solid #777;

transform:rotate(45deg);

}

/* hover */

.menu-item:hover{

background:#f7f5e6;

}

/* нажатие */

.menu-item:active{

transform:scale(0.98);

}

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

button{

background:var(--primary);

border:none;

color:white;

padding:7px 12px;

border-radius:8px;

font-size:13px;

cursor:pointer;

transition:.15s;
}

button:hover{
opacity:.9;
}

.btn-secondary{

background:#e0e0e0;

color:black;
}

/* ================= REPORT TABLE ================= */

.report-table{

margin-top:10px;

background:white;

border-radius:10px;

overflow:hidden;

box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.report-head{

display:flex;

justify-content:space-between;

padding:8px;

background:#e8f5e9;

font-weight:600;

font-size:13px;
}

.report-row{

display:flex;

justify-content:space-between;

padding:8px;

border-bottom:1px solid #eee;

font-size:13px;
}

.report-row.manager{

background:#f4fbe9;

font-weight:700;
}

.report-row.child{

padding-left:18px;
}

.report-sum{

min-width:80px;

text-align:right;
}

/* ================= BOTTOM NAV ================= */

.bottom-nav{

position:fixed;

bottom:0;

left:0;

width:100%;

height:64px;

background:var(--primary);

display:flex;

justify-content:space-around;

align-items:center;

z-index:1000;
}

.bottom-btn{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:3px;

width:33%;

font-size:11px;

color:#e8f5e9;

background:none;

border:none;

transition:.15s;
}

.bottom-btn:active{
transform:scale(.9);
}

.bottom-btn svg{

width:22px;

height:22px;

stroke:#e8f5e9;
}

/* ================= ACTIVE BUTTON ================= */

.bottom-btn.active{

color:white;

font-weight:600;
}

.bottom-btn.active svg{

stroke:white;
}

/* ================= BADGE ================= */

.badge{

position:absolute;

top:10px;

right:32%;

background:#ff3b30;

color:white;

font-size:10px;

border-radius:10px;

padding:2px 5px;

font-weight:600;
}

/* ================= MODAL ================= */

.modal-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.4);

display:flex;

justify-content:center;
align-items:center;

z-index:2000;
}

.modal-window{

background:white;

border-radius:12px;

padding:18px;

width:92%;
max-width:420px;

display:flex;

flex-direction:column;

gap:10px;

box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.modal-window input,
.modal-window select{

padding:10px;

border-radius:8px;

border:1px solid #ccc;

font-size:14px;
}

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

.period-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.period-btn {
    flex: 1;

    background: #ffffff;          /* чистый фон */
    color: #333333;               /* читаемый текст */

    border: 1px solid #dcdcdc;
    border-radius: 8px;

    padding: 8px;

    font-size: 13px;
    font-weight: 500;

    cursor: pointer;

    transition: all 0.2s ease;
}

/* hover (для ПК) */
.period-btn:hover {
    background: #f5f5f5;
}

/* активная кнопка */
.period-btn.active {
    background: #33691e;          /* твой основной зеленый */
    color: #ffffff;
    border-color: #33691e;

    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* нажатие */
.period-btn:active {
    transform: scale(0.96);
}

/* ================= ICON FIX (оставляем твой) ================= */

.menu-item .icon {
    width: 28px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== BADGE FIX (иконка сообщений) ===== */

.icon-wrapper {
    position: relative;
    display: inline-flex;
}

.icon-wrapper .nav-svg {
    width: 24px;
    height: 24px;
}

.badge {
    position: absolute;

    top: -6px;
    right: -8px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    background: #ff3b30;
    color: white;

    font-size: 11px;
    font-weight: 600;

    border-radius: 10px;

    display: none; /* ?? было flex */
    align-items: center;
    justify-content: center;
}

.badge:not(.hidden) {
    display: flex;
}

/* ===== ORDERS ===== */

.order-card {
    background: white;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 10px;
}

.order-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 14px;
}

.order-row .label {
    color: #777;
}

.order-row .value {
    font-weight: 600;
    text-align: right;
}

/* ===== ТОВАРЫ ===== */

.order-line {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    border-left: 4px solid #4CAF50;
}

.order-line-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 4px;
}

.order-line-row .label {
    color: #888;
}

.order-line-row .value {
    font-weight: 500;
    text-align: right;
}

/* ===== REAL TABLE (ORDERS) ===== */

.table-scroll {
    overflow-x: auto;
    width: 100%;
}

.table-scroll > .table-grid {
    min-width: max-content;
}
.table-scroll {
    background: white;
    border-radius: 10px;
}

.table-grid {
    display: grid;
    background: transparent;
    grid-template-columns:
        200px  /* Товар */
        80px   /* Заказано */
        60px   /* Ед */
        80px   /* Цена */
        180px  /* Комментарий */
        70px   /* Кол-во */
        60px   /* Ед */
        100px; /* Сумма */

    border-bottom: 1px solid #eee;
    background: white;
}
    border-bottom: 1px solid #eee;
    background: white;
}

.table-head {
    background: #e8f5e9;
    font-weight: 600;
}

.table-grid div {
    padding: 8px;
    font-size: 13px;
    border-right: 1px solid #eee;

    white-space: normal;
    word-break: break-word;
}

.table-grid div:last-child {
    border-right: none;
}

/* ===== RATING ===== */

.rating-block {
    background: white;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    margin-bottom: 12px;
}

.rating-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
    color: #33691e;
}

.rating-row {
    display: grid;
    grid-template-columns: 40px 1fr 70px;
    align-items: center;
    gap: 6px;

    padding: 8px;
    border-bottom: 1px solid #eee;

    font-size: 14px;
}

.rating-row:last-child {
    border-bottom: none;
}

.rating-pos {
    font-weight: 700;
    text-align: center;
}

.rating-name {
    font-weight: 500;
}

.rating-value {
    text-align: right;
    font-weight: 600;
}

/* ===== ТОП 3 ===== */

.rating-row.top {
    border-radius: 10px;
    margin-bottom: 6px;
}

.rating-row.top:nth-child(2) {
    background: linear-gradient(90deg, #fff8e1, #ffecb3);
}

.rating-row.top:nth-child(3) {
    background: linear-gradient(90deg, #eceff1, #cfd8dc);
}

.rating-row.top:nth-child(4) {
    background: linear-gradient(90deg, #fff3e0, #ffe0b2);
}

/* ===== ИТОГ МЕНЕДЖЕРА ===== */

..report-row.manager-total {
    font-weight: 600;
    background: #eef2f7;     /* холодный серо-голубой */
    border-top: 1px solid #d0d7de;
}
/* можно чуть сильнее выделить сумму */
.report-row.manager-total {
    font-weight: 600;        /* было 800 */
    background: #f1f3f5;     /* мягкий серый вместо зеленого */
    font-size: 13px;         /* чуть меньше текста */
}

#settingsBtn {
    cursor: pointer;
    font-size: 18px;
    padding: 6px 10px;
}
#settingsBtn {
    margin-left: auto; /* ?? КЛЮЧЕВОЕ */
    cursor: pointer;
    font-size: 18px;
    padding: 6px 10px;
}

#menuSettingsBtn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    padding: 6px 10px;
    cursor: pointer;
    opacity: 0.6;
    z-index: 10;
}

#menuSettingsBtn:hover {
    opacity: 1;
}