/* ==========================================================
   AAK CORPORATE THEME — FSA
   Source of truth: AAK Corporate Design Tokens
   Modern • Elegant • Mobile-first • Clean
   ========================================================== */

:root{
	/* ========================================================
	   AAK COLOR TOKENS
	   ======================================================== */
	--color-primary:#0b3d2e;
	--color-primary-light:#145c45;
	--color-primary-dark:#082a20;

	--color-accent:#14b8a6;
	--color-accent-light:#5eead4;
	--color-accent-dark:#0d9488;

	--color-mint:#b9ddd3;
	--color-mint-soft:#e4f2ec;

	--color-slate:#4c5a67;
	--color-blush:#f6e9e6;

	--color-bg:#ffffff;
	--color-bg-alt:#f4faf8;
	--color-bg-dark:#062a20;

	--color-text:#16241f;
	--color-text-muted:#5b6b64;
	--color-text-inverse:#eafff8;

	--color-border:#dfeae6;

	/* Semantic aliases used by the existing FSA CSS/modules */
	--paper:var(--color-bg-alt);
	--surface:var(--color-bg);
	--surface-soft:var(--color-bg-alt);
	--ink:var(--color-text);
	--muted:var(--color-text-muted);
	--border:var(--color-border);

	--primary:var(--color-primary);
	--primary-light:var(--color-primary-light);
	--primary-dark:var(--color-primary-dark);
	--primary-soft:var(--color-mint-soft);
	--accent:var(--color-accent);
	--accent-light:var(--color-accent-light);
	--accent-dark:var(--color-accent-dark);

	--secondary:var(--color-slate);
	--success:#16856b;
	--success-soft:#e8f6f1;
	--warning:#c78322;
	--warning-soft:#fff5e3;
	--danger:#c65353;
	--danger-soft:#fceceb;
	--info:#247b8f;
	--info-soft:#e8f5f7;

	/* ========================================================
	   AAK TYPOGRAPHY
	   ======================================================== */
	--font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	--font-heading:'Poppins','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	--font-family:var(--font-body);

	--font-xs:11px;
	--font-sm:13px;
	--font-md:15px;
	--font-lg:19px;
	--font-xl:28px;
	--font-2xl:32px;
	--font-3xl:38px;

	/* ========================================================
	   AAK SPACING
	   ======================================================== */
	--space-xs:4px;
	--space-sm:8px;
	--space-md:16px;
	--space-lg:24px;
	--space-xl:32px;

	/* ========================================================
	   AAK GEOMETRY
	   ======================================================== */
	--radius-sm:8px;
	--radius-md:14px;
	--radius-lg:24px;
	--radius:var(--radius-md);
	--border-width:1px;

	/* ========================================================
	   AAK SHADOWS
	   ======================================================== */
	--shadow-sm:0 2px 8px rgba(6,42,32,.06);
	--shadow-md:0 8px 24px rgba(6,42,32,.10);
	--shadow-lg:0 20px 48px rgba(6,42,32,.16);
	--shadow-size:0;

	/* ========================================================
	   FSA LAYOUT
	   ======================================================== */
	--header-height:64px;
	--bottom-nav-height:72px;
}

/* ==========================================================
   BASE
   ========================================================== */

html{
	background:var(--color-bg-alt);
}

body{
	background:var(--color-bg-alt);
	background-image:none;
	color:var(--color-text);
	font-family:var(--font-body);
	font-size:var(--font-md);
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

button,
input,
textarea,
select{
	font:inherit;
}

button{
	-webkit-tap-highlight-color:transparent;
}

::selection{
	background:var(--color-mint);
	color:var(--color-primary-dark);
}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{
	font-family:var(--font-heading);
	color:var(--color-text);
	letter-spacing:-.02em;
}

h1{
	font-size:25px;
	font-weight:700;
	line-height:1.2;
}

h2{
	font-size:20px;
	font-weight:700;
	line-height:1.25;
}

h3{
	font-size:17px;
	font-weight:600;
	line-height:1.3;
}

p{
	color:var(--color-text-muted);
}

a{
	color:var(--color-primary);
	text-decoration:none;
}

a:hover{
	color:var(--color-primary-light);
}

small,
.text-muted{
	color:var(--color-text-muted)!important;
}

strong{
	font-weight:700;
}

/* ==========================================================
   APP HEADER
   ========================================================== */

#appHeader{
	height:var(--header-height);
	padding:0 18px;
	background:rgba(255,255,255,.96);
	border-bottom:1px solid var(--color-border);
	box-shadow:var(--shadow-sm);
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	z-index:100;
}

#pageTitle{
	font-family:var(--font-heading);
	font-size:18px;
	font-weight:700;
	letter-spacing:-.02em;
	color:var(--color-primary);
}

/* ==========================================================
   CONTENT / LAYOUT
   ========================================================== */

#appContent{
	padding:18px;
	padding-bottom:96px;
}

.container{
	max-width:768px;
}

.section{
	margin-bottom:22px;
}

.page{
	gap:16px;
}

.page-header{
	margin-bottom:8px;
}

/* ==========================================================
   CARDS
   ========================================================== */

.card{
	padding:18px;
	margin-bottom:12px;
	background:var(--color-bg);
	border:1px solid var(--color-border);
	border-radius:var(--radius-md);
	box-shadow:var(--shadow-sm);
}

.card:hover{
	box-shadow:var(--shadow-md);
}

.card h2,
.card h3{
	margin-bottom:8px;
}

.card p{
	margin-bottom:6px;
}

/* Common FSA list surfaces */
.list-item,
.search-result,
.product-item{
	background:var(--color-bg);
	border:1px solid var(--color-border);
	border-radius:var(--radius-md);
	box-shadow:var(--shadow-sm);
	transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease;
}

.list-item:hover,
.search-result:hover,
.product-item:hover{
	border-color:var(--color-mint);
	box-shadow:var(--shadow-md);
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn{
	min-height:44px;
	padding:10px 16px;
	background:var(--color-bg);
	border:1px solid var(--color-border);
	border-radius:var(--radius-sm);
	box-shadow:none;
	color:var(--color-primary);
	font-weight:600;
	cursor:pointer;
	transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease;
}

.btn:hover{
	border-color:var(--color-mint);
	box-shadow:var(--shadow-sm);
}

.btn:active{
	box-shadow:none;
	transform:scale(.98);
}

.btn:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px rgba(20,184,166,.18);
}

.btn-primary{
	background:var(--color-primary);
	border-color:var(--color-primary);
	color:#fff;
}

.btn-primary:hover{
	background:var(--color-primary-light);
	border-color:var(--color-primary-light);
	color:#fff;
}

.btn-success{
	background:var(--success);
	border-color:var(--success);
	color:#fff;
}

.btn-danger{
	background:var(--danger);
	border-color:var(--danger);
	color:#fff;
}

.btn-warning{
	background:var(--warning);
	border-color:var(--warning);
	color:#fff;
}

.btn-info{
	background:var(--info);
	border-color:var(--info);
	color:#fff;
}

.btn-accent{
	background:var(--color-accent);
	border-color:var(--color-accent);
	color:var(--color-primary-dark);
}

.btn-accent:hover{
	background:var(--color-accent-dark);
	border-color:var(--color-accent-dark);
	color:#fff;
}

.btn-outline-primary{
	background:transparent;
	border-color:var(--color-primary);
	color:var(--color-primary);
}

.btn-outline-primary:hover{
	background:var(--color-primary);
	border-color:var(--color-primary);
	color:#fff;
}

/* ==========================================================
   FORMS
   ========================================================== */

label{
	margin-bottom:6px;
	font-size:12px;
	font-weight:600;
	color:var(--color-slate);
}

input,
textarea,
select{
	width:100%;
	min-height:44px;
	padding:10px 13px;
	background:var(--color-bg);
	border:1px solid var(--color-border);
	border-radius:var(--radius-sm);
	color:var(--color-text);
	outline:none;
	transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

input::placeholder,
textarea::placeholder{
	color:#8a9993;
}

textarea{
	min-height:100px;
}

input:focus,
textarea:focus,
select:focus{
	border-color:var(--color-accent);
	box-shadow:0 0 0 3px rgba(20,184,166,.12);
	background:#fff;
}

input:disabled,
textarea:disabled,
select:disabled{
	background:var(--color-bg-alt);
	color:#899790;
	cursor:not-allowed;
}

.form-group{
	margin-bottom:14px;
}

.form-row{
	gap:12px;
}

/* ==========================================================
   BOTTOM NAVIGATION
   ========================================================== */

#bottomNavigation{
	left:10px;
	right:10px;
	bottom:10px;
	height:64px;
	padding:4px;
	background:rgba(255,255,255,.97);
	border:1px solid var(--color-border);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-md);
	backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(16px);
	z-index:1000;
}

.bottom-nav-item{
	gap:2px;
	border-radius:var(--radius-md);
	color:var(--color-text-muted);
	font-size:10px;
	font-weight:500;
	transition:background .18s ease,color .18s ease,transform .12s ease;
}

.bottom-nav-item i{
	font-size:20px;
	line-height:1;
}

.bottom-nav-item.active{
	font-weight:700;
	color:var(--color-primary);
	background:var(--color-mint-soft);
}

.bottom-nav-item:hover{
	color:var(--color-primary);
	background:var(--color-bg-alt);
}

.bottom-nav-item:active{
	transform:scale(.96);
}

/* ==========================================================
   BADGES / STATUS
   ========================================================== */

.badge-primary{
	background:var(--color-mint-soft)!important;
	color:var(--color-primary)!important;
}

.badge-success{
	background:var(--success-soft)!important;
	color:var(--success)!important;
}

.badge-warning{
	background:var(--warning-soft)!important;
	color:#95621a!important;
}

.badge-danger{
	background:var(--danger-soft)!important;
	color:var(--danger)!important;
}

.badge-info{
	background:var(--info-soft)!important;
	color:var(--info)!important;
}

/* ==========================================================
   TOAST
   ========================================================== */

#toastContainer{
	padding:14px;
}

.toast{
	background:var(--color-bg);
	border:1px solid var(--color-border);
	border-radius:var(--radius-md);
	box-shadow:var(--shadow-md);
}

.toast-success{border-left:4px solid var(--success);}
.toast-error{border-left:4px solid var(--danger);}
.toast-warning{border-left:4px solid var(--warning);}
.toast-info{border-left:4px solid var(--info);}

/* ==========================================================
   DIALOG / MODAL
   ========================================================== */

.dialog-overlay,
.camera-overlay{
	background:rgba(6,42,32,.52);
	backdrop-filter:blur(5px);
	-webkit-backdrop-filter:blur(5px);
}

.dialog,
.camera-window{
	background:var(--color-bg);
	border:1px solid var(--color-border);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-lg);
}

.dialog-title{
	color:var(--color-primary);
	font-family:var(--font-heading);
	font-weight:700;
}

.dialog-body{
	color:var(--color-text-muted);
}

/* ==========================================================
   LOADING
   ========================================================== */

#loadingOverlay .loading-backdrop{
	background:rgba(244,250,248,.82);
	backdrop-filter:blur(5px);
	-webkit-backdrop-filter:blur(5px);
}

.loading-box{
	background:var(--color-bg);
	border:1px solid var(--color-border);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-md);
}

/* ==========================================================
   CAMERA
   ========================================================== */

.camera-window{
	overflow:hidden;
}

.camera-window video,
.camera-window canvas{
	border-radius:var(--radius-md);
}

/* ==========================================================
   TABLE / DIVIDERS
   ========================================================== */

hr{
	border:0;
	border-top:1px solid var(--color-border);
}

table{
	border-color:var(--color-border)!important;
}

/* ==========================================================
   UTILITY COLOR HELPERS
   ========================================================== */

.text-primary{color:var(--color-primary)!important;}
.text-accent{color:var(--color-accent-dark)!important;}
.text-success{color:var(--success)!important;}
.text-danger{color:var(--danger)!important;}
.text-warning{color:#95621a!important;}

.bg-primary{background:var(--color-primary)!important;}
.bg-accent{background:var(--color-accent)!important;}
.bg-mint{background:var(--color-mint-soft)!important;}
.bg-soft{background:var(--color-bg-alt)!important;}

.border-primary{border-color:var(--color-primary)!important;}
.border-mint{border-color:var(--color-mint)!important;}

/* ==========================================================
   MOBILE TOUCH / SAFE AREA
   ========================================================== */

@media (max-width:480px){
	#appHeader{
		padding-left:14px;
		padding-right:14px;
	}

	#appContent{
		padding:14px;
		padding-bottom:94px;
	}

	.card{
		padding:16px;
		border-radius:var(--radius-md);
	}

	#bottomNavigation{
		left:8px;
		right:8px;
		bottom:8px;
	}
}

@supports (padding:max(0px)){
	#bottomNavigation{
		bottom:max(8px,env(safe-area-inset-bottom));
	}

	#appContent{
		padding-bottom:max(94px,calc(94px + env(safe-area-inset-bottom)));
	}
}