/* Glassmorphism theme (design tokens + components) */
:root {
	--bg-grad-1: #060814;
	--bg-grad-2: #071028;
	/* darker glass tones for stronger glassmorphism on dark backgrounds */
	--glass: rgba(6,10,18,0.56);
	--glass-strong: rgba(6,10,18,0.72);
	--stroke: rgba(255,255,255,0.06);
	--stroke-soft: rgba(255,255,255,0.04);
	--text: #e8eef6;
	--text-muted: #9fb0c6;
	--primary: #37c9ff;
	--primary-2: #6a7dff;
		--accent: #ff6b2e; /* orange accent for titles/tabs */
	--danger: #ff6b6b;
	--warn: #f5b942;
	--success: #56d364;

	--card-r: 16px; --chip-r: 999px; --btn-r: 12px;
	--space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 20px;

	--blur: 18px;
		--shadow: 0 8px 24px rgba(2,6,23,0.6);
		--shadow-soft: 0 4px 14px rgba(2,6,23,0.45);

	--table-head: rgba(255,255,255,0.04);
	--row: rgba(255,255,255,0.03);
	--row-alt: rgba(255,255,255,0.045);

	--hm-low:  rgba(255, 99, 99, 0.22);
	--hm-mid:  rgba(255, 191, 71, 0.22);
	--hm-high: rgba(76, 217, 159, 0.22);

	--focus: #7ed3ff;
}

html, body { height: 100%; }
body {
	margin: 0; direction: rtl; color: var(--text);
	font-family: Vazirmatn, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	background: radial-gradient(60% 80% at 100% -10%, #0f1a34 0%, transparent 60%),
							radial-gradient(70% 70% at -10% 110%, #0a162c 0%, transparent 60%),
							linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
}

.container{max-width:1200px;margin:0 auto;padding:20px}

/* generic glass component */
.glass {
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	background-color: var(--glass);
	-webkit-backdrop-filter: blur(calc(var(--blur) - 6px)) saturate(110%);
	backdrop-filter: blur(calc(var(--blur) - 6px)) saturate(110%);
	border: 1px solid rgba(255,255,255,0.04);
	box-shadow: var(--shadow-soft);
	border-radius: calc(var(--card-r) - 4px);
}

/* header / nav */
header.glass {
	position: sticky; top: 0; z-index: 60; height: 64px; display:flex; align-items:center; padding:12px 20px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	box-shadow: var(--shadow-soft);
}
.header-row{display:flex;align-items:center;gap:16px;width:100%}
.brand-left{display:flex;align-items:center;gap:16px}
.logo{font-weight:800;font-size:18px;display:inline-flex;align-items:center;gap:10px}
.logo .logo-icon{width:20px;height:20px}
.top-nav{display:flex;gap:16px;align-items:center}
.top-nav a{color:var(--text-muted);text-decoration:none;font-size:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px}
.top-nav a:hover{color:var(--text)}
.top-nav a.active{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:transparent;-webkit-background-clip:text;background-clip:text;position:relative}
.top-nav a.active::after{content:"";display:block;height:3px;border-radius:2px;background-image:linear-gradient(90deg,var(--accent),var(--primary));position:absolute;left:6px;right:6px;bottom:-10px}
.header-meta{margin-inline-start:auto;color:var(--text-muted);font-size:13px}

/* tabs */
.tabs{display:flex;gap:10px;align-items:center;margin:12px 0}
.tab-btn{padding:8px 12px;border-radius:12px;background:transparent;border:1px solid transparent;color:var(--text-muted);cursor:pointer}
.tab-btn:hover{color:var(--text);transform:translateY(-1px)}
.tab-btn.active{background:transparent;color:var(--text);border-bottom:3px solid var(--accent);padding-bottom:6px}

/* layout grid */
.grid{display:grid;grid-template-columns:1fr 380px;gap:16px}
.grid .full{grid-column:1 / -1}

/* Search card */
.search-card.glass{padding:18px;margin-top:6px}
.section-title{font-weight:700;margin-bottom:8px;color:var(--text)}
.search-input{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.search-input input{background:transparent;border:0;color:var(--text);outline:none;font-size:15px;width:100%}
.search-input:focus-within{box-shadow:0 6px 24px rgba(62,184,255,0.06);border-color:var(--focus)}

/* Quick filters */
.card-inner{padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}

.brand-inner{background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); padding:12px; border-radius:8px}
.filter-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--btn-r);cursor:pointer;border:1px solid var(--stroke-soft);background:var(--glass)}
.toggle input{display:none}
.toggle.is-on{border-color:transparent;background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)), linear-gradient(90deg,var(--primary),var(--primary-2));color:#001018;box-shadow:0 8px 28px rgba(55,201,255,0.08)}
.toggle.active{border-color:transparent;background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)), linear-gradient(90deg,var(--primary),var(--primary-2));color:#001018;box-shadow:0 8px 28px rgba(55,201,255,0.08)}

.brand-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--chip-r);cursor:pointer;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}
.brand-chip img{width:20px;height:20px;object-fit:contain}
.brand-chip:hover{box-shadow:0 10px 30px rgba(55,201,255,0.06);border-color:rgba(55,201,255,0.14);transform:translateY(-2px)}
.brand-chip.active{box-shadow:0 0 0 2px rgba(255,110,46,0.12), 0 18px 40px rgba(55,201,255,0.12);background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));color:#001018}

/* Tasks card */
.tasks-card.glass{padding:16px}
.task-chips{display:flex;flex-wrap:wrap;gap:8px}
.task-chip{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--text-muted);cursor:pointer}
.task-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.task-chip.selected{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#001018;border-color:transparent;box-shadow:0 10px 30px rgba(106,125,255,0.12)}

/* Table container - glass */
/* table container should be darker glass */
#table-container.glass{padding:12px;border-radius:12px;overflow:auto;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg, rgba(6,10,18,0.7), rgba(6,10,18,0.55));box-shadow:0 12px 36px rgba(2,6,23,0.6)}
table.styled-table{width:100%;border-collapse:collapse;min-width:900px}
table.styled-table thead th{position:sticky;top:0;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--text-muted);padding:12px;border-bottom:1px solid rgba(255,255,255,0.04);z-index:6;backdrop-filter:blur(8px)}
table.styled-table tbody tr{background:var(--row)}
table.styled-table tbody tr:nth-child(even){background:var(--row-alt)}
table.styled-table td, table.styled-table th{padding:10px;text-align:center;color:var(--text)}
td.model-col{position:sticky;right:0;background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent);text-align:right}
table.styled-table tbody tr:hover{background:rgba(255,255,255,0.04)}

/* Heatmap cells: server produces inline gradient; add border/radius for readability */
.table-heat{border-radius:8px;padding:8px;border:1px solid rgba(255,255,255,0.06);display:inline-block;min-width:56px}

/* sort icons */
.sort-icon{color:var(--text-muted);font-size:12px;margin-left:6px}
.sorted-col .sort-icon{color:var(--primary)}

/* style native selects and inputs to match glass */
select, input[type="text"], input[type="search"] {
	background: rgba(255,255,255,0.02);
	color: var(--text);
	border: 1px solid rgba(255,255,255,0.04);
	padding: 8px 10px;
	border-radius: 10px;
}
select{appearance:none;padding-inline:12px}

/* buttons */
.btn{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#001018;padding:8px 12px;border-radius:10px;border:0;cursor:pointer;box-shadow:0 8px 20px rgba(58,120,255,0.12)}
.btn:hover{transform:translateY(-1px)}

.section-title{color:var(--accent)}
.muted{color:var(--text-muted)}

/* focus & accessibility */
*:focus{outline:2px solid var(--focus);outline-offset:2px}

/* scrollbar - webkit */
#table-container::-webkit-scrollbar{height:8px;background:transparent}
#table-container::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:8px}

@media (max-width:980px){.grid{grid-template-columns:1fr}}

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