:root {
    --green:       #28a745;
    --green-dark:  #1e7b34;
    --green-light: #d4edda;
    --green-bg:    #f0fdf4;
    --shadow-sm:   0 1px 4px rgba(0,0,0,.08);
    --shadow-md:   0 4px 12px rgba(0,0,0,.1);
    --shadow-lg:   0 8px 24px rgba(0,0,0,.12);
    --radius:      12px;
    --radius-sm:   8px;
}
*{box-sizing:border-box}

.page-wrapper{
    max-width:1200px;
    margin:0 auto;
    padding:16px 16px 32px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.main-stats{
    display:flex;
    gap:12px;
    margin-bottom:12px;
}
.stat-item{
    background:white;
    border:2px solid #2E7D32;
    border-radius:20px;
    padding:14px 18px;
    text-align:center;
    min-width:80px;
    transition:all .3s;
    flex:1;
    box-shadow:0 4px 16px rgba(46,125,50,0.1);
    cursor:pointer;
    text-decoration:none;
    display:block;
    color:inherit;
    position:relative;
    overflow:hidden;
}
.stat-item:hover{
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 12px 32px rgba(46,125,50,0.2);
    text-decoration:none;
}
.stat-item:active{transform:translateY(0) scale(0.98)}
.stat-item:focus{outline:2px solid #2E7D32;outline-offset:2px}
.stat-item .stat-value{
    font-size:1.6rem;
    font-weight:800;
    line-height:1.2;
    overflow:visible;
    color:#2E7D32;
}
.stat-item.red .stat-value{color:#D32F2F}
.stat-item .stat-label{
    font-size:.88rem;
    font-weight:600;
    letter-spacing:.3px;
    margin-top:4px;
    color:#6B7280;
}

.quick-area{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:14px 16px 12px;
    margin-bottom:14px;
}
.quick-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
    padding-bottom:8px;
    border-bottom:1.5px solid #e5e7eb;
}
.quick-title{
    font-weight:700;
    font-size:14px;
    color:#1e293b;
    display:flex;
    align-items:center;
    gap:8px;
}
.quick-badge{
    display:inline-block;
    padding:2px 9px;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    color:#fff;
    font-size:.68rem;
    font-weight:600;
    border-radius:10px;
}
.quick-toggle-btn{
    padding:4px 12px;
    font-size:.78rem;
    background:#f3f4f6;
    color:#374151;
    border:1px solid #d1d5db;
    border-radius:20px;
    cursor:pointer;
    transition:all .18s;
    display:flex;
    align-items:center;
    gap:4px;
}
.quick-toggle-btn:hover{background:#22c55e;color:#fff;border-color:#22c55e}
.quick-toggle-btn .chevron{transition:transform .25s}
.quick-toggle-btn.open .chevron{transform:rotate(180deg)}

.quick-btn-grid {
    display: grid !important;
    grid-template-columns: repeat(11, 1fr);
    gap: 8px;
    justify-content: start;
    margin-top: 8px;
}
.quick-btn{
    padding:5px 4px;
    font-size:.8rem;
    border:1.5px solid var(--green);
    border-radius:16px;
    background:#fff;
    color:#16a34a;
    cursor:pointer;
    transition:all .18s;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
    font-weight:500;
    font-family:inherit;
}
.quick-btn:hover{
    background:var(--green);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 2px 6px rgba(40,167,69,.3);
}

.order-card{
    border:none;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    margin-bottom:14px;
}
.order-card .card-header{
    background:#2E7D32;
    color:#fff;
    padding:10px 18px;
    border:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.order-card .card-header h5{margin:0;font-size:15px;font-weight:600}
.card-body{padding:14px 16px}

.order-form{
    background:var(--green-bg);
    border:1px solid #bbf7d0;
    border-radius:var(--radius-sm);
    padding:12px 14px;
    margin-bottom:12px;
}
.order-form .form-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:flex-end;
}
.order-form .form-group{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}
.order-form .form-group label{
    font-size:.7rem;
    font-weight:600;
    color:#374151;
    text-transform:uppercase;
    letter-spacing:.4px;
}
.order-form .form-control,
.order-form .form-select{
    border:1px solid #d1d5db;
    border-radius:var(--radius-sm);
    font-size:.88rem;
    padding:6px 10px;
    height:34px;
    transition:border-color .2s,box-shadow .2s;
}
.order-form .form-control:focus,
.order-form .form-select:focus{
    border-color:#2E7D32;
    box-shadow:0 0 0 2px rgba(46,125,50,0.15);
    outline:none;
}
.fg-customer{flex:0 0 200px;min-width:160px;position:relative}
.fg-date{min-width:140px}
.fg-pay{flex:0 0 130px;min-width:130px}
.fg-remark{flex:1;min-width:160px}

.input-with-btn{
    display:flex;
    align-items:center;
    gap:4px;
}
.input-with-btn .form-control{flex:1;min-width:0}
.mic-btn{
    width:30px;
    height:30px;
    flex-shrink:0;
    border:1px solid #d1d5db;
    border-radius:50%;
    background:#fff;
    color:#6b7280;
    font-size:14px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .2s;
    padding:0;
}
.mic-btn:hover{border-color:#2E7D32;color:#2E7D32;background:#f0fdf4}
.mic-btn.recording{
    border-color:#ef4444;
    color:#fff;
    background:#ef4444;
    animation:mic-pulse 1s ease infinite;
}
@keyframes mic-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)}
    50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}
}

#customer-debt-tip{
    display:none;
    padding:7px 12px;
    background:#fff1f2;
    border:1px solid #fecdd3;
    border-radius:var(--radius-sm);
    font-size:.82rem;
    color:#e11d48;
    margin-bottom:10px;
}

.action-row{
    display:flex;
    gap:8px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.action-btn{
    padding:5px 14px;
    font-size:.82rem;
    border-radius:20px;
    cursor:pointer;
    font-weight:500;
    border:1px solid transparent;
    transition:all .18s;
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-family:inherit;
}
.btn-undo{background:#f3f4f6;color:#374151;border-color:#d1d5db}
.btn-undo:hover{background:#6b7280;color:#fff}
.btn-clear{background:#fff;color:#dc2626;border-color:#fca5a5}
.btn-clear:hover{background:#dc2626;color:#fff}
.btn-ocr{background:#fff;color:#d97706;border-color:#fcd34d}
.btn-ocr:hover{background:#d97706;color:#fff}

.table-card{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    margin-bottom:12px;
}
.order-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
.order-table{
    width:100%;
    min-width:680px;
    border-collapse:collapse;
    font-size:.88rem;
}
.order-table thead{
    position:sticky;
    top:0;
    z-index:2;
}
.order-table thead th{
    padding:10px 10px;
    font-weight:700;
    font-size:.8rem;
    letter-spacing:.3px;
    color:white;
    background:linear-gradient(135deg, #14532D, #166534);
    border-bottom:3px solid #22C55E;
    white-space:nowrap;
    text-align:center;
    border-right:none;
}
.order-table th.col-name{width:27%}
.order-table th.col-qty{width:15%}
.order-table th.col-unit{width:11%}
.order-table th.col-price{width:17%}
.order-table th.col-subtotal{width:18%}
.order-table th.col-action{width:12%}

.order-table tbody tr:nth-child(odd){background:#fff}
.order-table tbody tr:nth-child(even){background:#f9fafb}
.order-table tbody tr:hover{background:#e8f5e9!important}
.order-table td{
    padding:7px 8px;
    vertical-align:middle;
    text-align:center;
    border-bottom:1px solid #f1f5f9;
    border-right:1px solid #f9fafb;
}
.order-table td:first-child{text-align:left;padding-left:10px}
.order-table td:last-child{border-right:none}

.order-table input[type="text"],
.order-table input[type="number"],
.order-table select{
    border:1px solid #d1d5db;
    border-radius:6px;
    padding:5px 8px;
    font-size:.88rem;
    transition:border-color .2s,box-shadow .2s;
    width:100%;
    font-family:inherit;
}
.order-table input[type="text"]:focus,
.order-table input[type="number"]:focus,
.order-table select:focus{
    border-color:var(--green);
    box-shadow:0 0 0 2px rgba(40,167,69,.12);
    outline:none;
}

.item-name-cell{position:relative}
.item-name-cell input{width:100%}

.goods-search-dropdown{
    position:absolute;
    top:100%;
    left:0;
    z-index:1000;
    background:#fff;
    border:1px solid #d1d5db;
    border-radius:8px;
    box-shadow:0 4px 16px rgba(0,0,0,0.15);
    max-height:220px;
    overflow-y:auto;
    width:100%;
    margin-top:2px;
    display:none;
}
.goods-search-dropdown.show{display:block}
.goods-search-dropdown .gs-item{
    padding:8px 12px;
    cursor:pointer;
    border-bottom:1px solid #f0f0f0;
    transition:background .15s;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.goods-search-dropdown .gs-item:last-child{border-bottom:none}
.goods-search-dropdown .gs-item:hover{background:#f0fff0}
.goods-search-dropdown .gs-name{font-weight:600;color:#1e293b;font-size:.88rem}
.goods-search-dropdown .gs-meta{color:#6b7280;font-size:.78rem}

.qty-wrap{
    display:inline-flex;
    align-items:center;
    gap:0;
    border:1px solid #d1d5db;
    border-radius:6px;
    overflow:hidden;
    background:#fff;
}
.qty-btn-minus,
.qty-btn-plus{
    width:24px;
    height:30px;
    border:none;
    background:#f3f4f6;
    color:#374151;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:background .15s,color .15s;
    flex-shrink:0;
    padding:0;
    font-family:inherit;
}
.qty-btn-minus:hover,
.qty-btn-plus:hover{background:var(--green);color:#fff}
.qty-input{
    width:64px;
    text-align:center;
    font-weight:600;
    font-size:.95rem;
    border:none;
    border-left:none;
    border-right:none;
    border-radius:0;
    height:30px;
    padding:0 2px;
}
.qty-input:focus{outline:none}
.item-subtotal{font-weight:600;color:#16a34a;font-size:.88rem}

.del-btn{
    width:26px;
    height:26px;
    border:none;
    background:#fee2e2;
    color:#ef4444;
    border-radius:50%;
    font-size:13px;
    cursor:pointer;
    transition:all .15s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    opacity:0.15;
}
.order-table tbody tr:hover .del-btn{opacity:1}
.del-btn:hover{background:#ef4444;color:#fff}

.total-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    background:linear-gradient(135deg,#f0fdf4,#dcfce7);
    border-radius:var(--radius);
    margin-bottom:12px;
    border:1px solid #bbf7d0;
}
.total-left{display:flex;align-items:center;gap:10px}
.total-label{font-size:.88rem;color:#374151;font-weight:500}
.total-amount{
    font-size:2rem;
    font-weight:800;
    color:#15803d;
    letter-spacing:-1px;
}
.total-right{display:flex;gap:8px}
.btn-action{
    padding:8px 20px;
    border-radius:var(--radius-sm);
    font-size:.88rem;
    font-weight:600;
    border:none;
    cursor:pointer;
    transition:all .18s;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:inherit;
}
.btn-action.btn-outline{
    background:#fff;
    color:#374151;
    border:1px solid #d1d5db;
}
.btn-action.btn-outline:hover{background:#f3f4f6}
.btn-action.btn-primary{
    background:var(--green);
    color:#fff;
    box-shadow:0 2px 8px rgba(40,167,69,.3);
}
.btn-action.btn-primary:hover{background:var(--green-dark);transform:translateY(-1px)}
.btn-action.btn-primary:disabled{background:#d1d5db;box-shadow:none;cursor:not-allowed;transform:none}

.float-upload-btn{
    position:fixed;
    right:24px;
    bottom:28px;
    z-index:9999;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    background:linear-gradient(135deg,#f59e0b,#d97706);
    color:#fff;
    border:none;
    border-radius:28px;
    font-size:.88rem;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 4px 16px rgba(245,158,11,.45);
    transition:all .2s;
    text-decoration:none;
    font-family:inherit;
}
.float-upload-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(245,158,11,.5);
    color:#fff;
}

.save-fab{
    position:fixed;
    bottom:80px;
    right:24px;
    z-index:9999;
    background:linear-gradient(135deg,#16a34a,#15803d);
    color:#fff;border:none;border-radius:28px;
    padding:12px 24px;font-size:.95rem;font-weight:700;
    box-shadow:0 6px 24px rgba(22,163,74,.35);
    cursor:pointer;transition:all .2s;
    display:flex;align-items:center;gap:6px;
    font-family:inherit;
}
.save-fab:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(22,163,74,.45)}
.save-fab:active{transform:scale(.96)}
.save-fab:disabled{background:#94a3b8;box-shadow:none;cursor:not-allowed;transform:none}
.save-fab.hidden{display:none}

.field-required-error{
    border-color:#ef4444!important;
    box-shadow:0 0 0 2px rgba(239,68,68,.2)!important;
}

@keyframes pulse-highlight{
    0%{color:#15803d}
    50%{color:#fbbf24}
    100%{color:#15803d}
}
.total-amount.animate-pulse{animation:pulse-highlight .5s ease}

#ocr-file-input{display:none}

@media(max-width:900px){
    .main-stats{flex-wrap:wrap}
    .quick-btn-grid{grid-template-columns:repeat(10,1fr)}
}
@media(max-width:640px){
    .main-stats{gap:8px}
    .stat-item{min-width:70px}
    .quick-btn-grid{grid-template-columns:repeat(7,1fr)}
    .total-bar{flex-direction:column;gap:10px;align-items:flex-start}
    .total-right{flex-wrap:wrap}
    .float-upload-btn{right:14px;bottom:18px;padding:9px 14px;font-size:.82rem}
    .save-fab{right:14px;bottom:68px;padding:10px 18px;font-size:.85rem}

    .order-form .form-row{flex-direction:column;gap:12px}
    .fg-customer,.fg-date,.fg-pay,.fg-remark{flex:1 1 100%;min-width:0}
    .order-form .form-control,.order-form .form-select{height:48px;font-size:16px}
    .mic-btn{width:40px;height:40px;font-size:18px}
    .action-btn{padding:10px 16px;font-size:.9rem;height:48px}
    .btn-action{padding:12px 20px;font-size:.92rem;min-height:48px}
    .del-btn{width:36px;height:36px;font-size:16px;opacity:0.6}
    .order-table tbody tr:hover .del-btn{opacity:1}

    .order-table-wrap{margin:0 -14px;padding:0 14px}
    .table-card{margin-left:0;margin-right:0}

    .page-wrapper{padding:12px 10px 48px}
    .order-form{padding:14px}
    .action-row{margin-bottom:14px}
    .total-bar{padding:14px;margin-bottom:16px}
}
@media(max-width:420px){
    .main-stats{gap:6px}
    .stat-item{min-width:60px;padding:5px 10px}
    .quick-btn-grid{grid-template-columns:repeat(6,1fr)}
}
@media screen and (max-width:768px){
    .main-stats{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
    .mic-btn{width:40px!important;height:40px!important;font-size:18px!important}
    .float-upload-btn{right:12px!important;bottom:80px!important;padding:10px 16px!important}
    .save-fab{right:12px!important;bottom:130px!important}
    .order-form .form-row{flex-direction:column!important}
    .order-form .form-control,.order-form .form-select{height:44px!important;font-size:16px!important}
    .order-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
    .total-right{flex-wrap:wrap!important;gap:8px!important}
    .btn-action{min-height:44px!important;padding:10px 16px!important}
    .quick-btn-grid{grid-template-columns:repeat(5,1fr)!important;gap:6px!important}
}