:root{
	--tp-ink:#14171F;
	--tp-ink-soft:#5B6270;
	--tp-ink-faint:#9AA1AC;

	--tp-bg:#F1F2F5;
	--tp-surface:#FFFFFF;
	--tp-surface-2:#E8EAEE;
	--tp-line:#E1E3E9;

	--tp-primary:#232A3B;
	--tp-primary-d:#0A0C12;
	--tp-primary-l:#E9EAEF;
	--tp-grad: linear-gradient(135deg, #3D4459 0%, #10121A 100%);

	--tp-forest:#2B3040;
	--tp-forest-d:#181B24;

	--tp-gold:#5B6472;
	--tp-gold-l:#EBECEF;
	--tp-grad-gold: linear-gradient(135deg, #98A1B3 0%, #565E6E 100%);

	--tp-green:#2F7D5C;
	--tp-green-l:#E5F3EC;

	--tp-radius:22px;
	--tp-radius-sm:14px;
	--tp-shadow: 0 14px 34px rgba(10,12,18,.12);
	--tp-shadow-sm: 0 5px 16px rgba(10,12,18,.08);

	--font-display: Arial;
	--font-body: Arial;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
	font-family:var(--font-body);
	background:var(--tp-bg);
	direction:rtl;
	color:var(--tp-ink);
	-webkit-font-smoothing:antialiased;
	line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3{ font-family:var(--font-display); }

/* ---------- top hero (home) ---------- */
.tp-hero{
	background:var(--tp-grad);
	padding:30px 20px 60px;
	text-align:center;
	position:relative;
	overflow:hidden;
}
.tp-hero::before{
	content:"";
	position:absolute; inset:0;
	background:
		radial-gradient(circle at 15% -10%, rgba(255,255,255,.16), transparent 50%),
		radial-gradient(circle at 100% 100%, rgba(0,0,0,.12), transparent 55%);
	pointer-events:none;
}
.tp-heroLogo{
	width:58px; height:58px; border-radius:18px; background:#fff;
	display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
	box-shadow:0 8px 20px rgba(0,0,0,.2); overflow:hidden; font-size:22px; font-weight:bold; color:var(--tp-primary); font-family:var(--font-display);
}
.tp-heroLogo img{ width:100%; height:100%; object-fit:cover; }
.tp-heroCo{ color:rgba(255,255,255,.8); font-size:10.5pt; font-weight:bold; margin-bottom:5px; }
.tp-heroTitle{ color:#fff; font-size:16.5pt; font-weight:bold; margin:0; }
.tp-heroGreeting{ color:rgba(255,255,255,.94); font-size:10.5pt; margin-top:7px; font-weight:bold; font-family:var(--font-body); }
.tp-heroGreetingLg{ font-size:12.5pt; }

/* ---------- sub-page top bar ---------- */
.tp-bar{
	background:var(--tp-grad);
	padding:18px 18px;
	display:flex; align-items:center; gap:12px;
}
.tp-bar a.back{ color:#fff; font-size:15pt; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,.16); cursor:pointer; }
.tp-bar h1{ color:#fff; margin:0; font-size:12.5pt; font-weight:bold; flex:1; text-align:center; }

/* ---------- content wraps ---------- */
.tp-wrapNarrow{ max-width:400px; margin:0 auto; padding:56px 20px; }
.tp-wrapHome{ max-width:480px; margin:-34px auto 0; padding:0 16px 46px; position:relative; }
.tp-wrapList{ max-width:520px; margin:0 auto; padding:18px 16px 46px; }

/* ---------- login card ---------- */
.tp-loginCard{ background:var(--tp-surface); border-radius:var(--tp-radius); box-shadow:var(--tp-shadow); padding:32px 26px; }
.tp-loginBrand{ text-align:center; margin-bottom:16px; }
.tp-loginLogo{ display:block; max-width:120px; max-height:64px; width:auto; height:auto; margin:0 auto 10px; object-fit:contain; }
.tp-loginBrand .b{ font-family:var(--font-display); font-size:20pt; font-weight:bold; color:var(--tp-primary-d); letter-spacing:-.2px; }
.tp-loginBrand .s{ font-size:10.5pt; color:var(--tp-ink-soft); margin-top:2px; font-weight:bold; }
.tp-loginProjectName{ font-family:var(--font-display); font-size:15pt; font-weight:bold; color:var(--tp-primary-d); letter-spacing:-.2px; }
.tp-loginCoName{ font-size:10pt; color:var(--tp-ink-soft); margin-top:3px; font-weight:bold; }
.tp-welcomeText{ font-size:10pt; color:var(--tp-ink-soft); text-align:center; line-height:1.7; margin:0 0 22px; padding-bottom:18px; border-bottom:1px solid var(--tp-line); }
.tp-welcomeText b{ color:var(--tp-ink); }
.tp-loginCard h2{ margin:0 0 18px; font-size:13pt; font-weight:bold; text-align:center; color:var(--tp-ink); font-family:var(--font-display); }
.tp-loginCard input[type=tel], .tp-loginCard input[type=text]{
	width:100%; padding:15px 16px; border:1.5px solid var(--tp-line); border-radius:var(--tp-radius-sm);
	font-size:13pt; margin-bottom:14px; direction:ltr; text-align:center; background:var(--tp-surface-2); font-weight:bold; color:var(--tp-ink);
	transition:border-color .15s ease, background .15s ease; font-family:var(--font-body);
}
.tp-loginCard input:focus{ outline:none; border-color:var(--tp-primary); background:#fff; }
.tp-loginCard input[type=submit], .tp-btnPrimary{
	width:100%; padding:15px; border:0; border-radius:var(--tp-radius-sm);
	background:var(--tp-grad); color:#fff; font-size:12pt; font-weight:bold; cursor:pointer;
	box-shadow:0 10px 22px rgba(177,85,44,.3); font-family:var(--font-body);
}
.tp-hint{ font-size:9.5pt; color:var(--tp-ink-faint); text-align:center; margin-top:12px; }
.tp-msg{ background:#FBEDE9; color:#A23B2E; border:1px solid #EFCFC4; border-radius:var(--tp-radius-sm); padding:11px 14px; font-size:10.5pt; margin-bottom:14px; text-align:center; font-weight:bold; }
.tp-demoStrip{ position:fixed; top:0; right:0; left:0; background:var(--tp-forest); color:#fff; text-align:center; font-size:9.5pt; font-weight:bold; padding:8px; z-index:999; letter-spacing:.2px; }

/* ---------- unit summary card ---------- */
.tp-unitCard{ background:var(--tp-surface); border-radius:var(--tp-radius); box-shadow:var(--tp-shadow); padding:20px 22px; text-align:center; margin-bottom:20px; }
.tp-unitCard .n{ font-family:var(--font-display); font-size:15pt; font-weight:bold; color:var(--tp-primary-d); }
.tp-unitCard .d{ color:var(--tp-ink-soft); font-size:10pt; margin-top:3px; font-weight:bold; }
.tp-statusPill{ display:inline-flex; align-items:center; gap:5px; margin-top:10px; padding:4px 13px; border-radius:999px; font-size:8.5pt; font-weight:bold; }
.tp-statusPill.active{ background:var(--tp-primary-l); color:var(--tp-primary-d); }
.tp-statusPill.archived{ background:var(--tp-gold-l); color:var(--tp-gold); }

/* ---------- gallery ---------- */
.tp-gallery{ margin-bottom:20px; }
.tp-gallery .cap{ font-family:var(--font-display); font-size:13pt; font-weight:bold; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); position:absolute; bottom:16px; right:18px; left:18px; pointer-events:none; }
.tp-galleryHero{ position:relative; height:170px; border-radius:var(--tp-radius); overflow:hidden; box-shadow:var(--tp-shadow); background:linear-gradient(135deg,#8a97a3,#5c6672); cursor:zoom-in; }
.tp-galleryHero img{ width:100%; height:100%; object-fit:cover; display:block; }
.tp-galleryStrip{ display:flex; gap:8px; margin-top:8px; overflow-x:auto; padding-bottom:2px; }
.tp-galleryStrip .th{ cursor:pointer; }

/* ---------- gallery lightbox ---------- */
.tp-lightbox{ display:none; position:fixed; inset:0; z-index:999; background:rgba(10,12,18,.9); align-items:center; justify-content:center; padding:40px; box-sizing:border-box; cursor:zoom-out; }
.tp-lightbox.open{ display:flex; }
.tp-lightbox img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); cursor:default; }
.tp-lightboxClose{ position:absolute; top:20px; left:24px; color:#fff; font-size:16pt; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.tp-galleryStrip .th{ flex:0 0 auto; width:70px; height:52px; border-radius:10px; background:linear-gradient(135deg,#9aa6b0,#68727d); box-shadow:var(--tp-shadow-sm); }

/* ---------- menu list (home) ---------- */
.tp-menu{ display:grid; gap:12px; }
.tp-menuItem{
	display:flex; align-items:center; gap:14px; background:var(--tp-surface); border-radius:16px;
	box-shadow:var(--tp-shadow-sm); padding:16px 18px; font-weight:bold; font-size:11pt; color:var(--tp-ink);
	cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; border:1px solid transparent;
}
.tp-menuItem:hover{ transform:translateY(-1px); box-shadow:var(--tp-shadow); }
.tp-menuItem .ic{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:17pt; flex-shrink:0; }
.tp-menuItem .ic.a{ background:var(--tp-primary-l); }
.tp-menuItem .ic.b{ background:var(--tp-green-l); }
.tp-menuItem .ic.c{ background:#EDE7F5; }
.tp-menuItem.gold{ border-color:#DFC988; background:linear-gradient(135deg,#FFFEFA,var(--tp-gold-l)); }
.tp-menuItem .ic.gold{ background:var(--tp-grad-gold); color:#fff; }
.tp-menuItem .badge{ margin-inline-start:auto; background:var(--tp-primary); color:#fff; font-size:8pt; font-weight:bold; border-radius:999px; padding:2px 9px; }
.tp-menuItem .sub{ font-size:8.5pt; font-weight:bold; color:var(--tp-ink-faint); margin-top:2px; }

/* ---------- updates feed (visually separated from the nav menu below it) ---------- */
.tp-updatesBox{
	background:var(--tp-surface-2); border:1px solid var(--tp-line); border-radius:var(--tp-radius);
	padding:16px 14px 6px; margin-bottom:26px;
}
.tp-updatesBox .tp-sectionTitle{ margin:0 6px 12px; }
.tp-update{ background:var(--tp-surface); border-radius:14px; box-shadow:var(--tp-shadow-sm); padding:13px 15px; margin-bottom:10px; display:flex; gap:12px; }
.tp-update .dt{ flex:0 0 50px; text-align:center; background:var(--tp-primary-l); border-radius:10px; padding:6px 4px; }
.tp-update .dt .d{ font-family:var(--font-display); font-size:13.5pt; font-weight:bold; color:var(--tp-primary-d); line-height:1; }
.tp-update .dt .m{ font-size:7.5pt; color:var(--tp-ink-soft); font-weight:bold; }
.tp-update .t{ font-weight:bold; font-size:10.5pt; margin-bottom:2px; }
.tp-update .x{ font-size:9pt; color:var(--tp-ink-soft); line-height:1.5; }
.tp-menuDivider{ display:flex; align-items:center; gap:10px; margin:4px 4px 14px; font-size:9pt; font-weight:bold; color:var(--tp-ink-faint); }
.tp-menuDivider::before, .tp-menuDivider::after{ content:""; flex:1; height:1px; background:var(--tp-line); }

/* ---------- file / supplier / contact rows ---------- */
.tp-row{ display:flex; align-items:center; gap:14px; background:var(--tp-surface); border-radius:16px; box-shadow:var(--tp-shadow-sm); padding:14px 16px; margin-bottom:10px; }
.tp-row .ic{ width:40px; height:40px; border-radius:11px; background:var(--tp-primary-l); color:var(--tp-primary-d); display:flex; align-items:center; justify-content:center; font-size:15pt; flex-shrink:0; }
.tp-row .n{ font-weight:bold; font-size:10.5pt; }
.tp-row .m{ font-size:8.8pt; color:var(--tp-ink-faint); margin-top:2px; font-weight:bold; }

.tp-supCard, .tp-contactCard{ background:var(--tp-surface); border-radius:16px; box-shadow:var(--tp-shadow-sm); padding:16px 18px; margin-bottom:10px; }
.tp-supCard .cat, .tp-contactCard .cat{ display:inline-block; font-size:8pt; font-weight:bold; color:var(--tp-primary-d); background:var(--tp-primary-l); border-radius:999px; padding:3px 11px; margin-bottom:7px; }
.tp-supCard .n, .tp-contactCard .n{ font-family:var(--font-display); font-weight:bold; font-size:11.5pt; }
.tp-supActions{ display:flex; gap:8px; margin-top:11px; }
.tp-supActions a, .tp-supActions span{ flex:1; text-align:center; padding:10px; border-radius:11px; font-size:9pt; font-weight:bold; }
.tp-callBtn{ background:var(--tp-primary-l); color:var(--tp-primary-d); }
.tp-waBtn{ background:var(--tp-green-l); color:var(--tp-green); }

/* ---------- service ticket ---------- */
.tp-ticketBtn{ display:block; width:100%; text-align:center; padding:16px; border-radius:16px; background:var(--tp-forest); color:#fff; font-weight:bold; font-size:11pt; box-shadow:var(--tp-shadow-sm); margin-bottom:16px; border:0; cursor:pointer; font-family:var(--font-body); }
.tp-ticketList .item{ background:var(--tp-surface); border-radius:16px; box-shadow:var(--tp-shadow-sm); padding:14px 16px; margin-bottom:10px; }
.tp-ticketList .item .n{ font-weight:bold; font-size:10.5pt; }
.tp-ticketList .item .m{ font-size:8.8pt; color:var(--tp-ink-faint); margin-top:3px; }
.tp-ticketList .stat{ display:inline-block; font-size:8pt; font-weight:bold; border-radius:999px; padding:2px 10px; margin-top:6px; }
.tp-ticketList .stat.open{ background:#FBEDE9; color:#A23B2E; }
.tp-ticketList .stat.done{ background:var(--tp-green-l); color:var(--tp-green); }

/* ---------- map ---------- */
.tp-mapBox{ border-radius:var(--tp-radius); overflow:hidden; box-shadow:var(--tp-shadow); margin-bottom:16px; height:200px; }
.tp-mapBox iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- payments ---------- */
.tp-paySummary{ background:var(--tp-grad); border-radius:var(--tp-radius); padding:24px 22px; text-align:center; color:#fff; box-shadow:var(--tp-shadow); margin-bottom:18px; }
.tp-paySummary .l{ font-size:9.5pt; opacity:.85; font-weight:bold; }
.tp-paySummary .v{ font-family:var(--font-display); font-size:26pt; font-weight:bold; margin:4px 0; }
.tp-payRow{ display:flex; justify-content:space-between; align-items:center; background:var(--tp-surface); border-radius:14px; box-shadow:var(--tp-shadow-sm); padding:13px 16px; margin-bottom:8px; }
.tp-payRow .t{ font-weight:bold; font-size:10.5pt; }
.tp-payRow .d{ font-size:8.5pt; color:var(--tp-ink-faint); margin-top:2px; }
.tp-payRow .amt{ font-family:var(--font-display); font-weight:bold; color:var(--tp-primary-d); font-size:11.5pt; }

/* ---------- full gallery grid ---------- */
.tp-photoGrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.tp-photoItem{ position:relative; display:block; border-radius:14px; overflow:hidden; box-shadow:var(--tp-shadow-sm); background:var(--tp-surface-2); }
.tp-photoItem img{ width:100%; height:140px; object-fit:cover; display:block; }
.tp-photoItem .cap{ position:absolute; bottom:0; right:0; left:0; padding:6px 10px; font-size:8pt; font-weight:bold; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.65), transparent); }
@media (min-width:860px){ .tp-photoGrid{ grid-template-columns:repeat(3,1fr); } .tp-photoItem img{ height:170px; } }

.tp-ticketList .stat.in_progress{ background:#EFF6FF; color:#2563EB; }

/* ---------- section title ---------- */
.tp-sectionTitle{ font-size:9.5pt; font-weight:bold; color:var(--tp-ink-soft); margin:22px 4px 10px; display:flex; align-items:center; gap:6px; }

.tp-empty{ text-align:center; color:var(--tp-ink-faint); padding:50px 20px; font-size:10.5pt; font-weight:bold; }
.tp-logoutLink{ display:block; text-align:center; margin-top:24px; color:var(--tp-ink-faint); font-size:9.5pt; font-weight:bold; }

/* ---------- desktop: same app, wider canvas instead of a phone strip on a blank page ---------- */
@media (min-width:860px){
	.tp-wrapNarrow{ max-width:460px; padding-top:72px; }
	.tp-wrapHome{ max-width:760px; }
	.tp-wrapList{ max-width:680px; }

	.tp-hero{ padding:40px 20px 70px; }
	.tp-heroLogo{ width:68px; height:68px; }
	.tp-heroTitle{ font-size:19pt; }

	.tp-menu{ grid-template-columns:repeat(2,1fr); }

	.tp-supCard, .tp-contactCard{ padding:18px 20px; }
	.tp-supActions{ max-width:320px; }

	.tp-row:hover, .tp-menuItem:hover, .tp-supCard:hover, .tp-contactCard:hover, .tp-ticketList .item:hover{
		box-shadow:var(--tp-shadow); transition:box-shadow .15s ease;
	}
}

/* ---------- desktop: home page as a magazine-style layout - the
   gallery and unit status run full width up top (matching the demo),
   then a two-column band below: updates + the action menu on the
   (reading-first) right, the map on the left. ---------- */
@media (min-width:900px){
	.tp-homeGrid{
		max-width:1000px;
		display:grid;
		grid-template-columns: 1fr 360px;
		grid-template-areas:
			"gallery gallery"
			"unit    unit"
			"updates map"
			"menu    map"
			"logout  logout";
		align-items:start;
		gap:20px 28px;
	}
	.tp-homeGrid > .tp-gallery{ grid-area:gallery; }
	.tp-homeGrid > .tp-unitCard{ grid-area:unit; margin:0; display:flex; align-items:center; gap:20px; text-align:right; }
	.tp-homeGrid > .tp-unitCard .tp-statusPill{ margin-top:0; margin-inline-start:auto; }
	.tp-homeGrid > .tp-updatesBox{ grid-area:updates; }
	.tp-homeGrid .tp-homeMenuCol{ grid-area:menu; }
	.tp-homeGrid .tp-homeMapCol{ grid-area:map; }
	.tp-homeGrid > .tp-logoutLink{ grid-area:logout; margin-top:8px; }

	/* gallery: bigger hero + a 2x2 thumbnail grid alongside it, like the demo but wider */
	.tp-homeGrid > .tp-gallery{ display:grid; grid-template-columns:2fr 1fr; gap:10px; margin-bottom:0; }
	.tp-homeGrid > .tp-gallery .tp-galleryHero{ height:280px; }
	.tp-homeGrid > .tp-gallery .tp-galleryStrip{ display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); height:280px; margin-top:0; overflow:visible; }
	.tp-homeGrid > .tp-gallery .tp-galleryStrip .th{ width:100%; height:100%; border-radius:12px; overflow:hidden; display:block; }

	.tp-homeGrid .tp-homeMenuCol .tp-menuDivider{ font-size:12pt; color:var(--tp-ink); margin:0 0 14px; }
	.tp-homeGrid .tp-homeMenuCol .tp-menuDivider::before, .tp-homeGrid .tp-homeMenuCol .tp-menuDivider::after{ display:none; }
	.tp-homeGrid .tp-homeMenuCol .tp-menu{ grid-template-columns:repeat(3,1fr); gap:14px; }
	.tp-homeGrid .tp-homeMenuCol .tp-menuItem{
		flex-direction:column; justify-content:center; text-align:center; gap:10px;
		padding:22px 14px; min-height:118px; background:var(--tp-surface); box-shadow:var(--tp-shadow-sm); border:1px solid transparent;
	}
	.tp-homeGrid .tp-homeMenuCol .tp-menuItem:hover{ border-color:var(--tp-primary); transform:translateY(-2px); box-shadow:var(--tp-shadow); }
	.tp-homeGrid .tp-homeMenuCol .tp-menuItem .ic{ width:50px; height:50px; font-size:21pt; border-radius:15px; }
	.tp-homeGrid .tp-homeMenuCol .tp-menuItem .badge{ margin-inline-start:0; }
	.tp-homeGrid .tp-homeMenuCol .tp-menuItem.gold{ grid-column:span 3; flex-direction:row; text-align:right; padding:16px 18px; }
}