/* ──────────────────────────────────────────────────────────────
   HOUSES — modern property-management SaaS design system
   Inspired by Stessa / Buildium / AppFolio / DoorLoop research:
   - Clean white surfaces, low elevation, generous whitespace
   - Navy primary + emerald accent (financial / growth)
   - Left sidebar nav, horizontal sub-tabs, card-based dashboard
   ──────────────────────────────────────────────────────────── */

:root {
	/* Brand */
	--c-primary:      #0f4c81;     /* Stessa-like deep navy */
	--c-primary-d:    #0a3960;
	--c-primary-l:    #e3eef7;
	--c-accent:       #14b890;     /* emerald for income / positive */
	--c-accent-d:     #0d9a78;
	--c-accent-l:     #d4f7ec;

	/* Semantic */
	--c-success:      #16a34a;
	--c-success-l:    #dcfce7;
	--c-danger:       #e11d48;
	--c-danger-l:     #ffe4e6;
	--c-warning:      #ea580c;
	--c-warning-l:    #ffedd5;
	--c-info:         #0284c7;
	--c-info-l:       #e0f2fe;

	/* Surfaces */
	--c-bg:           #f6f8fb;     /* very subtle off-white background */
	--c-card:         #ffffff;
	--c-card-soft:    #fafbfc;
	--c-border:       #e5e7eb;
	--c-border-strong:#d1d5db;
	--c-hover:        #f3f4f6;

	/* Text */
	--c-text:         #111827;
	--c-text-2:       #4b5563;
	--c-text-3:       #9ca3af;

	/* Spacing (4-pt grid) */
	--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;

	/* Radii */
	--r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:14px; --r-full:999px;

	/* Shadows */
	--sh-1: 0 1px 2px 0 rgb(17 24 39 / 0.04);
	--sh-2: 0 1px 3px 0 rgb(17 24 39 / 0.08), 0 1px 2px -1px rgb(17 24 39 / 0.04);
	--sh-3: 0 4px 6px -1px rgb(17 24 39 / 0.08), 0 2px 4px -2px rgb(17 24 39 / 0.04);
	--sh-4: 0 10px 15px -3px rgb(17 24 39 / 0.10), 0 4px 6px -4px rgb(17 24 39 / 0.05);
	--sh-focus: 0 0 0 3px rgb(15 76 129 / 0.18);

	--font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0; padding: 0; height: 100%;
	font-family: var(--font);
	font-size: 14px; line-height: 1.5;
	font-feature-settings: "cv02", "cv03", "cv11", "ss01";
	background: var(--c-bg);
	color: var(--c-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body[dir="rtl"] { font-family: var(--font), "Segoe UI", "Arial Hebrew", Arial, sans-serif; }

button { cursor: pointer; font: inherit; color: inherit; border: 0; background: transparent; }
input, select, textarea {
	font: inherit; color: var(--c-text);
	border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
	padding: 7px 11px; background: var(--c-card);
	transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
	outline: none; border-color: var(--c-primary); box-shadow: var(--sh-focus);
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-d); text-decoration: underline; }

/* Default tables — sharp, light */
table { border-collapse: collapse; width: 100%; background: var(--c-card); font-size: 13px; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--c-border); text-align: start; vertical-align: middle; }
th {
	background: var(--c-card-soft); font-weight: 600; font-size: 11px;
	color: var(--c-text-2); text-transform: uppercase; letter-spacing: 0.04em;
}
tbody tr { transition: background-color 0.1s; }
tbody tr:hover { background: var(--c-hover); }
tbody tr:last-child td { border-bottom: 0; }

/* Thin neutral scrollbars (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; background-clip: padding-box; border: 2px solid transparent; }