/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
	--gold: #C9A84C;
	--gold-light: #E2C97E;
	--gold-dim: #8A6F32;
	--obsidian: #0D0D0F;
	--charcoal: #161618;
	--ink: #1E1E22;
	--mist: #2A2A30;
	--ash: #3A3A42;
	--smoke: #6B6B78;
	--pearl: #F0EDE8;
	--cream: #D4CFC8;

	/* Roles that used to be written as fixed colours in the views, so a theme can change them. */
	--gold-rgb: 201,168,76;
	--btn-a: var(--gold-dim);          /* gold button gradient */
	--btn-b: var(--gold);
	--on-gold: #0D0D0F;                /* text on a gold background */
	--stripe: #1A1A1E;                 /* every other table row */
	--cell-border: rgba(58, 58, 66, 0.5);
	--overlay: rgba(13,13,15,0.75);
	--danger: #E07060;
	--danger-rgb: 192,57,43;
	--danger-bg: #3a1d1d;
	--danger-border: #7a3030;
	--danger-text: #f0c8c8;
	--warn-bg: #3a2e12;
	--warn-border: #7a5f20;
	--warn-text: #f0dca8;
	--success-text: #6DD4A0;
}

/*
 * Light theme. The default (:root above) is the dark theme; light is switched on with
 * <html data-theme="light"> (see layouts/_theme_script and the toggle in the top bar).
 * Variable names keep their dark-theme meaning: --obsidian is the page, --charcoal a card,
 * --ink a recessed area (inputs, table headers), --ash a border, --smoke muted text,
 * --cream body text, --pearl strong text. Golds are darkened so gold text stays readable on ivory.
 */
:root[data-theme="light"] {
	--gold: #9A7316;
	--gold-light: #7A5A0F;
	--gold-dim: #C9A84C;
	--obsidian: #F7F4ED;
	--charcoal: #FFFFFF;
	--ink: #F3EEE3;
	--mist: #EAE2D0;
	--ash: #DDD5C4;
	--smoke: #6F695C;
	--pearl: #1B1812;
	--cream: #3B372F;

	--gold-rgb: 154,115,22;
	--btn-a: #C9A84C;
	--btn-b: #E2C97E;
	--on-gold: #1B1812;
	--stripe: #FAF7F0;
	--cell-border: rgba(221, 213, 196, 0.7);
	--overlay: rgba(27,24,18,0.45);
	--danger: #B83A2B;
	--danger-rgb: 192,57,43;
	--danger-bg: #FBE9E6;
	--danger-border: #E3A79F;
	--danger-text: #7A2418;
	--warn-bg: #FFF4D6;
	--warn-border: #E2C16A;
	--warn-text: #6B4E0A;
	--success-text: #1F7A4D;
	color-scheme: light;
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #CBBF9F; }

/* Theme toggle button (top bar and login screens) */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--ash);
	background: var(--ink);
	color: var(--smoke);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}
.theme-toggle:hover { border-color: var(--gold-dim); color: var(--gold); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
	font-family: 'DM Sans', sans-serif;
	background-color: var(--obsidian);
	color: var(--pearl);
	height: 100vh;
	overflow: hidden;
}
.font-serif { font-family: 'Cormorant Garamond', serif; }
.gold { color: var(--gold); }
.gold-border { border-color: var(--gold-dim); }
.bg-ink { background-color: var(--ink); }
.bg-charcoal { background-color: var(--charcoal); }
.bg-mist { background-color: var(--mist); }

/* Scrollbars */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ash); border-radius: 2px; }

/* Product card hover */
.product-card {
	transition: all 0.2s ease;
	cursor: pointer;
	border: 1px solid transparent;
}
.product-card:hover {
	border-color: var(--gold-dim);
	background-color: var(--mist);
	transform: translateY(-1px);
}
.product-card.active {
	border-color: var(--gold);
	background-color: var(--mist);
}

/* Gold button */
.btn-gold {
	background: linear-gradient(135deg, var(--btn-a) 0%, var(--btn-b) 50%, var(--btn-a) 100%);
	color: var(--on-gold);
	font-weight: 500;
	letter-spacing: 0.05em;
	transition: all 0.2s;
}
.btn-gold:hover { filter: brightness(1.1); }

/* Quiet and warning buttons, and the grey badge */
.btn-ghost {
	background: transparent;
	color: var(--cream);
	border: 1px solid var(--ash);
	transition: all 0.2s;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); }
.btn-danger {
	background: var(--danger-bg);
	color: var(--danger-text);
	border: 1px solid var(--danger-border);
	transition: all 0.2s;
}
.btn-danger:hover { filter: brightness(1.1); }
.badge-muted {
	background: var(--ink);
	color: var(--smoke);
	border: 1px solid var(--ash);
}

/* Category pill */
.cat-pill {
	border: 1px solid var(--ash);
	color: var(--smoke);
	transition: all 0.15s;
	cursor: pointer;
}
.cat-pill:hover, .cat-pill.active {
	border-color: var(--gold-dim);
	color: var(--gold-light);
	background: rgba(var(--gold-rgb),0.07);
}

/* Cart item */
.cart-item { border-bottom: 1px solid var(--ash); }
.cart-item:last-child { border-bottom: none; }

/* Input */
.pos-input {
	background: var(--ink);
	border: 1px solid var(--ash);
	color: var(--pearl);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.pos-input:focus { 
	border-color: var(--gold-dim);
	box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.08);
}
.pos-input::placeholder { color: var(--smoke); }

/* Divider */
.gold-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

/* Badge */
.badge-gold {
	background: rgba(var(--gold-rgb),0.15);
	color: var(--gold-light);
	border: 1px solid rgba(var(--gold-rgb),0.3);
}

/* Numpad key */
.numpad-key {
	background: var(--ink);
	border: 1px solid var(--ash);
	color: var(--pearl);
	transition: all 0.1s;
	cursor: pointer;
	user-select: none;
}
.numpad-key:hover { background: var(--mist); border-color: var(--gold-dim); }
.numpad-key:active { transform: scale(0.96); }

/* Status dot */
.dot-green { width: 7px; height: 7px; border-radius: 50%; background: #4CAF79; display: inline-block; }

/* Shimmer on gold text */
@keyframes shimmer {
	0%   { background-position: -200% center; }
	100% { background-position: 200% center; }
}
.shimmer-text {
	background: linear-gradient(90deg, var(--gold-dim), var(--gold-light), var(--gold-dim));
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shimmer 4s linear infinite;
}

/* Payment method */
.pay-method {
	border: 1px solid var(--ash);
	cursor: pointer;
	transition: all 0.15s;
}
.pay-method:hover, .pay-method.active {
	border-color: var(--gold);
	background: rgba(var(--gold-rgb),0.08);
}
.pay-method.active .pay-icon { color: var(--gold); }

/* Tabulator */
body .tabulator {
  background: var(--charcoal);
  border: none;
}

body .tabulator .tabulator-header {
  background: var(--ink);
  border-bottom: 1px solid var(--ash);
}

body .tabulator .tabulator-header .tabulator-col {
  background: transparent;
  color: var(--smoke);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

body .tabulator .tabulator-row {
  background: var(--charcoal);
  color: var(--cream);
  border-bottom: 1px solid var(--ash);
}

body .tabulator .tabulator-row.tabulator-row-odd {
  background: var(--charcoal);
}

body .tabulator .tabulator-row.tabulator-row-even {
  background: var(--stripe);
  color: var(--cream);
}

body .tabulator .tabulator-row.tabulator-row-odd:hover,
body .tabulator .tabulator-row.tabulator-row-even:hover {
  background: rgba(var(--gold-rgb), 0.08);
}

body .tabulator .tabulator-row .tabulator-cell {
  border-right: 1px solid var(--cell-border);
}

body .tabulator .tabulator-tableholder,
body .tabulator .tabulator-tableholder .tabulator-table {
  background: var(--charcoal);
}

body .tabulator .tabulator-footer {
  background: var(--ink);
  border-top: 1px solid var(--ash);
  color: var(--smoke);
}

body .tabulator .tabulator-footer .tabulator-page {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--ash);
}

body .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover,
body .tabulator .tabulator-footer .tabulator-page.active {
  background: var(--gold);
  color: var(--on-gold);
  border-color: var(--gold);
}

body .tabulator .tabulator-footer .tabulator-page.disabled {
  opacity: 0.4;
}

body .tabulator .tabulator-cell {
  color: var(--pearl);
  font-size: 13px;
}

/* ===================== SIDEBAR STYLES ===================== */
#sidebar {
	width: 220px;
	background: var(--charcoal);
	border-right: 1px solid var(--ash);
	transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
}
#sidebar.collapsed { width: 60px; }

/* Nav section label */
.nav-section-label {
	font-size: 9px;
	letter-spacing: 0.2em;
	color: var(--smoke);
	padding: 0 14px;
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.15s;
}
#sidebar.collapsed .nav-section-label { opacity: 0; }

/* Nav item */
.nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	margin: 1px 8px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	border: 1px solid transparent;
	white-space: nowrap;
	text-decoration: none;
}
.nav-item:hover { background: var(--mist); }
.nav-item.active {
	background: rgba(var(--gold-rgb),0.1);
	border-color: rgba(var(--gold-rgb),0.18);
}
.nav-item .nav-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s;
}
.nav-item.active .nav-icon { background: rgba(var(--gold-rgb),0.12); }
.nav-item svg { flex-shrink: 0; }
.nav-item .nav-label {
	font-size: 13px;
	color: var(--smoke);
	transition: color 0.15s, opacity 0.15s;
	overflow: hidden;
}
.nav-item.active .nav-label { color: var(--gold-light); }
.nav-item:hover .nav-label { color: var(--cream); }

/* Badge on nav item */
.nav-badge {
	margin-left: auto;
	background: rgba(var(--gold-rgb),0.15);
	color: var(--gold-light);
	border: 1px solid rgba(var(--gold-rgb),0.3);
	font-size: 9px;
	padding: 1px 6px;
	border-radius: 20px;
	flex-shrink: 0;
	transition: opacity 0.15s;
}
#sidebar.collapsed .nav-badge,
#sidebar.collapsed .nav-label { opacity: 0; width: 0; overflow: hidden; }

/* Tooltip for collapsed state */
.nav-item { position: relative; }
#sidebar.collapsed .nav-item::after {
	content: attr(data-label);
	position: absolute;
	left: 54px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--ink);
	border: 1px solid var(--ash);
	color: var(--cream);
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	/* pointer-events: none; */
	transition: opacity 0.15s;
	z-index: 100;
}
#sidebar.collapsed .nav-item:hover::after { opacity: 1; }

/* Collapse toggle button */
#collapse-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: 1px solid var(--ash);
	background: var(--ink);
	cursor: pointer;
	transition: all 0.15s;
	flex-shrink: 0;
}
#collapse-btn:hover { border-color: var(--gold-dim); background: var(--mist); }
#collapse-btn svg { transition: transform 0.25s; }
#sidebar.collapsed #collapse-btn svg { transform: rotate(180deg); }

/* Sidebar top strip */
.sidebar-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 12px 10px;
	border-bottom: 1px solid var(--ash);
	min-height: 48px;
}
.sidebar-logo-text {
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	letter-spacing: 0.22em;
	white-space: nowrap;
	overflow: hidden;
	transition: opacity 0.15s, width 0.25s;
}
#sidebar.collapsed .sidebar-logo-text { opacity: 0; width: 0; }

/* Sidebar footer */
.sidebar-footer {
	border-top: 1px solid var(--ash);
	padding: 10px 8px;
	margin-top: auto;
}
.sidebar-footer .nav-item { margin: 0; }

/* Divider in sidebar */
.sidebar-divider {
	height: 1px;
	background: var(--ash);
	margin: 6px 16px;
}

/* Active indicator bar */
.nav-item.active::before {
	content: '';
	position: absolute;
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 18px;
	background: var(--gold);
	border-radius: 2px;
}
/* ===================== END SIDEBAR ===================== */

/* ===== LUMIÈRE SIDEBAR NAV LINK ===== */
.lumiere-nav-link {
  position: relative;
  border: 1px solid transparent;
  border-radius: 8px !important;
  transition: background 0.15s, border-color 0.15s !important;
	margin: 1px 8px;
	padding: 9px 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	text-decoration: none;
}

.lumiere-nav-link .lumiere-nav-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s;
}

.lumiere-nav-link.active .lumiere-nav-icon { background: rgba(var(--gold-rgb),0.12); }

/* Hover */
.lumiere-nav-link:hover {
  background: var(--mist) !important;
  border-color: rgba(var(--gold-rgb), 0.15) !important;
  opacity: 1 !important;
}

.lumiere-nav-link:hover .lumiere-nav-svg {
  stroke: var(--gold) !important;
  transition: stroke 0.15s;
}

.lumiere-nav-link:hover .lumiere-nav-label {
  color: var(--cream) !important;
}

/* Active */
.lumiere-nav-link.active {
  background: rgba(var(--gold-rgb), 0.1) !important;
  border-color: rgba(var(--gold-rgb), 0.2) !important;
  opacity: 1 !important;
}

.lumiere-nav-link.active .lumiere-nav-svg {
  stroke: var(--gold) !important;
}

.lumiere-nav-link.active .lumiere-nav-label {
  color: var(--gold-light) !important;
}

/* Active left bar indicator */
.lumiere-nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: linear-gradient(180deg, var(--gold-dim), var(--gold));
  border-radius: 0 2px 2px 0;
}

.lumiere-nav-link { position: relative; }
#sidebar.collapsed .lumiere-nav-link::after {
	content: attr(data-label);
	position: absolute;
	left: 54px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--ink);
	border: 1px solid var(--ash);
	color: var(--cream);
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	/* pointer-events: none; */
	transition: opacity 0.15s;
	z-index: 100;
}
#sidebar.collapsed .lumiere-nav-link:hover::after { opacity: 1; }

.lumiere-nav-link svg { flex-shrink: 0; }
.lumiere-nav-link .lumiere-nav-label {
	font-size: 13px;
	color: var(--smoke);
	transition: color 0.15s, opacity 0.15s;
	overflow: hidden;
}
.lumiere-nav-link.active .lumiere-nav-label { color: var(--gold-light); }
.lumiere-nav-link:hover .lumiere-nav-label { color: var(--cream); }

/* Active indicator bar */
.lumiere-nav-link.active::before {
	content: '';
	position: absolute;
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 18px;
	background: var(--gold);
	border-radius: 2px;
}

/* ===== SELECT ===== */
select.pos-input,
.lumiere-select {
  background: var(--ink);
  border: 1px solid var(--ash);
  color: var(--pearl);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Custom gold chevron arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238A6F32' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-color: var(--ink);
  padding-right: 36px;
  cursor: pointer;
	width: 100%;
}

select.pos-input:focus,
.lumiere-select:focus {
	border-color: var(--gold-dim);
	box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.08); 
}

select.pos-input:hover,
.lumiere-select:hover {
  border-color: var(--ash);
  background-color: var(--mist);
}

select.pos-input:disabled,
.lumiere-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== OPTION ===== */
/* Note: option styling is limited by browsers — 
   background and color are the main supported properties */
select.pos-input option,
.lumiere-select option {
  background-color: var(--ink);
  color: var(--pearl);
}

select.pos-input option:checked,
.lumiere-select option:checked {
  background-color: var(--mist);
  color: var(--gold-light);
}

select.pos-input option:disabled,
.lumiere-select option:disabled {
  color: var(--smoke);
}

/* Placeholder option (first option with empty value) */
select.pos-input option[value=""],
.lumiere-select option[value=""] {
  color: var(--smoke);
}

@media print {
	/* Hide everything except the label card */
	body * { visibility: hidden; }
	#print-label, #print-label * { visibility: visible; }
	#print-label {
		position: absolute;
		top: 0; left: 0;
		width: 100%;
	}
}