@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --ivory:#faf6ef;--ivory2:#f2ebe0;
  --brown:#2c1a0e;--brown2:#4a2e1a;--brown3:#1a0f07;
  --green:#2d5a3d;--green2:#3d7a52;--green3:#e8f0ea;
  --gold:#c49a3c;--gold2:#e8c068;
  --text:#1e1208;--muted:#7a6248;
  --border:rgba(44,26,14,0.1);--border2:rgba(44,26,14,0.06);
  --red:#b42020;--red-bg:rgba(180,32,32,0.06);
  --warn:#d4760a;--warn-bg:rgba(212,118,10,0.07);
  --new-bg:rgba(196,154,60,0.08);
  --done-bg:rgba(45,90,61,0.06);
  --sidebar:220px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;background:var(--ivory);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}

/* LOGIN */
.login-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.login-brand{background:var(--brown3);position:relative;display:flex;align-items:center;padding:80px 60px;overflow:hidden}
.login-brand::before{content:'Thuần Nhiên';position:absolute;left:-20px;bottom:-40px;font-family:'Cormorant Garamond',serif;font-size:10rem;font-weight:600;color:transparent;-webkit-text-stroke:1px rgba(196,154,60,0.07);white-space:nowrap;pointer-events:none}
.brand-content{position:relative;z-index:1}
.brand-content h2{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:300;color:white;line-height:1.15;margin-bottom:16px}
.brand-content h2 em{color:var(--gold2);font-style:italic}
.brand-content p{font-family:'Cormorant Garamond',serif;font-size:1rem;font-style:italic;color:rgba(255,255,255,0.35);line-height:1.65;border-left:2px solid rgba(196,154,60,0.25);padding-left:16px}
.login-form-side{background:var(--ivory);display:flex;align-items:center;justify-content:center;padding:40px;position:relative}
.login-form-side::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),var(--green),transparent)}
.login-card{width:100%;max-width:360px}
.login-eyebrow{font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.login-eyebrow::before{content:'';width:24px;height:1px;background:var(--gold)}
.login-card h1{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:300;color:var(--brown);margin-bottom:6px}
.login-card h1 em{font-style:italic;color:var(--green)}
.login-card .sub{font-size:0.72rem;color:var(--muted);font-style:italic;margin-bottom:36px}
.field{margin-bottom:18px}
.field label{display:block;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input{width:100%;padding:14px 16px;border:1.5px solid var(--border);font-family:'DM Sans',sans-serif;font-size:0.95rem;color:var(--text);background:white;outline:none;transition:border-color .2s}
.field input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(45,90,61,0.08)}
.err-box{font-size:0.78rem;color:var(--red);padding:10px 14px;background:var(--red-bg);border-left:3px solid var(--red);margin-bottom:14px;display:none}
.err-box.show{display:block}
.btn-login{width:100%;padding:14px;border:none;background:var(--green);color:white;font-family:'DM Sans',sans-serif;font-size:0.82rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;cursor:pointer;transition:background .2s;margin-top:8px}
.btn-login:hover{background:var(--green2)}
.btn-login:disabled{opacity:.5;cursor:not-allowed}
.setup-panel{display:none;margin-top:20px;padding:18px;background:rgba(196,154,60,0.06);border:1px solid rgba(196,154,60,0.2)}
.setup-panel.show{display:block}
.setup-panel .note{font-size:0.78rem;color:var(--brown2);font-style:italic;margin-bottom:14px;line-height:1.55}
.login-hint{margin-top:24px;font-size:0.72rem;color:var(--muted);font-style:italic;padding-top:18px;border-top:1px solid var(--border)}
@media(max-width:768px){.login-wrap{grid-template-columns:1fr}.login-brand{display:none}}

/* APP */
.app{display:none;min-height:100vh}
.app.show{display:flex}
.sidebar{width:var(--sidebar);background:var(--brown3);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;overflow-y:auto;z-index:100}
.sidebar::-webkit-scrollbar{width:0}
.sb-logo{padding:20px;border-bottom:1px solid rgba(196,154,60,0.06)}
.sb-logo .brand{font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:600;color:rgba(255,255,255,0.88);letter-spacing:0.08em;text-transform:uppercase;display:block}
.sb-logo .sub{font-size:8px;letter-spacing:0.12em;color:rgba(196,154,60,0.5);text-transform:uppercase;display:block;margin-top:2px}
.sb-nav{padding:12px 0;flex:1}
.sb-section{font-size:0.65rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.15);padding:12px 20px 4px}
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 20px;font-size:0.82rem;color:rgba(255,255,255,0.4);cursor:pointer;transition:all .2s;border-left:3px solid transparent;position:relative}
.sb-item:hover{color:rgba(255,255,255,0.65);background:rgba(255,255,255,0.02)}
.sb-item.active{color:var(--gold2);background:rgba(196,154,60,0.04);border-left-color:var(--gold);font-weight:500}
.sb-item .n{font-family:'Cormorant Garamond',serif;font-size:0.7rem;font-style:italic;opacity:.3;width:16px}
.sb-item .bdg{margin-left:auto;background:var(--red);color:#fff;font-size:0.65rem;font-weight:700;padding:1px 5px;border-radius:2px;display:none}
.sb-item .bdg.show{display:block}
.sb-user{padding:14px 20px;border-top:1px solid rgba(196,154,60,0.06);display:flex;align-items:center;gap:9px}
.sb-user .av{width:28px;height:28px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:#fff;flex-shrink:0}
.sb-user .meta{flex:1;overflow:hidden}
.sb-user .uname{font-size:0.72rem;color:rgba(255,255,255,0.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user .urole{font-size:0.65rem;color:rgba(196,154,60,0.35);letter-spacing:0.1em;text-transform:uppercase}
.sb-user .logout{margin-left:auto;font-size:14px;color:rgba(255,255,255,0.15);cursor:pointer;transition:color .2s;padding:4px}
.sb-user .logout:hover{color:var(--red)}
.sb-foot{padding:10px 20px;display:flex;align-items:center;gap:8px}
.sb-foot .dot{width:6px;height:6px;background:var(--green2);border-radius:50%;animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 6px rgba(45,90,61,0.4)}50%{box-shadow:0 0 14px rgba(45,90,61,0.6)}}
.sb-foot .lbl{font-size:0.65rem;color:rgba(255,255,255,0.2);letter-spacing:0.1em;text-transform:uppercase}

.main{margin-left:var(--sidebar);flex:1;padding:36px 40px 60px;min-height:100vh}
.page{display:none}.page.active{display:block}

/* EYEBROW */
.eyebrow{font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:10px}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--gold)}
.pg-title{font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:300;color:var(--brown);line-height:1.1;margin-bottom:12px}
.pg-title em{font-style:italic;color:var(--green)}

/* SUMMARY CARDS */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-bottom:28px}
.card{background:white;padding:24px;border:1px solid var(--border);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);transform:scaleY(0);transform-origin:bottom;transition:transform .3s}
.card:hover::before{transform:scaleY(1)}
.card:nth-child(2)::before{background:var(--gold)}
.card:nth-child(4)::before{background:var(--red)}
.card-label{font-size:0.7rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.card-val{font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:300;color:var(--brown);line-height:1}
.card-val.gold{color:var(--gold)}
.card-val .u{font-size:0.85rem;color:var(--muted)}
.card-sub{font-size:0.7rem;color:var(--muted);margin-top:6px;font-style:italic}

/* ORDERS */
.orders-box{background:white;border:1px solid var(--border);overflow:hidden}
.orders-head{padding:20px 24px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.orders-head h3{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:400;color:var(--brown)}
.orders-head h3 em{font-style:italic;color:var(--green)}
.search-wrap{position:relative;width:240px}
.search-wrap input{width:100%;padding:9px 12px 9px 32px;border:1.5px solid var(--border);font-family:'DM Sans',sans-serif;font-size:0.82rem;background:var(--ivory);outline:none;transition:border-color .2s}
.search-wrap input:focus{border-color:var(--green)}
.search-wrap .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;opacity:.5}
.tabs{display:flex;gap:24px;padding:12px 24px 0;border-bottom:1px solid var(--border)}
.tab{display:flex;align-items:center;gap:7px;padding-bottom:12px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;margin-bottom:-1px}
.tab.active{border-bottom-color:var(--green)}
.tab .dot{width:7px;height:7px;border-radius:50%}
.tab .ct{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:300;line-height:1}
.tab .lb{font-size:0.75rem;color:var(--muted)}
.tab.active .lb{color:var(--brown);font-weight:500}
.tab[data-t=all] .dot{display:none}.tab[data-t=all] .ct{font-weight:600;color:var(--brown)}
.tab[data-t=new] .dot{background:var(--gold)}.tab[data-t=new] .ct{color:var(--gold)}
.tab[data-t=warn] .dot{background:var(--warn)}.tab[data-t=warn] .ct{color:var(--warn)}
.tab[data-t=overdue] .dot{background:var(--red);box-shadow:0 0 6px rgba(180,32,32,.5)}.tab[data-t=overdue] .ct{color:var(--red);font-weight:600}
.tab[data-t=done] .dot{background:var(--green)}.tab[data-t=done] .ct{color:var(--green)}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);padding:12px 14px;text-align:left;background:var(--ivory2);border-bottom:1px solid var(--border)}
thead th:first-child{padding-left:24px}
tbody tr{border-bottom:1px solid var(--border2);transition:background .15s}
tbody tr:hover{background:rgba(45,90,61,0.01)}
tbody tr[data-s=overdue]{background:rgba(180,32,32,0.015)}
tbody td{padding:16px 14px;vertical-align:top;font-size:0.84rem}
tbody td:first-child{padding-left:24px}
.time-col{display:flex;flex-direction:column;gap:4px}
.time-val{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.1rem;color:var(--brown)}
.time-tag{font-size:0.68rem;font-weight:700;padding:2px 8px;display:inline-block;letter-spacing:0.04em}
.tag-ok{background:var(--new-bg);color:var(--gold)}
.tag-w{background:var(--warn-bg);color:var(--warn)}
.tag-o{background:var(--red-bg);color:var(--red)}
.tag-c{background:var(--red);color:#fff;animation:flash .7s ease-in-out infinite}
@keyframes flash{0%,100%{opacity:1}50%{opacity:.2}}
.order-id{font-size:0.72rem;color:var(--muted);font-family:'Cormorant Garamond',serif;font-style:italic}
.src-tag{font-size:0.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:1px 5px;background:rgba(45,90,61,0.08);color:var(--green);display:inline-block;margin-top:2px}
.branch-tag{font-size:0.68rem;font-weight:700;text-transform:uppercase;color:var(--muted);background:var(--ivory2);padding:1px 6px;display:inline-block;margin-top:2px;letter-spacing:.06em}
.cust-name{font-weight:600;color:var(--brown);margin-bottom:2px}
.cust-phone{font-size:0.72rem;color:var(--gold);font-weight:500}
.cust-addr{font-size:0.7rem;color:var(--muted);margin-top:3px;max-width:160px;line-height:1.4;font-style:italic}
.items-col{min-width:240px}
.item-row{display:flex;align-items:flex-start;gap:8px;padding:3px 0}
.item-row+.item-row{border-top:1px solid var(--border2);margin-top:4px;padding-top:7px}
.item-qty{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--green);min-width:22px;text-align:center;flex-shrink:0}
.item-name{font-weight:500;font-size:0.8rem;color:var(--brown);flex:1}
.item-extra{font-size:0.68rem;color:var(--muted);font-style:italic}
.item-price{font-family:'Cormorant Garamond',serif;font-size:0.85rem;color:var(--muted);white-space:nowrap;flex-shrink:0}
.money-col{text-align:right;white-space:nowrap;min-width:100px}
.money-sub{font-weight:500;color:var(--brown2);font-size:0.8rem}
.money-vat{font-size:0.72rem;color:var(--muted);font-style:italic;margin-top:2px}
.money-tot{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--green);font-size:1.2rem;margin-top:4px}
.status-badge{display:inline-flex;align-items:center;gap:4px;font-size:0.72rem;font-weight:600;padding:4px 0;width:84px;justify-content:center}
.s-new{background:var(--new-bg);color:var(--gold)}
.s-warn{background:var(--warn-bg);color:var(--warn)}
.s-over{background:var(--red-bg);color:var(--red);animation:flash .7s ease-in-out infinite}
.s-done{background:var(--done-bg);color:var(--green)}
.btn-done{padding:7px 14px;border:none;background:var(--green);color:white;font-family:'DM Sans',sans-serif;font-size:0.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.btn-done:hover{background:var(--green2)}
.empty{padding:40px;text-align:center;color:var(--muted)}
.empty .icon{font-size:2rem;opacity:.25;margin-bottom:10px}
/* ── Top bar & filters ── */
.top-bar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px;gap:16px}
.top-bar > div:first-child{flex:1;min-width:0}
.tfs{display:flex;gap:3px;margin-top:10px}
.tf{padding:5px 13px;border:1px solid var(--border);background:white;border-radius:4px;font-family:'DM Sans',sans-serif;font-size:0.72rem;font-weight:500;color:var(--muted);cursor:pointer;transition:all .18s;letter-spacing:.02em}
.tf:hover{border-color:rgba(44,26,14,0.25);color:var(--brown)}
.tf.active{background:var(--brown);border-color:var(--brown);color:white;font-weight:600}
.right-tools{display:flex;align-items:center;gap:8px;flex-shrink:0;padding-top:4px}
.branch-sel{padding:7px 28px 7px 11px;border:1px solid var(--border);border-radius:4px;font-family:'DM Sans',sans-serif;font-size:0.78rem;color:var(--brown);background:white;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a6248' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;display:none;transition:border-color .18s;height:32px}
.branch-sel:hover,.branch-sel:focus{border-color:rgba(44,26,14,.3)}
.live-dot{display:flex;align-items:center;gap:5px;font-size:0.65rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:.7}
.live-dot span{width:6px;height:6px;background:var(--green2);border-radius:50%;animation:pulse 2.5s ease-in-out infinite;flex-shrink:0}
.refresh-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:4px;background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;transition:all .18s;flex-shrink:0}
.refresh-btn:hover{border-color:var(--green);color:var(--green)}
.refresh-btn.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* SETTINGS */
.section-box{background:white;border:1px solid var(--border);padding:28px;margin-bottom:18px}
.section-box h3{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:400;color:var(--brown);margin-bottom:8px}
.section-desc{font-size:0.75rem;color:var(--muted);font-style:italic;line-height:1.55;border-left:2px solid var(--border);padding-left:10px;margin-bottom:20px}
.staff-table{width:100%;border-collapse:collapse;margin-bottom:14px}
.staff-table thead th{font-size:0.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:9px 12px;text-align:left;background:var(--ivory2);border-bottom:1px solid var(--border)}
.staff-table tbody tr{border-bottom:1px solid var(--border2)}
.staff-table tbody td{padding:12px;font-size:0.82rem;color:var(--brown);vertical-align:middle}
.role-badge{font-size:0.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px}
.role-a{background:var(--new-bg);color:var(--gold);border:1px solid rgba(196,154,60,.2)}
.role-c{background:var(--green3);color:var(--green);border:1px solid rgba(45,90,61,.15)}
.add-form{background:var(--ivory2);border:1px solid var(--border);padding:18px;margin-top:12px;display:none}
.add-form.show{display:block}
.form-row{display:flex;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.form-field{flex:1;min-width:150px}
.form-field label{display:block;font-size:0.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.form-field input,.form-field select{width:100%;padding:9px 10px;border:1.5px solid var(--border);font-family:'DM Sans',sans-serif;font-size:0.84rem;color:var(--text);background:white;outline:none;transition:border-color .2s;appearance:none}
.form-field input:focus,.form-field select:focus{border-color:var(--green)}
.btn-primary{padding:9px 18px;border:none;background:var(--green);color:white;font-family:'DM Sans',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.btn-primary:hover{background:var(--green2)}
.btn-secondary{padding:8px 14px;border:1px solid var(--border);background:white;color:var(--brown);font-family:'DM Sans',sans-serif;font-size:0.75rem;cursor:pointer;transition:all .2s}
.btn-danger{border-color:rgba(180,32,32,.2);color:var(--red)}
.btn-danger:hover{background:var(--red-bg)}

/* PLACEHOLDER PAGES */
.placeholder-page{padding:60px 0;color:var(--muted);font-style:italic}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;padding:11px 20px;font-size:0.82rem;font-weight:500;color:white;background:var(--brown);border-left:3px solid var(--gold);opacity:0;transform:translateY(8px);transition:all .3s;pointer-events:none;z-index:9999}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{background:var(--green);border-left-color:rgba(255,255,255,.3)}
.toast.err{background:var(--red);border-left-color:rgba(255,255,255,.3)}

@keyframes revealUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}