:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#18212f;background:#f4f6f9}*{box-sizing:border-box}body{margin:0}.shell{display:flex;min-height:100vh}aside{width:248px;background:#142a37;color:#fff;padding:24px 14px;display:flex;flex-direction:column;flex-shrink:0}.brand{font-weight:850;font-size:18px;letter-spacing:.4px;padding:8px 12px 30px}.brand small{display:block;font-size:10px;font-weight:500;color:#9db0bd;letter-spacing:1.5px;margin-top:7px}nav{display:grid;gap:5px}nav button{border:0;background:none;color:#c7d6e0;padding:13px 14px;border-radius:9px;text-align:left;font-weight:600;cursor:pointer}nav button:hover,nav button.active{background:#295060;color:#fff}.asidefoot{margin-top:auto;color:#90a7b6;font-size:11px;padding:14px}main{flex:1;min-width:0;padding:28px 38px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:15px}h1{font-size:28px;margin:0}header p{color:#758193;margin:6px 0 0;font-size:14px}button{cursor:pointer;border:0;border-radius:8px;padding:11px 16px;background:#137f70;color:#fff;font-weight:700}button:hover{filter:brightness(.94)}button:disabled{opacity:.45;cursor:not-allowed}.outline{background:#fff;color:#1e5362;border:1px solid #cdd7df}.danger{background:#fff0f0;color:#b33232}.card{background:#fff;border:1px solid #e1e7ed;border-radius:13px;padding:22px;margin-bottom:18px;box-shadow:0 2px 12px #172b3808}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.stat{font-size:31px;font-weight:800;color:#17796c}.muted{color:#748193;font-size:13px}.row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:7px;flex:1;min-width:150px}label{font-size:12px;font-weight:750;color:#536272}input,select{width:100%;border:1px solid #d2dbe4;border-radius:8px;padding:11px 12px;background:white;color:#1a2934;font:inherit}input[type=checkbox]{width:18px;height:18px;accent-color:#178272}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:#657384;background:#f3f6f9;font-size:12px}td,th{padding:11px 10px;border-bottom:1px solid #edf0f3;vertical-align:middle}td input{min-width:95px}td button{padding:7px 10px;font-size:12px}.tablewrap{overflow:auto}.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}h2{margin:0;font-size:19px}h3{font-size:15px}.pill{display:inline-block;background:#e5f5f1;color:#137f70;padding:5px 9px;border-radius:20px;font-size:12px;font-weight:700}.empty{padding:35px;text-align:center;color:#8994a2}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.template{border:1px solid #d6e0e7;padding:13px;border-radius:10px;margin:12px 0}.template .row{align-items:center}.small{font-size:12px}.note{background:#fff8e6;border:1px solid #f1d99b;padding:13px;border-radius:9px;color:#805d1b;font-size:13px;margin-bottom:20px}.modal{position:fixed;inset:0;background:#0c1a26a8;display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}.modal>.card{max-width:780px;width:100%;max-height:85vh;overflow:auto}.tag-preview{background:#fff;border:2px solid #1b2835;text-align:center;padding:14px;margin:8px 0}.tag-preview .heading{background:#197a69;color:#fff;padding:8px;font-weight:900;letter-spacing:2px}.tag-preview .product{font-size:19px;font-weight:850;margin:16px 0}.tag-preview .price{font-size:38px;color:#d51c29;font-weight:900}.tag-preview .period{font-size:12px;margin-top:12px}@media(max-width:850px){.shell{display:block}aside{width:100%;padding:10px}.brand{padding:8px}nav{display:flex;overflow:auto}nav button{white-space:nowrap}.asidefoot{display:none}main{padding:18px}.grid{grid-template-columns:1fr}header{align-items:start}}@media print{aside,header,.no-print{display:none!important}main{padding:0}body{background:white}.card{border:0;box-shadow:none;padding:0}}

/* Compact editable promotion listing; keep price columns closer to the left. */
.tablewrap td,.tablewrap th{padding-left:6px;padding-right:6px}
.tablewrap td input[data-listing-field],.tablewrap td input[data-new-listing]{padding:9px 6px}
.tablewrap td textarea[data-listing-field="remark"],.tablewrap td textarea[data-new-listing="remark"]{color:#b00020!important;background:#fff2a8!important;font-weight:700}

/* Direct Listing: center all columns except Barcode and Product / Description. */
.direct-listing-table th:not(:nth-child(-n+2)),
.direct-listing-table td:not(:nth-child(-n+2)){text-align:center;vertical-align:middle;}
.direct-listing-table td:not(:nth-child(-n+2)) input,
.direct-listing-table td:not(:nth-child(-n+2)) textarea{text-align:center;}
.direct-listing-table th:nth-child(-n+2),
.direct-listing-table td:nth-child(-n+2){text-align:left;}

/* Sidebar: collapsible Promotion navigation */
nav .promo-parent{font-weight:800;letter-spacing:.35px}
nav .promo-submenu{display:grid;gap:3px;margin:0 0 5px 10px;padding-left:9px;border-left:2px solid #355464}
nav .promo-submenu button{font-size:11px;line-height:1.35;padding:10px 9px;color:#c6d8e2;white-space:normal}
nav .promo-submenu button.active{background:#295060;color:white}
nav .promo-submenu button.promo-settings{font-size:10px;color:#9eb4c1;border-top:1px solid #365362;border-radius:0;margin-top:3px}

/* HAPHUAT warm gold UI, inspired by approved reference mockup. */
:root{color:#251c0b;background:#fffdf8}
body{background:#fffdf8;color:#251c0b}
aside{width:280px;background:linear-gradient(155deg,#fff8db 0%,#ffefab 48%,#fff2bb 100%);color:#17150e;padding:16px 15px;box-shadow:inset -1px 0 #edda99}
.brand{padding:0 18px 18px;color:#17150e;letter-spacing:.1px;font-size:21px;font-weight:900}
.company-logo{display:block;width:100%;max-width:245px;height:105px;object-fit:contain;object-position:left center;margin:0 0 7px -3px}
.brand-title{font-size:22px;line-height:1.15}.brand small{color:#84631d;font-size:11px;font-weight:700;letter-spacing:1.25px;margin-top:8px}
nav{gap:4px}nav button{display:flex;align-items:center;gap:12px;background:transparent;color:#201a0b;font-size:13px;font-weight:800;padding:12px 12px;border-radius:9px;min-height:42px}
nav button:hover,nav button.active,nav .promo-parent.active{background:linear-gradient(95deg,#ffd43c,#ffc928);color:#1b1608}
.nav-icon{display:inline-flex;justify-content:center;align-items:center;width:21px;min-width:21px;font-size:22px;line-height:1;font-weight:900;color:#1c190f}
.promo-arrow{margin-left:auto;font-size:20px}nav .promo-parent{font-size:13px}
nav .promo-submenu{margin:0 0 8px 28px;padding:0 0 0 16px;border-left:2px solid #d5ac38;gap:1px}
nav .promo-submenu button{font-size:12px;color:#312710;font-weight:650;padding:9px 8px;min-height:34px;position:relative}
nav .promo-submenu button:before{content:'';position:absolute;left:-22px;top:15px;width:7px;height:7px;border:2px solid #d6a72a;border-radius:50%;background:#fff3bb}
nav .promo-submenu button:hover,nav .promo-submenu button.active{background:#ffdb60;color:#261900}
nav .promo-submenu button.promo-settings{color:#866421;border-top-color:#e2c975}
.asidefoot{color:#805d1c;border-top:1px solid #e3c675;padding:16px 10px;font-size:11px}
main{padding:0 34px 36px;background:linear-gradient(180deg,#fff9e9 0,#fffdf8 205px,#fff 400px);min-height:100vh}
header{margin:0 -34px 22px;padding:28px 34px 27px;min-height:130px;background:linear-gradient(115deg,#fffdf8 5%,#fff5cc 70%,#ffd438 100%);border-bottom:1px solid #f7e9b9}
header h1{font-size:31px;color:#2a210e}header p{color:#827765}
button{background:linear-gradient(115deg,#d49e00,#efbc12);color:#fff;border-radius:8px}
.outline{background:#fffdf8;color:#6a4b04;border:1px solid #e5b73a}.danger{background:#fff0ed;color:#a53224}
.card{border-color:#ece8dc;box-shadow:0 3px 14px #5c420c0a;border-radius:12px}
.stat{color:#a47b00}.dashboard-stat{display:flex;align-items:center;gap:22px;min-height:137px}
.stat-icon,.quick-icon{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#ffe69c,#fff7d5);color:#c58a00;border-radius:15px;width:80px;height:80px;font-size:37px;flex-shrink:0}
.dashboard-stat .muted{color:#4c4b53;font-size:14px}.dashboard-stat .stat{margin-top:5px}
.quickstart{padding:25px 28px 30px}.quickstart-head{display:flex;align-items:center;gap:17px}.quick-icon{width:62px;height:62px;border-radius:50%;background:#ffdf72;color:#201600;font-size:29px}.quickstart h2{font-size:22px}.quickstart p{margin:6px 0 16px 80px;line-height:1.65}.quickstart .actions{margin-left:80px}
.note{background:#fff9e9;border-color:#f2cc69;color:#805c17}.note-icon{display:inline-block;background:#efb800;color:white;border-radius:50%;padding:0 6px;font-weight:900;margin-right:5px}
.pill{background:#fff0b4;color:#805600}input[type=checkbox]{accent-color:#d7a300}
label{color:#665735}th{background:#fff8df;color:#78612e}
.tag-preview .heading{background:#e0ae1b}
@media(max-width:850px){aside{width:100%}.company-logo{width:190px;height:80px}main{padding:16px}header{margin:-16px -16px 18px;padding:20px}.dashboard-stat{min-height:110px}.quickstart p,.quickstart .actions{margin-left:0}}
@media print{main{background:white}}

/* V6 Modern Yellow #6 — bright white workspace, restrained gold accents */
:root { color:#192337; background:#fafbfc; }
body { background:#fafbfc; color:#192337; }
aside {
  width:248px; background:linear-gradient(180deg,#fffdf2 0%,#fff8dc 100%);
  color:#171d2a; padding:18px 12px; box-shadow:inset -1px 0 #f0e9ce;
}
.brand { padding:2px 12px 21px; font-size:18px; color:#172136; }
.company-logo {
  width:100%; max-width:195px; height:80px; object-fit:contain;
  object-position:left center; margin:0 0 10px 0;
}
.brand-title { font-size:19px; letter-spacing:.1px; }
.brand small { color:#766d51; font-size:10px; letter-spacing:1px; }
nav { gap:3px; }
nav button {
  color:#1e293b; background:transparent; font-size:12px;
  font-weight:750; min-height:38px; padding:10px 10px;
  border-radius:6px; gap:10px;
}
nav button:hover, nav button.active, nav .promo-parent.active {
  background:#ffca18; color:#151a22;
}
.nav-icon { font-size:17px; width:18px; min-width:18px; }
nav .promo-submenu { border-left:2px solid #e7c64c; margin-left:22px; padding-left:11px; }
nav .promo-submenu button { color:#394150; font-size:11px; min-height:31px; padding:7px 8px; }
nav .promo-submenu button:hover, nav .promo-submenu button.active { background:#ffe783; color:#202020; }
nav .promo-submenu button:before { background:#fffaf0; border-color:#d9b137; }
nav .promo-submenu button.promo-settings { color:#806c3a; }
.asidefoot { border-top:1px solid #eee2bd; color:#796f57; }
main {
  background:#fafbfc; min-height:100vh; padding:0 28px 32px;
}
header {
  min-height:105px; margin:0 -28px 20px; padding:24px 28px;
  background:#fff; border-bottom:3px solid #ffca18;
}
header h1 { font-size:27px; color:#152039; }
header p { color:#778295; }
button { background:#ffca18; color:#161b25; border-radius:7px; }
button:hover { filter:brightness(.97); }
.outline { background:#fff; color:#27354a; border:1px solid #e3bc39; }
.card {
  background:#fff; border:1px solid #e9edf2; border-radius:10px;
  box-shadow:0 2px 10px #202f4608;
}
.dashboard-stat { min-height:110px; gap:15px; }
.stat-icon {
  background:#fff9e9; color:#e3a100; border-radius:11px;
  width:56px; height:56px; font-size:27px;
}
.stat { color:#142238; font-size:28px; }
.dashboard-stat .muted { color:#697689; font-size:12px; }
.quickstart { padding:21px 24px 25px; }
.quickstart-head { gap:12px; }
.quick-icon { width:42px; height:42px; font-size:21px; background:#fff4cb; color:#bc8500; }
.quickstart h2 { font-size:19px; }
.quickstart p { margin:8px 0 14px 54px; }
.quickstart .actions { margin-left:54px; }
.note {
  background:#fffdf2; border:1px solid #f1df9c; color:#66572f;
  border-radius:8px;
}
.note-icon { background:#ffbf00; color:#fff; }
.pill { background:#fff2bf; color:#765400; }
label { color:#536176; }
th { background:#f7f9fc; color:#59677a; }
input[type=checkbox] { accent-color:#e7ae00; }
.tag-preview .heading { background:#e7ae00; }
@media(max-width:850px) {
  aside { width:100%; }
  .company-logo { width:160px; height:65px; }
  main { padding:16px; }
  header { margin:-16px -16px 18px; padding:18px; }
  .quickstart p,.quickstart .actions { margin-left:0; }
}
@media print { main { background:#fff; } }