body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 18px 18px 30px 184px;
    background: #f5f5f5;
    color: #222;
    font-size: 14px;
}

h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.2; }
h2 { margin-top: 0; }

input, select, textarea { box-sizing: border-box; padding: 7px 8px; font-size: 14px; }
input { width: 100%; }

button, .button-link {
    display: inline-block;
    padding: 7px 12px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #777;
    background: white;
    color: #222;
    border-radius: 5px;
}
button:hover, .button-link:hover { background:#f0f0f0; }
button:disabled { cursor:not-allowed; opacity:.6; }

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 166px;
    padding: 0;
    background: #1f2937;
    color: #fff;
    box-shadow: 2px 0 10px rgba(0,0,0,.18);
    z-index: 1000;
}
.sidebar-brand {
    padding: 14px 12px 13px;
    border-bottom: 1px solid #374151;
}
.sidebar-brand strong {
    display:block;
    font-size:18px;
    line-height:1.2;
}
.sidebar-brand span {
    display:block;
    margin-top:4px;
    color:#9ca3af;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.sidebar-nav {
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:12px 10px;
}
.sidebar-nav a {
    display:block;
    color:#f3f4f6;
    background:#374151;
    border:1px solid #4b5563;
    text-decoration:none;
    padding:8px 11px;
    border-radius:6px;
    font-size:14px;
    font-weight:700;
    box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.sidebar-nav a:hover {
    background:#4b5563;
    border-color:#6b7280;
    color:#fff;
}
.sidebar-nav a.active {
    background:#fff;
    border-color:#fff;
    color:#111827;
    box-shadow:0 2px 5px rgba(0,0,0,.22);
}

.page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.page-heading.compact { margin-bottom:0; }
.muted { color:#666; }

.card { background:white; border:1px solid #ccc; padding:12px; margin-bottom:12px; border-radius:6px; }
.card p { margin:5px 0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.two-columns { grid-template-columns:repeat(2,1fr); }
textarea { width:100%; }

table { width:100%; border-collapse:collapse; background:white; margin-top:10px; }
th, td { border:1px solid #ccc; padding:6px; text-align:left; font-size:13px; vertical-align:middle; }
th { background:#e9e9e9; }
tr:hover { background:#f0f7ff; }
.orders-table { table-layout:fixed; }
.orders-table th, .orders-table td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.orders-table .col-order-ref { width:16%; }.orders-table .col-date { width:13%; }.orders-table .col-channel { width:8%; }.orders-table .col-customer { width:24%; }.orders-table .col-postcode { width:9%; }.orders-table .col-total { width:8%; }.orders-table .col-status { width:9%; }.orders-table .col-invoice { width:13%; }

.status-badge, .warning-box, .error-box { display:inline-block; padding:8px 10px; border:1px solid #c9a227; background:#fff8d6; margin-bottom:12px; }
.error-box { display:block; border-color:#b94a48; background:#fbeaea; }
.success-box { display:block; padding:9px 11px; border:1px solid #3b8f52; background:#eaf7ed; border-radius:5px; margin-bottom:12px; }

.quick-edit-form { display:flex; gap:5px; align-items:center; flex-wrap:nowrap; }
.quick-edit-form select { min-width:118px; width:auto; }
.quick-edit-form .payment-select { min-width:138px; }
.row-actions { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.row-actions form { margin:0; }
.danger-button { border-color:#a33; color:#922; }

.credit-edit-panel { margin-top:8px; padding:10px; background:#f8fafc; border:1px solid #d8dee7; border-radius:6px; min-width:520px; }
.credit-edit-grid { display:grid; grid-template-columns:140px 130px minmax(200px,1fr) 160px auto; gap:7px; align-items:end; }
.credit-edit-grid label { font-size:12px; font-weight:700; }
.credit-edit-grid input, .credit-edit-grid select { margin-top:4px; width:100%; }
.action-row { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }

.compact-form-grid { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(260px,1.4fr) auto; gap:10px; align-items:end; }
.compact-form-grid.four { grid-template-columns:minmax(140px,.7fr) minmax(180px,.9fr) minmax(260px,1.4fr) auto; }
.compact-form-grid label { display:block; font-weight:600; }
.compact-form-grid input, .compact-form-grid select { margin-top:4px; width:100%; }

.invoice-sheet { max-width:1050px; margin:0 auto; padding:35px; background:white; border:1px solid #bbb; }
.invoice-header { display:flex; justify-content:space-between; gap:40px; border-bottom:2px solid #222; padding-bottom:20px; margin-bottom:20px; }
.invoice-company { max-width:420px; text-align:right; }
.invoice-meta { display:flex; flex-wrap:wrap; gap:25px; margin:15px 0; padding:12px; background:#f1f1f1; }
.invoice-table { margin-top:20px; }
.totals-panel { width:360px; margin:20px 0 20px auto; border:1px solid #aaa; padding:12px 18px; }
.totals-panel p { display:flex; justify-content:space-between; margin:8px 0; }
.grand-total { border-top:2px solid #222; padding-top:10px; font-size:18px; }
.disabled-action { text-align:right; margin-top:20px; }
.manual-form label { display:block; margin-bottom:10px; font-weight:bold; }
.manual-form label input, .manual-form label select, .manual-form label textarea { display:block; width:100%; margin-top:4px; font-weight:normal; }
.form-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.manual-form table input, .manual-form table select { width:100%; }

@media(max-width:720px){
    body { padding:82px 14px 30px; }
    .app-sidebar { width:100%; height:64px; bottom:auto; display:flex; align-items:center; overflow:hidden; }
    .sidebar-brand { padding:11px 13px; border-bottom:0; border-right:1px solid #374151; min-width:118px; }
    .sidebar-brand strong { font-size:16px; }
    .sidebar-brand span { display:none; }
    .sidebar-nav { flex-direction:row; overflow-x:auto; padding:7px; gap:6px; }
    .sidebar-nav a { white-space:nowrap; padding:9px 11px; }
    .grid,.two-columns,.form-grid,.credit-edit-grid,.compact-form-grid,.compact-form-grid.four{grid-template-columns:1fr;min-width:0}
    .page-heading,.invoice-header{align-items:flex-start;flex-direction:column}
    .invoice-company{text-align:left}.totals-panel{width:auto}
    .quick-edit-form{flex-wrap:wrap}
}

@media print {
    html,body{width:210mm!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;background:white!important}
    .app-sidebar,.screen-only{display:none!important}.print-invoice{display:block!important;position:static!important;inset:auto!important;width:auto!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important}
    .print-header{padding-bottom:10px!important}.print-addresses{margin:12px 0!important;gap:10px!important}.print-box{min-height:86px!important;padding:10px!important}.print-meta{margin-bottom:10px!important;padding:7px 9px!important}.print-table{margin-top:0!important}.print-table th,.print-table td{padding:5px!important;font-size:11px!important}.print-totals{margin-top:12px!important;padding:8px 12px!important}.preview-note{margin-top:10px!important}
}