/* City suggestions dropdown */
#city-modal-suggest { margin-top: 6px; }
.suggest-list { list-style: none; margin: 0; padding: 0; border: 1px solid #eadfd6; border-radius: 8px; background: #fff; max-height: 220px; overflow: auto; }
.suggest-list li { margin: 0; padding: 0; }
.suggest-item { display: block; width: 100%; text-align: left; padding: 8px 10px; background: transparent; border: 0; cursor: pointer; font: inherit; color: inherit; }
.suggest-item:hover, .suggest-item:focus { background: #faf8f6; outline: none; }
:root{--brown-1:#c0a891;--brown-2:#b6977d;--brown-3:#b7825f;--brown-4:#774e32;--brown-5:#6f4e37;--bg:#faf8f6;--text:#2b2b2b;--muted:#666}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
.container{max-width:1600px;margin:0 auto;padding:0 16px}
.site-header{background:var(--brown-5);color:#fff;border-bottom:3px solid var(--brown-4)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{color:#fff;text-decoration:none;display:flex;align-items:center}
.brand-title{font-weight:700;letter-spacing:.5px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:16px;align-items:center}
.main-nav a{color:#fff;text-decoration:none}
.main-nav .user{color:#fff;opacity:.9;display:flex;align-items:center;gap:8px}
.avatar-24{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.6);background:#ddd}
.main-content{padding:24px 0}
.site-footer{border-top:3px solid var(--brown-2);background:#fff;margin-top:24px}
.site-footer .container{padding:16px 0;color:var(--muted);font-size:.9rem}

.card{background:#fff;border:1px solid #eadfd6;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:20px}
.card h1,.card h2{margin-top:0}

.form{display:grid;gap:12px}
.label{font-weight:600}
.input{width:100%;padding:10px 12px;border:1px solid #d8c8bd;border-radius:8px;background:#fff}
.input:focus{outline:none;border-color:var(--brown-3);box-shadow:0 0 0 3px rgba(183,130,95,.2)}
.btn{display:inline-block;background:var(--brown-3);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--brown-4)}
.btn-small{padding:6px 10px;font-size:.9rem}
/* Danger variant and square icon button */
.btn-danger{ background:#c53030; }
.btn-danger:hover{ background:#9b2c2c; }
.btn-success{ background:#2f855a; }
.btn-success:hover{ background:#276749; }
.btn-square{ width:28px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }

.login-wrapper{max-width:420px;margin:48px auto}
.login-header{text-align:center;margin-bottom:12px}
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.text-small{font-size:.8rem}
.alert{padding:10px 12px;border-radius:8px;border:1px solid #f0d9d1;background:#fff4f0;color:#7a2e12}
.success{border-color:#d6ead6;background:#f0fff0;color:#1f6f1f}

/* Orders table row status coloring */
tr.status-pending{background:#fff}
tr.status-error{background:#ffeaea}
tr.status-notconf{background:#fff7cc}
tr.status-postponed{background:#fff3bf}
tr.status-rejected{background:#ffe0e0}
tr.status-printed{background:#eaf9ea}
tr.status-returned{background:#e8f1ff}
tr.status-delivered{background:#e6ffed}
/* Special Order: neon + flashing */
tr.status-special{background:#00f5ff; animation: neonFlash 1s linear infinite alternate;}
@keyframes neonFlash{
	from{ box-shadow: 0 0 0 rgba(0,245,255,0.0); filter: saturate(120%); }
	to{ box-shadow: 0 0 16px rgba(0,245,255,0.9), 0 0 28px rgba(0,255,170,0.6); filter: saturate(180%); }
}

/* Link-like button for inline actions */
.linklike{background:none;border:0;color:var(--brown-4);cursor:pointer;padding:0;font:inherit}
.linklike:hover{text-decoration:underline}
.linklike.muted{color:var(--muted)}

/* Subtle row separators for tables that opt-in */
.table-rows tbody tr + tr td{border-top:1px solid #e6dbd2}
/* Unify table look across all data tables using table-rows */
.table-rows{width:100%; border-collapse:collapse;}
.table-rows thead th{ text-align:left; padding:8px; border-bottom:1px solid #eadfd6; }
.table-rows tbody td{ padding:8px; border-bottom:1px solid #f0e7e0; }

/* Utilities to replace inline styles (CSP-safe) */
.mt--6{ margin-top:-6px; }
.mt-6{ margin-top:6px; }
.mb-6{ margin-bottom:6px; }
.mt-10{ margin-top:10px; }
.m-0{ margin:0; }
.overflow-auto{ overflow:auto; }
.table-auto{ table-layout:auto; }
.cell-address{ max-width:520px; overflow-wrap:anywhere; }
.pager{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.flex-row{ display:flex; }
.gap-10{ gap:10px; }
.is-disabled{ opacity:.5; pointer-events:none; }
.address-box{ padding:8px; border:1px solid #eadfd6; border-radius:8px; background:#faf8f6; margin-bottom:10px; max-height:120px; overflow:auto; }
.actions-row{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }

/* Print label layout (4x6 in / 100x150mm) */
.label-sheet{
	background:#fff; border:1px solid #eadfd6; border-radius:10px; margin-top:16px; color:#000;
	width:100mm; min-height:150mm; padding:4mm; /* exact print size; border visible on-screen only */
}
.label-4x6{ display:flex; flex-direction:column; height:100%; gap:4mm; }

/* Sample-style header and sections */
.wb-top{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #000; padding-bottom:2mm; }
.wb-logo img{ height:12mm; width:auto; display:block; }
.wb-id{ font-size:12px; font-weight:700; }

.wb-section{ border-bottom:1px solid #000; padding:2mm 0; }
.wb-section.wb-recipient{ padding:3mm 0; }
.wb-title{ font-size:12px; font-weight:700; margin-bottom:1.5mm; }
.wb-line{ font-size:11px; line-height:1.35; }
.wb-parcel{ font-size:14px; font-weight:normal; }
.wb-recipient .wb-title{ font-size:13px; }
.wb-recipient .wb-line{ font-size:12.5px; }
.wb-recipient .wb-name{ font-size:16px; font-weight:normal; }
.wb-recipient .wb-address{ line-height:1.4; }
/* Increase recipient Address and Contact No font size to 2x (approx. 25px) */
.wb-recipient .wb-address,
.wb-recipient .wb-contact{ font-size:16px; line-height:1.4; margin: 1mm 0 1.5mm; word-break: break-word; overflow-wrap: anywhere; }

.wb-cod{ text-align:center; font-weight:600; font-size:18px; padding:2mm 0; }
.wb-codes{ display:grid; grid-template-columns:30mm 1fr; align-items:center; column-gap:6mm; }
.barcode-box{ width:100%; }
.barcode-box canvas{ width:100%; height:auto; display:block; }
.barcode-note{ text-align:center; font-size:10px; margin-top:1mm; }

/* Codes (QR) sizing for screen; print uses exact mm above */
.qrcode-box canvas, .qrcode-box svg{ width:28mm; height:28mm; display:block; }

@media print{
	body{ background:#fff; }
	header.site-header, footer.site-footer, .main-nav, .card{ display:none !important; }
	.main-content{ padding:0; }
	.label-sheet{ border:0; border-radius:0; page-break-inside:avoid; margin:0; }
	/* Optional 4x6 label sizing (may depend on printer settings) */
	@page{ size: 100mm 150mm; margin: 6mm; }
}

/* Compact inline input for table cell edits */
.input-inline{padding:6px 8px;border:1px solid #d8c8bd;border-radius:6px;font:inherit;min-width:120px}
.input-inline:focus{outline:none;border-color:var(--brown-3);box-shadow:0 0 0 2px rgba(183,130,95,.15)}

/* Modal styles */
.modal-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);z-index:1000}
.modal-overlay.open{display:flex}
.modal{background:#fff;border:1px solid #eadfd6;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);width:min(720px, 96vw);position:relative;z-index:2}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eadfd6}
.modal-body{padding:16px}
.modal-close{background:none;border:0;font-size:20px;cursor:pointer;color:var(--muted)}
.modal-backdrop-close{position:absolute;inset:0;background:none;border:0;cursor:default;z-index:1}

/* Filters row: keep controls inline and compact */
.filters-row .input{width:auto}
.filters-row label.text-small{display:inline-flex; align-items:center}

/* Small thumbnail avatar */
.thumb{ width:48px; height:48px; display:block; object-fit:cover; border-radius:6px; border:1px solid #eadfd6; }