*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--g900: #1a3326;--g800: #254d38;--g700: #2d6045;--g600: #3a7a58;--g500: #4a9470;--g300: #8ec9a8;--g50: #eef7f1;--warm: #fafaf7;--text: #1a2a1f;--muted: #5a7060;--border: #d4e6db;--red: #c0392b;--red-bg: #fdf0ef;--red-border: #f5c6c2;--yellow: #c8a84b;--yellow-bg: #fdf9ef}body{font-family:Plus Jakarta Sans,sans-serif;background:#f0f4f1;color:var(--text);min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:#0f2018;display:flex;flex-direction:column;z-index:50}.sidebar-brand{padding:1.4rem 1.3rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.07)}.sidebar-brand a{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer}.sidebar-logo{width:36px;height:36px;border-radius:9px;background:var(--g700);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#fff;flex-shrink:0}.sidebar-brand-text strong{display:block;color:#fff;font-size:.85rem;font-weight:700}.sidebar-brand-text span{font-size:.68rem;color:var(--g300)}.sidebar-user-section{padding:1rem 1.3rem;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:.7rem}.user-avatar{width:38px;height:38px;border-radius:50%;background:var(--g700);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;font-weight:700;flex-shrink:0}.user-name{font-size:.82rem;font-weight:600;color:#fff}.user-role{font-size:.68rem;color:var(--g300)}nav.sidebar-nav{flex:1;padding:.8rem;display:flex;flex-direction:column;gap:.15rem}.nav-section{font-size:.65rem;font-weight:700;color:#ffffff4d;text-transform:uppercase;letter-spacing:1.2px;padding:.8rem .75rem .3rem}.nav-item{display:flex;align-items:center;gap:10px;padding:.62rem .75rem;border-radius:7px;cursor:pointer;color:#ffffff9e;font-size:.85rem;font-weight:500;transition:background .15s,color .15s;-webkit-user-select:none;user-select:none;border:none;background:none;width:100%;font-family:inherit}.nav-item svg{width:17px;height:17px;flex-shrink:0}.nav-item:hover{background:#ffffff12;color:#fff}.nav-item.active{background:var(--g800);color:#fff;font-weight:600}.sidebar-bottom{padding:.8rem;border-top:1px solid rgba(255,255,255,.07)}.btn-logout{width:100%;display:flex;align-items:center;gap:10px;padding:.62rem .75rem;border-radius:7px;color:#ffffff80;font-size:.85rem;font-weight:500;background:none;border:none;cursor:pointer;font-family:inherit;transition:all .15s}.btn-logout:hover{background:#ff00001a;color:#ff9090}.main{margin-left:240px;padding:2rem 2.5rem}.page-header{margin-bottom:1.8rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}.page-header h2{font-size:1.55rem;font-weight:800;color:var(--g900)}.page-header p{color:var(--muted);font-size:.875rem;margin-top:.2rem}.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f2018 0%,var(--g800) 100%);padding:2rem}.login-card{background:#fff;border-radius:20px;padding:3rem 2.5rem;width:100%;max-width:420px;box-shadow:0 32px 80px #0000004d}.login-brand{text-align:center;margin-bottom:2rem}.login-circle{width:64px;height:64px;border-radius:50%;background:var(--g900);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}.login-circle svg{width:32px;height:32px}.login-brand h1{font-size:1.35rem;font-weight:800;color:var(--g900)}.login-brand p{font-size:.85rem;color:var(--muted);margin-top:.3rem}.admin-badge{display:inline-block;background:var(--g50);color:var(--g700);font-size:.7rem;font-weight:700;padding:.2rem .7rem;border-radius:100px;letter-spacing:1px;margin-top:.5rem}.login-error{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red);font-size:.85rem;border-radius:8px;padding:.7rem 1rem;margin-bottom:1rem}.login-blocked{background:var(--yellow-bg);border:1px solid #f0e0a0;color:#7a5c10;font-size:.85rem;border-radius:8px;padding:.7rem 1rem;margin-bottom:1rem}.login-hint{text-align:center;font-size:.73rem;color:var(--muted);margin-top:1rem}.login-hint a{color:var(--g600);text-decoration:none;font-weight:600}.form-group{margin-bottom:1.2rem}.form-group label{display:block;font-size:.82rem;font-weight:600;color:var(--g800);margin-bottom:.45rem}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem 1rem;border-radius:8px;border:1.5px solid var(--border);font-family:inherit;font-size:.95rem;color:var(--text);background:var(--warm);outline:none;transition:border-color .18s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--g500)}.form-group textarea{resize:vertical;min-height:80px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.btn{padding:.45rem 1rem;border-radius:7px;font-size:.8rem;font-weight:600;border:none;cursor:pointer;font-family:inherit;transition:all .15s}.btn-sm{padding:.3rem .75rem;font-size:.76rem}.btn-primary{background:var(--g700);color:#fff}.btn-primary:hover{background:var(--g800)}.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}.btn-danger:hover{background:#f8d7d5}.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--g700)}.btn-outline:hover{border-color:var(--g500);background:var(--g50)}.btn-warning{background:#fdf0d0;color:#7a5c10;border:1px solid #e8d598}.btn-warning:hover{background:#fae8b8}.btn-login{width:100%;padding:.85rem;border-radius:9px;background:var(--g900);color:#fff;font-family:inherit;font-size:1rem;font-weight:700;border:none;cursor:pointer;transition:background .18s;margin-top:.5rem}.btn-login:hover{background:var(--g800)}.btn-login:disabled{opacity:.7;cursor:not-allowed}.actions{display:flex;gap:.4rem;align-items:center}.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem}.kpi-card{background:#fff;border-radius:14px;padding:1.3rem 1.4rem;border:1px solid var(--border)}.kpi-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:.45rem}.kpi-val{font-size:1.8rem;font-weight:800}.kpi-sub{font-size:.75rem;color:var(--muted);margin-top:.2rem}.kpi-green .kpi-val{color:#1a7a45}.kpi-red .kpi-val{color:var(--red)}.kpi-yellow .kpi-val{color:#8a6510}.kpi-blue .kpi-val{color:#1a5a8a}.table-wrap{background:#fff;border-radius:14px;border:1px solid var(--border);overflow:hidden;margin-bottom:1.5rem}.table-head{padding:1rem 1.4rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:1rem;flex-wrap:wrap}.table-head h3{font-size:.975rem;font-weight:700;color:var(--g900)}.table-toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.search-box{position:relative}.search-box input{padding:.45rem .8rem .45rem 2rem;border-radius:7px;border:1.5px solid var(--border);font-family:inherit;font-size:.82rem;outline:none;width:200px;background:var(--warm)}.search-box input:focus{border-color:var(--g500)}.search-box svg{position:absolute;left:.55rem;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);pointer-events:none}table{width:100%;border-collapse:collapse}thead th{background:var(--g50);padding:.7rem 1.1rem;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}tbody tr{border-bottom:1px solid #f0f4f1;transition:background .1s}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:var(--g50)}tbody td{padding:.8rem 1.1rem;font-size:.855rem;color:var(--text);vertical-align:middle}.empty-row td{text-align:center;color:var(--muted);padding:1.5rem}.badge{display:inline-block;padding:.2rem .6rem;border-radius:100px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}.badge-green{background:#d6f0e0;color:#1a5c35}.badge-red{background:#fde8e6;color:#8c2a22}.badge-yellow{background:#fdf0d0;color:#7a5c10}.badge-gray{background:#ebebeb;color:#555}.filter-tabs{display:flex;gap:.4rem;background:var(--g50);border-radius:8px;padding:.3rem}.filter-tab{padding:.35rem .9rem;border-radius:6px;font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer;border:none;background:none;font-family:inherit;transition:all .15s}.filter-tab.active{background:#fff;color:var(--g800);box-shadow:0 1px 4px #00000014}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem}.modal{background:#fff;border-radius:16px;width:100%;overflow:hidden;box-shadow:0 32px 80px #0003}.modal-sm{max-width:440px}.modal-md{max-width:560px}.modal-header{background:var(--g900);padding:1.3rem 1.6rem;display:flex;align-items:center;justify-content:space-between}.modal-header h3{color:#fff;font-size:.975rem;font-weight:700}.modal-close{background:#ffffff26;border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:background .15s}.modal-close:hover{background:#ffffff40}.modal-body{padding:1.6rem}.modal-footer{padding:1rem 1.6rem 1.4rem;display:flex;gap:.6rem;justify-content:flex-end;border-top:1px solid var(--border)}.alert{padding:.8rem 1rem;border-radius:8px;font-size:.85rem;margin-bottom:1rem}.alert-success{background:#d6f0e0;color:#1a5c35;border:1px solid #a8d8b8}.alert-error{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red)}.notif-list{display:flex;flex-direction:column;gap:.75rem}.notif-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.3rem;display:flex;gap:1rem;align-items:flex-start}.notif-item.unread{border-left:3px solid var(--g500)}.notif-dot-item{width:10px;height:10px;border-radius:50%;background:var(--g500);flex-shrink:0;margin-top:4px}.notif-item h4{font-size:.9rem;font-weight:600;color:var(--g900);margin-bottom:.25rem}.notif-item p{font-size:.82rem;color:var(--muted);line-height:1.5}.notif-date{font-size:.72rem;color:var(--muted);margin-top:.3rem}.spinner-wrap{display:flex;align-items:center;justify-content:center;padding:3rem}.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--g500);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.receipt{border:2px dashed var(--border);border-radius:12px;padding:1.5rem}.receipt-header{text-align:center;margin-bottom:1.5rem;padding-bottom:1.2rem;border-bottom:1px solid var(--border)}.receipt-logo{width:48px;height:48px;border-radius:50%;background:var(--g50);display:flex;align-items:center;justify-content:center;margin:0 auto .6rem;font-size:.7rem;font-weight:800;color:var(--g700)}.receipt-header h2{font-size:1rem;font-weight:800;color:var(--g900)}.receipt-header p{font-size:.75rem;color:var(--muted)}.receipt-num{font-size:.72rem;color:var(--g600);font-weight:700;margin-top:.5rem}.receipt-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem}.r-lbl{font-size:.78rem;color:var(--muted)}.r-val{font-size:.875rem;font-weight:600;color:var(--text);text-align:right;max-width:60%}.receipt-total{margin-top:1rem;padding-top:1rem;border-top:2px solid var(--g900);display:flex;justify-content:space-between;align-items:center}.receipt-total .r-lbl{font-size:.9rem;font-weight:700;color:var(--g900)}.receipt-total .r-val{font-size:1.4rem;font-weight:800;color:var(--g700)}.receipt-seal{margin-top:1.2rem;text-align:center;font-size:.72rem;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:.5rem}.seal-icon{width:28px;height:28px;border-radius:50%;border:2px solid var(--g500);display:flex;align-items:center;justify-content:center;color:var(--g500)}.toast{padding:.8rem 1.2rem;border-radius:8px;font-size:.875rem;font-weight:500;box-shadow:0 4px 16px #00000026;animation:toastIn .2s ease}.toast-error{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red)}.toast-success{background:#d6f0e0;border:1px solid #a8d8b8;color:#1a5c35}@keyframes toastIn{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}.table-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1.4rem;border-top:1px solid var(--border)}.pagination-info{font-size:.82rem;color:var(--muted)}