/* SiteQode Billing — TallyPrime-style interface
   ------------------------------------------------------------------ */

:root {
	--tp-title: #0f2f56;
	--tp-menu: #1c4e88;
	--tp-accent: #2f6fb8;
	--tp-bg: #d7e1ea;
	--tp-panel: #ffffff;
	--tp-line: #9fb3c8;
	--tp-line-soft: #ccd8e4;
	--tp-head: #e4ecf4;
	--tp-select: #ffd966;
	--tp-key: #b3261e;
	--tp-btn: #eef3f8;
	--tp-btn-hover: #dbe6f2;
	--tp-text: #101820;
	--tp-muted: #5b6b7c;
	--tp-green: #1e7a46;
	--tp-red: #b3261e;
	--tp-amber: #a76a00;
	--tp-row: 28px;
	--tp-side: 176px;
}

body.sq-theme-green {
	--tp-title: #12432c;
	--tp-menu: #1b6340;
	--tp-accent: #2a8a5c;
	--tp-bg: #dbe8df;
	--tp-head: #e3efe7;
}

body.sq-theme-slate {
	--tp-title: #23282d;
	--tp-menu: #3a444d;
	--tp-accent: #5b6b7c;
	--tp-bg: #dfe3e7;
	--tp-head: #e9edf1;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body.sq-app {
	margin: 0;
	background: var(--tp-bg);
	color: var(--tp-text);
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

body.sq-compact { font-size: 12px; --tp-row: 24px; }

.sq-num, td.sq-num, th.sq-num, input.sq-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

a { color: var(--tp-menu); }

:focus-visible {
	outline: 2px solid var(--tp-key);
	outline-offset: -2px;
}

/* ------------------------------------------------------------------ shell */

.sq-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.sq-titlebar {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--tp-title);
	color: #fff;
	padding: 0 12px;
	height: 34px;
	flex: 0 0 auto;
}

.sq-titlebar .sq-brand {
	font-weight: 600;
	letter-spacing: .2px;
	font-size: 14px;
}

.sq-titlebar .sq-brand span { font-weight: 300; opacity: .8; }

.sq-titlebar .sq-company {
	flex: 1 1 auto;
	text-align: center;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sq-titlebar .sq-meta {
	font-size: 12px;
	opacity: .85;
	white-space: nowrap;
}

.sq-menubar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	background: var(--tp-menu);
	padding: 0 6px;
	min-height: 28px;
	flex: 0 0 auto;
}

.sq-menubar a,
.sq-menubar button {
	appearance: none;
	background: transparent;
	border: 0;
	color: #eaf1f8;
	font: inherit;
	font-size: 12px;
	padding: 4px 8px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.sq-menubar a:hover,
.sq-menubar button:hover,
.sq-menubar a.is-current {
	background: rgba(255,255,255,.18);
}

.sq-menubar .sq-k { color: #ffd966; font-weight: 600; }

.sq-menubar .sq-sep {
	width: 1px;
	height: 16px;
	background: rgba(255,255,255,.3);
	margin: 0 6px;
}

.sq-body {
	display: flex;
	flex: 1 1 auto;
	align-items: stretch;
	min-height: 0;
}

.sq-main {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sq-crumb {
	font-size: 12px;
	color: var(--tp-title);
	font-weight: 600;
	padding: 2px 2px 0;
}

.sq-crumb a { color: inherit; text-decoration: none; }
.sq-crumb a:hover { text-decoration: underline; }
.sq-crumb .sq-sep { color: var(--tp-muted); margin: 0 6px; font-weight: 400; }

/* ------------------------------------------------------------ right rail */

.sq-rail {
	flex: 0 0 var(--tp-side);
	width: var(--tp-side);
	background: var(--tp-head);
	border-left: 1px solid var(--tp-line);
	padding: 8px 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sq-rail-title {
	font-size: 11px;
	color: var(--tp-muted);
	padding: 2px 4px 4px;
	border-bottom: 1px solid var(--tp-line-soft);
	margin-bottom: 2px;
}

.sq-btn {
	display: block;
	width: 100%;
	text-align: left;
	background: var(--tp-panel);
	border: 1px solid var(--tp-line-soft);
	border-radius: 0;
	color: var(--tp-text);
	font: inherit;
	font-size: 12px;
	padding: 5px 8px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sq-btn:hover { background: var(--tp-btn-hover); }
.sq-btn .sq-k { color: var(--tp-key); font-weight: 700; }
.sq-btn[disabled] { opacity: .45; cursor: default; }
.sq-rail .sq-spacer { flex: 1 1 auto; }

/* --------------------------------------------------------------- panels */

.sq-panel {
	background: var(--tp-panel);
	border: 1px solid var(--tp-line);
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.sq-panel-head {
	background: var(--tp-menu);
	color: #fff;
	padding: 5px 10px;
	font-weight: 600;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.sq-panel-head .sq-sub {
	font-weight: 400;
	font-size: 12px;
	opacity: .85;
}

.sq-panel-body { padding: 10px; }
.sq-panel-body.sq-flush { padding: 0; }

.sq-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.sq-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: start; }
.sq-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start; }

/* ---------------------------------------------------------- gateway menu */

.sq-gateway { display: grid; grid-template-columns: 320px 1fr; gap: 8px; align-items: start; }

.sq-info dl { margin: 0; }

.sq-info .sq-info-block { border-bottom: 1px solid var(--tp-line-soft); padding: 8px 10px; }
.sq-info .sq-info-block:last-child { border-bottom: 0; }
.sq-info h3 {
	margin: 0 0 6px;
	font-size: 12px;
	color: var(--tp-muted);
	font-weight: 600;
}
.sq-info .sq-line { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.sq-info .sq-line b { font-variant-numeric: tabular-nums; font-weight: 600; }

.sq-menu { list-style: none; margin: 0; padding: 0; }

.sq-menu .sq-group {
	background: var(--tp-head);
	color: var(--tp-title);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-top: 1px solid var(--tp-line-soft);
	border-bottom: 1px solid var(--tp-line-soft);
}

.sq-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 10px;
	color: var(--tp-text);
	text-decoration: none;
	border-bottom: 1px solid #f0f4f8;
	min-height: var(--tp-row);
}

.sq-menu a:hover,
.sq-menu a.is-active {
	background: var(--tp-select);
	color: #000;
}

.sq-menu a .sq-hint { color: var(--tp-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sq-menu a:hover .sq-hint, .sq-menu a.is-active .sq-hint { color: #4a3c00; }
.sq-menu a .sq-first { color: var(--tp-key); font-weight: 700; }
.sq-menu a:hover .sq-first, .sq-menu a.is-active .sq-first { color: var(--tp-key); }

/* --------------------------------------------------------------- tables */

.sq-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.sq-table th {
	background: var(--tp-head);
	color: var(--tp-title);
	text-align: left;
	font-weight: 600;
	font-size: 12px;
	padding: 5px 8px;
	border-bottom: 1px solid var(--tp-line);
	border-right: 1px solid var(--tp-line-soft);
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

.sq-table td {
	padding: 4px 8px;
	border-bottom: 1px solid #eef2f6;
	border-right: 1px solid #f2f5f8;
	height: var(--tp-row);
	vertical-align: middle;
}

.sq-table th:last-child, .sq-table td:last-child { border-right: 0; }
.sq-table tbody tr:hover { background: #fff7dd; }
.sq-table tbody tr.is-active { background: var(--tp-select); }
.sq-table tbody tr.is-active td { border-bottom-color: #e3b93a; }

.sq-table tfoot td {
	background: var(--tp-head);
	font-weight: 700;
	border-top: 1px solid var(--tp-line);
	border-bottom: 0;
}

.sq-table a { color: var(--tp-menu); text-decoration: none; }
.sq-table a:hover { text-decoration: underline; }

.sq-scroll { overflow: auto; max-height: calc(100vh - 220px); }

.sq-empty {
	padding: 28px 16px;
	text-align: center;
	color: var(--tp-muted);
}
.sq-empty strong { display: block; color: var(--tp-text); margin-bottom: 4px; font-size: 14px; }

/* --------------------------------------------------------------- forms */

.sq-form { display: grid; gap: 10px; }

.sq-field { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; }
.sq-field > label { color: var(--tp-muted); font-size: 12px; }
.sq-field.sq-stack { grid-template-columns: 1fr; }

.sq-input, .sq-select, .sq-textarea {
	width: 100%;
	font: inherit;
	color: var(--tp-text);
	background: #fffdf2;
	border: 1px solid var(--tp-line);
	border-radius: 0;
	padding: 4px 6px;
	height: var(--tp-row);
}

.sq-textarea { height: auto; min-height: 60px; resize: vertical; }
.sq-select { background: #fffdf2; }

.sq-input:focus, .sq-select:focus, .sq-textarea:focus {
	background: #fff;
	outline: 2px solid var(--tp-accent);
	outline-offset: -2px;
}

.sq-input[readonly] { background: #f4f6f8; color: var(--tp-muted); }

.sq-help { font-size: 11px; color: var(--tp-muted); }

.sq-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.sq-action {
	appearance: none;
	font: inherit;
	font-size: 12px;
	border: 1px solid var(--tp-line);
	background: var(--tp-btn);
	color: var(--tp-text);
	padding: 5px 12px;
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}
.sq-action:hover { background: var(--tp-btn-hover); }
.sq-action.sq-primary { background: var(--tp-menu); border-color: var(--tp-menu); color: #fff; }
.sq-action.sq-primary:hover { background: var(--tp-accent); }
.sq-action.sq-danger { color: var(--tp-red); border-color: #d9b3b0; }
.sq-action.sq-danger:hover { background: #fbeceb; }

/* ------------------------------------------------------------- invoice */

.sq-items th { font-size: 11px; }
.sq-items td { padding: 2px 4px; }
.sq-items .sq-input, .sq-items .sq-select { height: 26px; padding: 2px 5px; }
.sq-items td.sq-grip { width: 26px; text-align: center; color: var(--tp-muted); cursor: grab; }
.sq-items .sq-del {
	border: 0; background: transparent; color: var(--tp-red);
	cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px;
}

.sq-totals { margin-left: auto; width: 320px; }
.sq-totals .sq-line {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 3px 0; border-bottom: 1px dotted var(--tp-line-soft);
}
.sq-totals .sq-line b { font-variant-numeric: tabular-nums; }
.sq-totals .sq-grand {
	border-top: 2px solid var(--tp-title);
	border-bottom: 0;
	margin-top: 4px; padding-top: 6px;
	font-size: 15px; font-weight: 700;
}

.sq-words {
	background: var(--tp-head);
	border: 1px solid var(--tp-line-soft);
	padding: 6px 8px;
	font-size: 12px;
}

/* ---------------------------------------------------------------- misc */

.sq-tag {
	display: inline-block;
	font-size: 11px;
	padding: 1px 7px;
	border: 1px solid currentColor;
	white-space: nowrap;
}
.sq-tag.is-paid { color: var(--tp-green); }
.sq-tag.is-part { color: var(--tp-amber); }
.sq-tag.is-due { color: var(--tp-red); }
.sq-tag.is-draft { color: var(--tp-muted); }
.sq-tag.is-cancelled { color: var(--tp-muted); text-decoration: line-through; }

.sq-stat {
	border: 1px solid var(--tp-line);
	background: var(--tp-panel);
	padding: 10px 12px;
}
.sq-stat .sq-label { font-size: 12px; color: var(--tp-muted); }
.sq-stat .sq-value {
	font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums;
	margin-top: 2px; letter-spacing: -.3px;
}
.sq-stat .sq-note { font-size: 11px; color: var(--tp-muted); margin-top: 2px; }
.sq-stat.is-good .sq-value { color: var(--tp-green); }
.sq-stat.is-warn .sq-value { color: var(--tp-red); }

.sq-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 8px; }
.sq-bars .sq-bar-wrap {
	flex: 1 1 0; display: flex; flex-direction: column;
	align-items: center; justify-content: flex-end; height: 100%; gap: 4px;
}
.sq-bars .sq-bar {
	width: 100%;
	background: var(--tp-accent);
	min-height: 2px;
	position: relative;
}
.sq-bars .sq-bar.is-due { background: #c9d8e8; }
.sq-bars .sq-bar-label { font-size: 11px; color: var(--tp-muted); white-space: nowrap; }
.sq-bars .sq-bar-value { font-size: 11px; font-variant-numeric: tabular-nums; }

.sq-legend { display: flex; gap: 14px; font-size: 11px; color: var(--tp-muted); margin-top: 6px; }
.sq-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; }

/* --------------------------------------------------------------- footer */

.sq-statusbar {
	background: var(--tp-title);
	color: #cfdcea;
	font-size: 11px;
	padding: 4px 12px;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	flex: 0 0 auto;
}
.sq-statusbar .sq-k { color: #ffd966; font-weight: 600; }
.sq-statusbar .sq-right { margin-left: auto; }

/* --------------------------------------------------------------- notice */

.sq-notice {
	border: 1px solid var(--tp-line);
	border-left: 4px solid var(--tp-accent);
	background: #f2f7fc;
	padding: 8px 10px;
	font-size: 12px;
}
.sq-notice.is-error { border-left-color: var(--tp-red); background: #fdf1f0; }
.sq-notice.is-ok { border-left-color: var(--tp-green); background: #f0f8f3; }

.sq-toast {
	position: fixed; right: 12px; bottom: 34px; z-index: 60;
	background: var(--tp-title); color: #fff;
	padding: 8px 14px; font-size: 12px;
	border-left: 4px solid var(--tp-select);
	max-width: 320px;
}

/* --------------------------------------------------------------- modal */

.sq-modal-back {
	position: fixed; inset: 0; background: rgba(15,47,86,.45);
	display: flex; align-items: flex-start; justify-content: center;
	padding: 60px 16px; z-index: 50;
}
.sq-modal {
	background: var(--tp-panel); border: 1px solid var(--tp-title);
	width: 100%; max-width: 560px; box-shadow: 0 8px 24px rgba(15,47,86,.3);
}
.sq-modal .sq-panel-head { cursor: default; }
.sq-modal-body { padding: 12px; max-height: 70vh; overflow: auto; }
.sq-modal-foot {
	padding: 8px 12px; border-top: 1px solid var(--tp-line-soft);
	display: flex; gap: 6px; justify-content: flex-end; background: var(--tp-head);
}

/* --------------------------------------------------------------- login */

.sq-login-wrap {
	min-height: 100vh; display: flex; align-items: center; justify-content: center;
	background: var(--tp-bg); padding: 20px;
}
.sq-login { width: 100%; max-width: 380px; }
.sq-login .sq-panel-body { padding: 16px; }
.sq-login label { display: block; font-size: 12px; color: var(--tp-muted); margin-bottom: 3px; }
.sq-login input[type=text], .sq-login input[type=password] {
	width: 100%; font: inherit; padding: 5px 7px; margin-bottom: 10px;
	border: 1px solid var(--tp-line); background: #fffdf2; border-radius: 0;
}
.sq-login input[type=submit] {
	width: 100%; font: inherit; padding: 6px; cursor: pointer;
	background: var(--tp-menu); color: #fff; border: 0; border-radius: 0;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
	.sq-gateway { grid-template-columns: 1fr; }
	.sq-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.sq-grid-3, .sq-grid-2 { grid-template-columns: 1fr; }
	.sq-body { flex-direction: column-reverse; }
	.sq-rail {
		width: 100%; flex: 0 0 auto;
		flex-direction: row; overflow-x: auto;
		border-left: 0; border-top: 1px solid var(--tp-line);
		padding: 6px;
	}
	.sq-rail .sq-rail-title, .sq-rail .sq-spacer { display: none; }
	.sq-btn { width: auto; flex: 0 0 auto; }
	.sq-field { grid-template-columns: 1fr; gap: 3px; }
	.sq-totals { width: 100%; }
	.sq-scroll { max-height: none; }
	.sq-titlebar { height: auto; padding: 6px 10px; flex-wrap: wrap; gap: 8px; }
	.sq-titlebar .sq-company { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------- hidden helper

The invoice screen toggles GST columns and total rows with the
`hidden` attribute. Table cells and flex rows set their own display,
which would otherwise win, so this has to be forced. */

[hidden] { display: none !important; }