*{box-sizing:border-box}
body{margin:0;font-family:Arial,"Microsoft JhengHei",sans-serif;background:#111;color:#eee}
a{color:inherit;text-decoration:none}
.layout{display:flex;min-height:100vh}
.sidebar{width:230px;background:#171717;border-right:1px solid #333;padding:18px;position:fixed;left:0;top:0;bottom:0;overflow:auto}
.brand{font-size:20px;font-weight:700;color:#f4c76a;margin-bottom:18px}
.admin-box{background:#222;border:1px solid #333;border-radius:12px;padding:12px;margin-bottom:16px}
.admin-box small{color:#aaa}
.sidebar nav a{display:block;padding:11px 12px;margin-bottom:8px;border-radius:10px;color:#ddd}
.sidebar nav a:hover,.sidebar nav a.active{background:#382a12;color:#ffd56a}
.main{margin-left:230px;padding:24px;width:calc(100% - 230px)}
h1{margin:0 0 18px;font-size:28px}
h2{margin:26px 0 12px;font-size:20px;color:#ffd56a}
.card{background:#1b1b1b;border:1px solid #333;border-radius:16px;padding:18px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:#202020;border:1px solid #333;border-radius:14px;padding:16px}
.stat .label{color:#aaa;font-size:14px}
.stat .value{font-size:26px;font-weight:700;margin-top:8px;color:#ffd56a}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;background:#1b1b1b;border-radius:12px;overflow:hidden}
th,td{border-bottom:1px solid #333;padding:10px;text-align:left;vertical-align:top}
th{background:#252525;color:#ffd56a;white-space:nowrap}
tr:hover td{background:#202020}
.form-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.form-row.two{grid-template-columns:repeat(2,1fr)}
label{display:block;color:#ccc;font-size:14px;margin-bottom:6px}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #444;background:#111;color:#eee}
textarea{min-height:80px}
.btn{display:inline-block;border:0;border-radius:10px;padding:9px 14px;background:#d4a738;color:#111;font-weight:700;cursor:pointer}
.btn.secondary{background:#333;color:#eee}
.btn.danger{background:#923333;color:#fff}
.btn.small{padding:6px 10px;font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.alert{background:#263b21;border:1px solid #4a7842;color:#d6ffd1;border-radius:12px;padding:12px;margin-bottom:16px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#333;color:#eee;font-size:12px}
.badge.main{background:#493712;color:#ffd56a}
.badge.branch{background:#123049;color:#8fd0ff}
.badge.open{background:#214b2a;color:#aaf0b0}
.badge.closed{background:#4b2121;color:#ffb0b0}
.filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filter > *{max-width:220px}
@media(max-width:900px){
    .sidebar{position:relative;width:100%;height:auto}
    .layout{display:block}
    .main{margin-left:0;width:100%;padding:16px}
    .grid,.form-row,.form-row.two{grid-template-columns:1fr}
}


.badge.refund{background:#5a2020;color:#ffb6b6}
.negative{color:#ff9b9b;font-weight:700}
.refund-row td{background:#241818}
.refund-row:hover td{background:#2c1d1d}



/* v3.4 手機版優化 */
.table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.table-wrap table{
    min-width:860px;
}

input,select,textarea,button{
    font-size:16px; /* 避免 iPhone/手機瀏覽器點輸入框自動放大 */
}

@media(max-width:900px){
    body{
        background:#111;
        font-size:15px;
    }

    .layout{
        display:block;
        min-height:100vh;
    }

    .sidebar{
        position:sticky;
        top:0;
        z-index:20;
        width:100%;
        height:auto;
        max-height:none;
        padding:10px 10px 8px;
        border-right:0;
        border-bottom:1px solid #333;
        background:#171717;
    }

    .brand{
        font-size:17px;
        margin-bottom:8px;
        white-space:nowrap;
    }

    .admin-box{
        display:none;
    }

    .sidebar nav{
        display:flex;
        gap:8px;
        overflow-x:auto;
        white-space:nowrap;
        padding-bottom:4px;
        -webkit-overflow-scrolling:touch;
    }

    .sidebar nav a{
        flex:0 0 auto;
        display:inline-block;
        padding:8px 10px;
        margin:0;
        font-size:14px;
        border-radius:999px;
        background:#222;
    }

    .sidebar nav a.active{
        background:#382a12;
        color:#ffd56a;
    }

    .main{
        margin-left:0;
        width:100%;
        padding:12px;
    }

    h1{
        font-size:22px;
        margin-bottom:12px;
    }

    h2{
        font-size:18px;
        margin:18px 0 10px;
    }

    .card{
        padding:12px;
        border-radius:12px;
        margin-bottom:12px;
    }

    .grid{
        grid-template-columns:repeat(2,1fr) !important;
        gap:10px;
    }

    .stat{
        padding:12px;
        border-radius:12px;
    }

    .stat .label{
        font-size:13px;
    }

    .stat .value{
        font-size:20px;
        word-break:break-all;
    }

    .form-row,
    .form-row.two{
        grid-template-columns:1fr !important;
        gap:10px;
    }

    .form-row > div,
    .form-row.two > div{
        grid-column:auto !important;
    }

    .filter{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .filter > *{
        max-width:none;
        width:100%;
    }

    .btn{
        width:auto;
        text-align:center;
    }

    .filter .btn{
        width:100%;
    }

    .actions{
        gap:6px;
        min-width:140px;
    }

    .actions .btn,
    .actions button{
        padding:7px 9px;
        font-size:13px;
    }

    th,td{
        padding:8px;
        font-size:14px;
    }

    .badge{
        font-size:12px;
        padding:3px 7px;
    }
}

@media(max-width:480px){
    .main{
        padding:10px;
    }

    .grid{
        grid-template-columns:1fr !important;
    }

    .brand{
        font-size:16px;
    }

    .sidebar nav a{
        font-size:13px;
        padding:7px 9px;
    }

    .card{
        padding:10px;
    }

    .table-wrap table{
        min-width:760px;
    }
}



/* v3.5 手機版選單改為收合 */
.mobile-topbar{
    display:block;
}

.menu-toggle{
    display:none;
}

@media(max-width:900px){
    .mobile-topbar{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }

    .mobile-topbar .brand{
        margin-bottom:0;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .menu-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border:1px solid #444;
        border-radius:10px;
        background:#2a2a2a;
        color:#ffd56a;
        padding:8px 11px;
        font-weight:700;
        cursor:pointer;
        white-space:nowrap;
        width:auto;
        min-width:82px;
    }

    .sidebar .main-nav{
        display:none;
        margin-top:10px;
        padding-top:10px;
        border-top:1px solid #333;
        max-height:calc(100vh - 70px);
        overflow:auto;
    }

    .sidebar .main-nav.open{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .sidebar .main-nav a{
        display:block;
        width:100%;
        text-align:center;
        border-radius:10px;
        white-space:normal;
        line-height:1.3;
        padding:10px 8px;
    }
}

@media(max-width:480px){
    .sidebar .main-nav.open{
        grid-template-columns:1fr;
    }

    .menu-toggle{
        padding:7px 10px;
        font-size:14px;
    }
}