/* Kukidu theme: TS Hakwaty (all nine weights), brand colours, Kukidu pages. */

@font-face { font-family: "TS Hakwaty"; font-weight: 100; font-display: swap; src: url("/assets/kukidu/fonts/hakwaty/TSHakwaty-Thin.otf") format("opentype"); }
@font-face { font-family: "TS Hakwaty"; font-weight: 200; font-display: swap; src: url("/assets/kukidu/fonts/hakwaty/TSHakwaty-ExtraLight.otf") format("opentype"); }
@font-face { font-family: "TS Hakwaty"; font-weight: 300; font-display: swap; src: url("/assets/kukidu/fonts/hakwaty/TSHakwaty-Light.otf") format("opentype"); }
@font-face { font-family: "TS Hakwaty"; font-weight: 400; font-display: swap; src: url("/assets/kukidu/fonts/hakwaty/TSHakwaty-Regular.otf") format("opentype"); }
@font-face { font-family: "TS Hakwaty"; font-weight: 500; font-display: swap; src: url("/assets/kukidu/fonts/hakwaty/TSHakwaty-Medium.otf") format("opentype"); }
@font-face { font-family: "TS Hakwaty"; font-weight: 600; font-display: swap; src: url("/assets/kukidu/fonts/hakwaty/TSHakwaty-DemiBold.otf") format("opentype"); }
@font-face { font-family: "TS Hakwaty"; font-weight: 700; font-display: swap; src: url("/assets/kukidu/fonts/hakwaty/TSHakwaty-Bold.otf") format("opentype"); }
@font-face { font-family: "TS Hakwaty"; font-weight: 800; font-display: swap; src: url("/assets/kukidu/fonts/hakwaty/TSHakwaty-ExtraBold.otf") format("opentype"); }
@font-face { font-family: "TS Hakwaty"; font-weight: 900; font-display: swap; src: url("/assets/kukidu/fonts/hakwaty/TSHakwaty-Black.otf") format("opentype"); }

/* One colour: Kukidu red in shades, on warm greys. Red means "Kukidu" or "look here";
   the darker the shade, the more it needs attention. Everything in order stays grey. */
:root,
[data-theme="light"] {
	--font-stack: "TS Hakwaty", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--kk-red-50: #fef2f3;
	--kk-red-100: #fde3e5;
	--kk-red-200: #fac5ca;
	--kk-red-300: #f59aa2;
	--kk-red-400: #ef5d6a;
	--kk-red-500: #ed1c2e;
	--kk-red-600: #c8121f;
	--kk-red-700: #9e0e19;
	--kk-red-800: #730b13;
	--kk-ink: #1c1816;
	--kk-ink-2: #6b635f;
	--kk-line: #ebe6e3;
	--kk-soft: #f7f4f2;
	--kk-surface: #ffffff;
	--kukidu-red: var(--kk-red-500);
	--kukidu-red-dark: var(--kk-red-600);
	--btn-primary: var(--kk-red-500);
	--primary-color: var(--kk-red-500);
	--primary: var(--kk-red-500);
}

[data-theme="dark"] {
	--font-stack: "TS Hakwaty", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--kk-red-50: #2a1315;
	--kk-red-100: #3a181b;
	--kk-red-200: #5a2026;
	--kk-red-300: #8a2a33;
	--kk-red-400: #c23a46;
	--kk-red-500: #ed1c2e;
	--kk-red-600: #f25d69;
	--kk-red-700: #f7a1a8;
	--kk-red-800: #fbd0d4;
	--kk-ink: #f3efed;
	--kk-ink-2: #a9a19c;
	--kk-line: #302a28;
	--kk-soft: #221d1b;
	--kk-surface: #191514;
	--kukidu-red: var(--kk-red-500);
	--kukidu-red-dark: #c8121f;
	--btn-primary: var(--kk-red-500);
	--primary-color: var(--kk-red-500);
	--primary: var(--kk-red-500);
}

/* Arabic reads better a touch larger than Frappe's 13px default. */
html[lang="ar"] body {
	font-size: 14px;
}

.navbar {
	border-top: 3px solid var(--kk-red-500);
}

.navbar .app-logo {
	max-height: 28px;
	width: auto;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--kk-red-500);
	border-color: var(--kk-red-500);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--kk-red-600);
	border-color: var(--kk-red-600);
	color: #fff;
}

.page-container a:not(.btn):not(.dropdown-item):not(.nav-link):hover {
	color: var(--kk-red-600);
}

.web-footer,
.page-card-head img,
.login-content .app-logo {
	font-family: var(--font-stack);
}

/* ------------------------------------------------------------- shared */
.kk {
	font-family: var(--font-stack);
	color: var(--kk-ink);
}

.kk-muted {
	color: var(--kk-ink-2);
	font-size: 13px;
	margin: 2px 0 0;
}

.kk-sub {
	color: var(--kk-ink-2);
	font-size: 13px;
}

.kk-red,
.kk-bad {
	color: var(--kk-red-600);
	font-weight: 700;
}

.kk-ok {
	color: var(--kk-ink-2);
}

.kk-wait {
	color: var(--kk-red-400);
}

.kk-section-title {
	font-size: 15px;
	font-weight: 800;
	margin: 24px 0 8px;
}

.kk-pill {
	border: 1px solid var(--kk-line);
	color: var(--kk-ink-2);
	border-radius: 999px;
	padding: 2px 12px;
	font-size: 12px;
	white-space: nowrap;
}

.kk-notice {
	background: var(--kk-red-50);
	color: var(--kk-red-700);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 600;
	margin-top: 12px;
	cursor: pointer;
}

.kk-card-plain {
	background: var(--kk-surface);
	border: 1px solid var(--kk-line);
	border-radius: 16px;
	padding: 16px;
	margin-top: 14px;
}

.kk-empty {
	color: var(--kk-ink-2);
	text-align: center;
}

/* ------------------------------------------------------------- owner home */
.kk-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 4px 4px 12px;
}

.kk-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kk-brand img {
	height: 30px;
}

.kk-panel {
	background: var(--kk-surface);
	border: 1px solid var(--kk-line);
	border-radius: 20px;
	padding: 22px;
}

.kk-headline {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.4;
	margin: 10px 0 0;
}

.kk-subline {
	font-size: 15px;
}

.kk-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	margin-top: 18px;
}

.kk-metrics-2 {
	grid-template-columns: 1fr 1fr;
	margin-top: 0;
}

.kk-metric {
	background: var(--kk-soft);
	border-radius: 14px;
	padding: 14px 16px;
}

.kk-metric .kk-label {
	font-size: 13px;
	color: var(--kk-ink-2);
}

.kk-metric .kk-value {
	font-size: 26px;
	font-weight: 800;
	margin-top: 2px;
	direction: ltr;
	text-align: left;
}

[dir="rtl"] .kk-metric .kk-value {
	text-align: right;
}

.kk-metric.kk-alert {
	background: var(--kk-red-50);
}

.kk-metric.kk-alert .kk-label,
.kk-metric.kk-alert .kk-value,
.kk-metric.kk-alert .kk-muted {
	color: var(--kk-red-700);
}

.kk-ask {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	border: 1.5px solid var(--kk-red-200);
	border-radius: 999px;
	padding: 4px 6px 4px 16px;
	background: var(--kk-surface);
}

[dir="rtl"] .kk-ask {
	padding: 4px 16px 4px 6px;
}

.kk-ask:focus-within {
	border-color: var(--kk-red-500);
}

.kk-ask-input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-size: 15px;
	color: var(--kk-ink);
	padding: 8px 0;
}

.kk-ask-go {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--kk-red-500);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.kk-answer {
	background: var(--kk-soft);
	border-radius: 14px;
	padding: 14px 16px;
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.8;
}

.kk-answer p:last-child {
	margin-bottom: 0;
}

.kk-answer.kk-thinking {
	color: var(--kk-ink-2);
}

.kk-answer.kk-answer-off {
	color: var(--kk-red-700);
	background: var(--kk-red-50);
}

.kk-table {
	width: 100%;
}

.kk-row {
	display: grid;
	grid-template-columns: 0.9fr 1fr 0.8fr 1.6fr 1.2fr;
	gap: 10px;
	align-items: center;
	padding: 11px 2px;
	border-top: 1px solid var(--kk-line);
	font-size: 14px;
}

.kk-row.kk-head {
	border-top: none;
	color: var(--kk-ink-2);
	font-size: 12px;
	padding-bottom: 4px;
}

.kk-row .kk-name {
	font-weight: 700;
}

.kk-m {
	display: none;
}

.kk-bar {
	display: block;
	height: 10px;
	border-radius: 6px;
	background: var(--kk-soft);
	overflow: hidden;
}

.kk-bar > span {
	display: block;
	height: 100%;
	border-radius: 6px;
	background: var(--kk-red-200);
}

.kk-bar-bad > span {
	background: var(--kk-red-500);
}

.kk-bar-wait > span {
	background: var(--kk-line);
}

.kk-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
}

.kk-card {
	background: var(--kk-red-50);
	color: var(--kk-red-800);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.kk-card .kk-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--kk-red-500);
	margin-top: 7px;
	flex-shrink: 0;
}

.kk-card.kk-info {
	background: var(--kk-soft);
	color: var(--kk-ink);
}

.kk-card.kk-info .kk-dot {
	background: var(--kk-red-200);
}

@media (max-width: 640px) {
	.kk-panel {
		padding: 16px;
		border-radius: 16px;
	}
	.kk-headline {
		font-size: 22px;
	}
	.kk-metrics {
		grid-template-columns: 1fr 1fr;
	}
	.kk-metric .kk-value {
		font-size: 20px;
		white-space: nowrap;
	}
	.kk-row {
		grid-template-columns: auto 1fr;
		grid-template-areas: "name status" "sales fc" "bar bar";
		row-gap: 6px;
	}
	.kk-row.kk-head {
		display: none;
	}
	.kk-row .kk-name { grid-area: name; }
	.kk-row .kk-status { grid-area: status; text-align: end; }
	.kk-row .kk-sales { grid-area: sales; color: var(--kk-ink-2); font-size: 13px; }
	.kk-row .kk-fc { grid-area: fc; color: var(--kk-ink-2); font-size: 13px; text-align: end; }
	.kk-row .kk-bar { grid-area: bar; }
	.kk-m { display: inline; }
}

/* ------------------------------------------------------------- phone screens */
.kk-phone {
	max-width: 480px;
	margin: 0 auto;
}

.kk-hello-block {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 4px 2px 2px;
}

.kk-hello {
	font-size: 24px;
	font-weight: 800;
}

.kk-outlet-picker {
	margin-top: 10px;
}

.kk-camera {
	width: 100%;
	margin-top: 16px;
	border: none;
	border-radius: 18px;
	background: var(--kk-red-500);
	color: #fff;
	padding: 22px 16px;
	font-size: 18px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.kk-camera:active {
	background: var(--kk-red-600);
}

.kk-task {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--kk-surface);
	border: 1px solid var(--kk-line);
	border-radius: 12px;
	padding: 12px 14px;
	margin-top: 8px;
	font-size: 15px;
	cursor: pointer;
}

.kk-task .kk-task-name {
	flex: 1;
}

.kk-task .kk-task-icon {
	color: var(--kk-line);
	display: flex;
}

.kk-task .kk-state {
	color: var(--kk-ink-2);
	font-size: 13px;
}

.kk-task.kk-done {
	background: var(--kk-soft);
	border-color: transparent;
}

.kk-task.kk-done .kk-task-icon,
.kk-task.kk-done .kk-state {
	color: var(--kk-ink-2);
}

.kk-task.kk-done .kk-task-name {
	color: var(--kk-ink-2);
	text-decoration: line-through;
}

.kk-task.kk-due {
	background: var(--kk-red-50);
	border-color: transparent;
}

.kk-task.kk-due .kk-task-icon,
.kk-task.kk-due .kk-state,
.kk-task.kk-due .kk-task-name {
	color: var(--kk-red-700);
}

.kk-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 16px;
}

.kk-tile {
	background: var(--kk-surface);
	border: 1px solid var(--kk-line);
	border-radius: 16px;
	padding: 16px 10px;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
}

.kk-tile:hover {
	border-color: var(--kk-red-300);
}

.kk-tile-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--kk-red-50);
	color: var(--kk-red-600);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8px;
}

/* camera field in the waste dialog */
.kk-shot {
	display: block;
	border: 1.5px dashed var(--kk-red-300);
	border-radius: 16px;
	background: var(--kk-red-50);
	color: var(--kk-red-700);
	min-height: 150px;
	cursor: pointer;
	overflow: hidden;
	margin-bottom: 8px;
}

.kk-shot [hidden] {
	display: none !important;
}

.kk-shot-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 150px;
	font-weight: 700;
}

.kk-shot-img {
	display: block;
	width: 100%;
	max-height: 260px;
	object-fit: cover;
}

/* ------------------------------------------------------------- upload page */
.kk-field {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--kk-ink-2);
}

.kk-field > span {
	display: block;
	margin-bottom: 4px;
}

.kk-drop {
	display: block;
	border: 1.5px dashed var(--kk-line);
	border-radius: 14px;
	padding: 22px 12px;
	text-align: center;
	color: var(--kk-ink-2);
	cursor: pointer;
	margin-bottom: 14px;
}

.kk-drop.kk-drop-ready {
	border-color: var(--kk-red-300);
	background: var(--kk-red-50);
	color: var(--kk-red-700);
	font-weight: 700;
}

.kk-upload .btn-lg {
	width: 100%;
	border-radius: 14px;
	font-weight: 800;
}

.kk-channels {
	margin: 10px 0 0;
}

.kk-bar-row {
	display: grid;
	grid-template-columns: 70px 1fr auto;
	gap: 10px;
	align-items: center;
	font-size: 14px;
	padding: 5px 0;
}

.kk-bar-row .kk-bar > span {
	background: var(--kk-red-300);
}

.kk-num {
	direction: ltr;
	color: var(--kk-ink-2);
	font-size: 13px;
}

.kk-next {
	margin-top: 14px;
}

.kk-ok-line {
	background: var(--kk-soft);
	border-radius: 12px;
	padding: 12px 14px;
	font-weight: 700;
}

.kk-history-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 2px;
	border-top: 1px solid var(--kk-line);
	font-size: 14px;
	color: var(--kk-ink) !important;
	text-decoration: none !important;
}

/* ------------------------------------------------------------- team page */
.kk-team {
	max-width: 1100px;
}

.kk-members {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
}

.kk-member {
	background: var(--kk-surface);
	border: 1px solid var(--kk-line);
	border-radius: 14px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kk-member.kk-off {
	opacity: 0.55;
}

.kk-member .kk-name {
	font-weight: 800;
	font-size: 15px;
}

.kk-member .btn {
	align-self: flex-start;
}

.kk-chip {
	display: inline-block;
	background: var(--kk-red-50);
	color: var(--kk-red-700);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 700;
	margin-inline-end: 4px;
}

.kk-chip-soft {
	background: var(--kk-soft);
	color: var(--kk-ink-2);
}

.kk-legend {
	display: flex;
	gap: 18px;
	font-size: 13px;
	color: var(--kk-ink-2);
	margin: 10px 0;
}

.kk-legend > span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.kk-matrix-wrap {
	overflow-x: auto;
	border: 1px solid var(--kk-line);
	border-radius: 14px;
	background: var(--kk-surface);
}

.kk-matrix {
	border-collapse: collapse;
	width: 100%;
	font-size: 13px;
}

.kk-matrix th,
.kk-matrix td {
	padding: 9px 8px;
	text-align: center;
	border-bottom: 1px solid var(--kk-line);
	white-space: nowrap;
}

.kk-matrix thead th {
	font-weight: 700;
	color: var(--kk-ink-2);
	font-size: 12px;
	vertical-align: bottom;
}

.kk-matrix .kk-job {
	text-align: start;
	font-weight: 600;
	position: sticky;
	inset-inline-start: 0;
	background: var(--kk-surface);
	min-width: 170px;
}

.kk-matrix tbody tr:last-child th,
.kk-matrix tbody tr:last-child td {
	border-bottom: none;
}

.kk-scope-row td,
.kk-scope-row th {
	background: var(--kk-soft) !important;
	color: var(--kk-ink-2);
	font-size: 12px;
}

.kk-dot-do,
.kk-dot-view {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	vertical-align: middle;
}

.kk-dot-do {
	background: var(--kk-red-500);
}

.kk-dot-view {
	background: var(--kk-red-100);
	box-shadow: inset 0 0 0 1.5px var(--kk-red-300);
}

.kk-secret {
	background: var(--kk-soft);
	border-radius: 12px;
	padding: 12px 14px;
	line-height: 2;
}

.kk-secret b {
	direction: ltr;
	unicode-bidi: isolate;
}

.kk-pass {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 16px;
	letter-spacing: 1px;
}

.kk-conflict {
	background: var(--kk-red-50);
	border-radius: 10px;
	padding: 8px 10px;
	font-size: 12.5px;
	color: var(--kk-red-800);
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 4px;
}

.kk-conflict b {
	color: var(--kk-red-700);
}

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

/* Arabic / English switch */
.kk-lang-item {
	display: flex;
	align-items: center;
	margin-inline-end: 8px;
}

.kk-lang {
	font-weight: 700;
	border-radius: 999px;
	padding: 4px 12px;
	color: var(--kk-red-700);
	border: 1px solid var(--kk-red-200);
	background: var(--kk-surface, #fff);
}

.kk-lang:hover {
	background: var(--kk-red-50);
}

.kk-lang-corner {
	position: fixed;
	top: 12px;
	inset-inline-end: 12px;
	z-index: 1030;
	font-size: 13px;
}

.kk-lang .kk-lang-short {
	display: none;
}

/* ------------------------------------------------------------- phones and tablets */
@media (max-width: 400px) {
	.kk-metric .kk-value {
		font-size: 18px;
	}
}

/* Title and its buttons stay on one line on a phone. */
@media (max-width: 767px) {
	body[data-route^="kukidu"] .page-head .page-head-content {
		flex-wrap: nowrap;
	}
	body[data-route^="kukidu"] .page-head .page-title {
		min-width: 0;
	}
	body[data-route^="kukidu"] .page-head .title-text {
		font-size: 18px;
	}
	/* The permission table: task names wrap, so several roles fit beside them. */
	.kk-matrix .kk-job {
		white-space: normal;
		min-width: 0;
		width: 42vw;
		max-width: 180px;
		font-size: 12px;
	}
	.kk-matrix thead th {
		white-space: normal;
		min-width: 58px;
		font-size: 11px;
		line-height: 1.3;
	}
	.kk-lang .kk-lang-long {
		display: none;
	}
	.kk-lang .kk-lang-short {
		display: inline;
	}
}


/* Tablets: the branch screen gets wider, with four tiles in a row. */
@media (min-width: 768px) {
	.kk-phone {
		max-width: 720px;
	}
	.kk-phone .kk-tiles {
		grid-template-columns: repeat(4, 1fr);
	}
}