/* ============================================================
   EcomFlows Task CRM - Stylesheet
   Design tokens
   ============================================================ */
:root {
	--navy:        #1F2A44;
	--navy-light:  #2D3A5C;
	--bg:          #F5F6FA;
	--surface:     #FFFFFF;
	--border:      #E5E7EB;
	--text:        #1F2A44;
	--text-muted:  #6B7280;
	--accent:      #3B6FE0;
	--accent-dark: #2C56C3;
	--green:       #16A34A;
	--green-bg:    #DCFCE7;
	--orange:      #D97706;
	--orange-bg:   #FEF3C7;
	--red:         #DC2626;
	--red-bg:      #FEE2E2;
	--purple:      #7C3AED;
	--purple-bg:   #EDE9FE;
	--blue-bg:     #DBEAFE;
	--gray-bg:     #F3F4F6;
	--radius:      10px;
	--shadow:      0 1px 3px rgba(31,42,68,0.06), 0 1px 2px rgba(31,42,68,0.08);
	--font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono:   "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	font-family: var(--font);
	color: var(--text);
	background: var(--bg);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 12px; color: var(--text-muted); }

/* ============================================================
   App shell layout
   ============================================================ */
.app-shell {
	display: flex;
	min-height: 100vh;
}

.sidebar {
	width: 230px;
	flex-shrink: 0;
	background: var(--navy);
	color: #fff;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0; left: 0; bottom: 0;
	overflow-y: auto;
	z-index: 40;
}

.sidebar-brand {
	padding: 20px 22px;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand span { color: var(--accent); }

.sidebar-nav { padding: 12px; flex: 1; }
.sidebar-section-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.35);
	padding: 14px 12px 6px;
}
.sidebar-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	color: rgba(255,255,255,0.75);
	font-size: 13.5px;
	font-weight: 500;
	margin-bottom: 2px;
}
.sidebar-link:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
.sidebar-link.active { background: var(--accent); color: #fff; }
.sidebar-link .icon { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar-footer {
	padding: 14px 12px;
	border-top: 1px solid rgba(255,255,255,0.08);
}

.main {
	margin-left: 230px;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.topbar {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	padding: 14px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 30;
}
.topbar h1 { margin: 0; }
.topbar-right { display: flex; align-items: center; gap: 18px; }

.content { padding: 24px 28px; max-width: 1280px; width: 100%; }

/* Mobile nav toggle */
.mobile-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px 10px;
	cursor: pointer;
}

@media (max-width: 880px) {
	.sidebar { transform: translateX(-100%); transition: transform 0.2s ease; }
	.sidebar.open { transform: translateX(0); }
	.main { margin-left: 0; }
	.mobile-nav-toggle { display: inline-flex; }
	.content { padding: 16px; }
	.topbar { padding: 12px 16px; }
}

/* ============================================================
   Notification bell + dropdown
   ============================================================ */
.notif-wrap { position: relative; }
.notif-bell {
	position: relative;
	background: var(--gray-bg);
	border: none;
	border-radius: 50%;
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.notif-badge {
	position: absolute; top: -2px; right: -2px;
	background: var(--red); color: #fff;
	font-size: 10px; font-weight: 700;
	min-width: 16px; height: 16px; border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	padding: 0 4px;
}
.notif-dropdown {
	position: absolute; right: 0; top: 48px;
	width: 320px; max-height: 380px; overflow-y: auto;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); box-shadow: var(--shadow);
	display: none; z-index: 50;
}
.notif-dropdown.open { display: block; }
.notif-item {
	display: block; padding: 12px 14px;
	border-bottom: 1px solid var(--border);
	font-size: 13px; color: var(--text);
}
.notif-item:hover { background: var(--gray-bg); text-decoration: none; }
.notif-item.unread { background: var(--blue-bg); }
.notif-item .notif-time { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
.notif-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* User menu */
.user-menu { position: relative; }
.user-chip {
	display: flex; align-items: center; gap: 8px;
	cursor: pointer; padding: 4px 10px 4px 4px;
	border-radius: 20px; border: 1px solid var(--border);
	background: var(--surface);
}
.user-avatar {
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--accent); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700;
}
.user-dropdown {
	position: absolute; right: 0; top: 46px;
	width: 180px; background: var(--surface);
	border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: var(--shadow); display: none; z-index: 50; overflow: hidden;
}
.user-dropdown.open { display: block; }
.user-dropdown a { display: block; padding: 10px 14px; color: var(--text); font-size: 13.5px; }
.user-dropdown a:hover { background: var(--gray-bg); text-decoration: none; }

/* ============================================================
   Cards / stats
   ============================================================ */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin-bottom: 22px;
}
.stat-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px 18px;
	box-shadow: var(--shadow);
}
.stat-card .stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.stat-card .stat-label { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.stat-card.accent-blue   .stat-value { color: var(--accent); }
.stat-card.accent-green  .stat-value { color: var(--green); }
.stat-card.accent-orange .stat-value { color: var(--orange); }
.stat-card.accent-red    .stat-value { color: var(--red); }
.stat-card.accent-purple .stat-value { color: var(--purple); }

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	box-shadow: var(--shadow);
	margin-bottom: 18px;
}
.card-header {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 14px;
}
.card-header h2, .card-header h3 { margin: 0; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 9px 16px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 13.5px; font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: var(--gray-bg); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: #EBEDF1; }
.btn-success { background: var(--green); color: #fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   Forms
   ============================================================ */
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.form-group { margin-bottom: 16px; }
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row > .form-group { flex: 1; min-width: 180px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], input[type=file],
select, textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 13.5px;
	font-family: inherit;
	color: var(--text);
	background: var(--surface);
}
textarea { resize: vertical; min-height: 90px; }
input:focus, select:focus, textarea:focus {
	outline: none; border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(59,111,224,0.12);
}
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row label { margin: 0; font-weight: 500; }
.checkbox-row input { width: auto; }

/* ============================================================
   Badges / pills (status, priority, due dates)
   ============================================================ */
.badge {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
	white-space: nowrap;
}
.badge-gray   { background: var(--gray-bg);   color: var(--text-muted); }
.badge-blue   { background: var(--blue-bg);   color: var(--accent-dark); }
.badge-purple { background: var(--purple-bg); color: var(--purple); }
.badge-green  { background: var(--green-bg);  color: var(--green); }
.badge-red    { background: var(--red-bg);    color: var(--red); }

.badge-outline-gray, .badge-outline-blue, .badge-outline-orange, .badge-outline-red {
	background: transparent; border: 1px solid var(--border);
}
.badge-outline-gray   { color: var(--text-muted); }
.badge-outline-blue   { color: var(--accent); border-color: rgba(59,111,224,0.3); }
.badge-outline-orange { color: var(--orange); border-color: rgba(217,119,6,0.3); }
.badge-outline-red    { color: var(--red); border-color: rgba(220,38,38,0.3); }

.pill {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 10px; border-radius: 999px;
	font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.pill-gray   { background: var(--gray-bg);   color: var(--text-muted); }
.pill-gray::before   { background: #9CA3AF; }
.pill-blue   { background: var(--blue-bg);   color: var(--accent-dark); }
.pill-blue::before   { background: var(--accent); }
.pill-orange { background: var(--orange-bg); color: var(--orange); }
.pill-orange::before { background: var(--orange); }
.pill-red    { background: var(--red-bg);    color: var(--red); }
.pill-red::before    { background: var(--red); }
.pill-green  { background: var(--green-bg);  color: var(--green); }
.pill-green::before  { background: var(--green); }

/* ============================================================
   Tables
   ============================================================ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table th, table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
table th { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
table tbody tr:hover { background: var(--gray-bg); }
table .cell-muted { color: var(--text-muted); font-size: 12.5px; }
.row-link { display: block; color: var(--text); font-weight: 600; }
.row-link:hover { color: var(--accent); text-decoration: none; }

/* ============================================================
   Filters bar
   ============================================================ */
.filters-bar {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
	margin-bottom: 16px; padding: 14px 16px;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.filters-bar .form-group { margin-bottom: 0; min-width: 150px; }
.filters-bar label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tab {
	padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted);
	border-bottom: 2px solid transparent; cursor: pointer;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================
   Alerts / flash messages
   ============================================================ */
.alert {
	padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;
	font-size: 13.5px; font-weight: 500;
	display: flex; align-items: center; gap: 10px;
}
.alert-success { background: var(--green-bg); color: #166534; }
.alert-error   { background: var(--red-bg);   color: #991B1B; }
.alert-info    { background: var(--blue-bg);  color: var(--accent-dark); }

/* ============================================================
   Modal
   ============================================================ */
.modal-overlay {
	position: fixed; inset: 0; background: rgba(15,23,42,0.45);
	display: none; align-items: center; justify-content: center; z-index: 100;
	padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal {
	background: var(--surface); border-radius: var(--radius);
	max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto;
	box-shadow: var(--shadow);
}
.modal-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); line-height: 1; }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ============================================================
   Auth pages (login / forgot / reset)
   ============================================================ */
.auth-page {
	min-height: 100vh; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
	padding: 20px;
}
.auth-card {
	background: var(--surface); border-radius: 14px; padding: 32px;
	width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.auth-card .brand {
	font-size: 19px; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.02em;
}
.auth-card .brand span { color: var(--accent); }
.auth-card .subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 22px; }
.auth-footer-link { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-muted); }

/* ============================================================
   Kanban (staff "My Tasks" view)
   ============================================================ */
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.kanban-column { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.kanban-column h3 { display: flex; align-items: center; justify-content: space-between; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 4px 6px 10px; }
.kanban-count { background: var(--gray-bg); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; }
.task-card {
	background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
	padding: 12px; margin-bottom: 10px; display: block; color: var(--text);
}
.task-card:hover { border-color: var(--accent); text-decoration: none; }
.task-card .task-title { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.task-card .task-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kanban-empty { color: var(--text-muted); font-size: 12.5px; text-align: center; padding: 18px 6px; }

/* ============================================================
   Misc utilities
   ============================================================ */
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty-state h3 { color: var(--text); margin-bottom: 6px; }
.avatar-stack { display: flex; align-items: center; gap: 8px; }
.avatar-sm {
	width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.screenshot-thumb {
	display: inline-block; width: 90px; height: 70px; border-radius: 6px; overflow: hidden;
	border: 1px solid var(--border); margin: 4px; background: var(--gray-bg);
}
.screenshot-thumb img { width: 100%; height: 100%; object-fit: cover; }
.progress-track { background: var(--gray-bg); border-radius: 999px; height: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; }
code, .mono { font-family: var(--font-mono); font-size: 12.5px; background: var(--gray-bg); padding: 1px 5px; border-radius: 4px; }

/* ============================================================
   v2 UI upgrades: dark mode, avatars, smoother cards
   ============================================================ */
html[data-theme="dark"] {
	--bg: #0F172A;
	--surface: #111827;
	--border: #263244;
	--text: #E5E7EB;
	--text-muted: #94A3B8;
	--gray-bg: #1F2937;
	--blue-bg: rgba(59,111,224,.18);
	--green-bg: rgba(22,163,74,.18);
	--orange-bg: rgba(217,119,6,.18);
	--red-bg: rgba(220,38,38,.18);
	--purple-bg: rgba(124,58,237,.18);
	--shadow: 0 12px 30px rgba(0,0,0,.25);
}
.card, .topbar, .notif-dropdown, .user-dropdown { transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card { border-radius: 14px; }
.btn { border-radius: 10px; }
.user-avatar-img { border-radius: 50%; object-fit: cover; display: inline-block; border: 1px solid var(--border); }
.user-chip .user-avatar-img { flex-shrink: 0; }
select[multiple] { min-height: 150px; padding: 8px; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
	background: #0B1220;
	color: var(--text);
	border-color: var(--border);
}
html[data-theme="dark"] table tr { border-color: var(--border); }
html[data-theme="dark"] .sidebar { background: #0B1220; }
.staff-mini{display:flex;align-items:center;gap:10px;}

/* ============================================================
   v3 Premium CRM UI: per-user themes, dashboard styles, mobile polish
   ============================================================ */
:root{
  --accent:#2563eb; --accent-2:#7c3aed; --accent-soft:rgba(37,99,235,.12);
  --success:#10b981; --warning:#f59e0b; --danger:#ef4444;
  --surface-2:#f8fafc; --glass:rgba(255,255,255,.72);
  --radius-lg:20px; --radius-md:14px;
}
html[data-theme="dark"]{
  --navy:#020617; --bg:#070b16; --surface:#0f172a; --surface-2:#111827;
  --glass:rgba(15,23,42,.78); --accent-soft:rgba(96,165,250,.16);
  --text:#e2e8f0; --text-muted:#94a3b8; --border:#263244;
}
body{background:
  radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 34rem),
  radial-gradient(circle at 80% 10%, rgba(124,58,237,.10), transparent 28rem),
  var(--bg);}
.sidebar{background:linear-gradient(180deg,#0b1220 0%, #111827 60%, #172033 100%);box-shadow:10px 0 30px rgba(15,23,42,.12)}
.sidebar-brand{font-size:18px}.sidebar-brand span{color:#60a5fa}.sidebar-link{border-radius:12px;margin:3px 12px;padding:11px 12px}.sidebar-link.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 10px 25px rgba(37,99,235,.28)}
.topbar{position:sticky;top:0;z-index:30;background:var(--glass);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.card,.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 14px 40px rgba(15,23,42,.06)}
.stat-card{position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;right:-32px;top:-32px;width:100px;height:100px;border-radius:50%;background:var(--accent-soft)}
.stat-value{font-size:32px;letter-spacing:-.04em}.stat-label{text-transform:uppercase;font-size:11px;letter-spacing:.08em;font-weight:800;color:var(--text-muted)}
.btn{border-radius:12px;font-weight:800;box-shadow:none}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:0}.btn-secondary{background:var(--surface-2);border-color:var(--border);color:var(--text)}
input,select,textarea{border-radius:12px!important;background:var(--surface);color:var(--text);border-color:var(--border)!important}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px var(--accent-soft);border-color:var(--accent)!important;outline:0}
.dashboard-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;padding:24px;border-radius:24px;background:linear-gradient(135deg,rgba(37,99,235,.95),rgba(124,58,237,.90));color:#fff;box-shadow:0 18px 45px rgba(37,99,235,.25)}
.dashboard-hero h2{font-size:30px;margin:2px 0 6px}.dashboard-hero p{color:rgba(255,255,255,.85);margin:0}.dashboard-hero .btn{background:#fff;color:#1e293b}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:900;opacity:.8}
.analytics-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-bottom:18px}.chart-row{display:grid;grid-template-columns:105px 1fr 35px;align-items:center;gap:10px;margin:13px 0}.chart-row span{font-weight:700;color:var(--text-muted);font-size:12px}.bar{height:10px;border-radius:99px;background:var(--gray-bg);overflow:hidden}.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.warning-box{padding:16px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border)}
.theme-toggle-form{margin:0}.theme-switch{width:48px;height:30px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);display:flex;align-items:center;justify-content:space-between;padding:0 7px;cursor:pointer;color:var(--text);font-size:14px}.theme-switch .moon{opacity:.45}html[data-theme="dark"] .theme-switch .moon{opacity:1}html[data-theme="dark"] .theme-switch .sun{opacity:.45}
.impersonation-bar{position:sticky;top:0;z-index:60;background:#f59e0b;color:#111827;padding:9px 16px;text-align:center;font-weight:800}.impersonation-bar a{color:#111827;text-decoration:underline}
.profile-appearance{margin:20px 0;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2)}
.badge,.pill{border-radius:999px;font-weight:800}.task-card{border-radius:16px;border:1px solid var(--border);background:var(--surface-2);transition:transform .15s ease, box-shadow .15s ease}.task-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.08);text-decoration:none}
html[data-dashboard-style="compact"] .dashboard-hero{padding:16px;border-radius:18px}html[data-dashboard-style="compact"] .dashboard-hero h2{font-size:24px}html[data-dashboard-style="compact"] .stat-card{padding:14px}html[data-dashboard-style="compact"] .stat-value{font-size:24px}html[data-dashboard-style="compact"] .card{border-radius:14px;padding:14px}
html[data-dashboard-style="kanban"] .cards-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}html[data-dashboard-style="kanban"] .stat-card{min-height:120px;border-top:4px solid var(--accent)}html[data-dashboard-style="kanban"] .analytics-grid{grid-template-columns:1fr}
@media(max-width:900px){.analytics-grid{grid-template-columns:1fr}.dashboard-hero{align-items:flex-start;flex-direction:column}.dashboard-hero h2{font-size:24px}.topbar{padding:12px}.topbar h1{font-size:18px}.topbar-right{gap:8px}.user-chip span{display:none}.cards-grid{grid-template-columns:1fr 1fr}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}table{min-width:720px}.content{padding:14px}.form-row{flex-direction:column}.card{padding:16px}}
@media(max-width:560px){.cards-grid{grid-template-columns:1fr}.notif-dropdown,.user-dropdown{right:0;max-width:92vw}.dashboard-hero{padding:18px}.chart-row{grid-template-columns:88px 1fr 28px}.btn{width:auto}.filters-bar{grid-template-columns:1fr!important}.content{padding:12px}.sidebar{width:260px}}


/* ============================================================
   v4 repair + premium spacing/mobile polish
   ============================================================ */
.app-shell{background:transparent}.main{min-width:0;width:100%;margin-left:230px}.content{max-width:1480px;margin:0 auto;padding:24px}.topbar{min-height:68px;padding:0 24px}.topbar-right{display:flex;align-items:center;gap:12px}.sidebar-brand{min-height:68px;display:flex;align-items:center;gap:10px}.brand-logo{max-width:170px;max-height:42px;object-fit:contain;display:block}.mobile-nav-toggle{display:none}.stat-strip{gap:16px;margin:18px 0}.stat-card{padding:22px;min-height:100px}.card{padding:22px;margin-bottom:18px}.card-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}.filters-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:end;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:18px;margin-bottom:18px;box-shadow:var(--shadow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:9px 14px;transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease}.btn:hover{transform:translateY(-1px);text-decoration:none}.dashboard-hero{margin-top:2px}.theme-switch{transition:background .2s ease, transform .16s ease}.theme-switch:hover{transform:translateY(-1px)}.notif-bell,.user-chip{border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}.notif-bell{width:42px;height:42px;display:flex;align-items:center;justify-content:center}.user-chip{padding:6px 10px 6px 6px}.table-wrap{width:100%;overflow-x:auto}.alert{border-radius:14px}.form-row{display:flex;gap:14px}.form-row>.form-group{flex:1}.form-group{margin-bottom:15px}.form-group label{font-weight:800;color:var(--text);margin-bottom:7px;display:block}.form-hint{font-size:12px;color:var(--text-muted);margin-top:6px}.auth-page{background:radial-gradient(circle at top left,rgba(37,99,235,.18),transparent 34rem),var(--bg)}
html[data-theme="dark"] .dashboard-hero{box-shadow:0 18px 55px rgba(0,0,0,.38)}html[data-theme="dark"] .notif-bell,html[data-theme="dark"] .user-chip{background:var(--surface-2)}html[data-theme="dark"] .filters-bar{background:var(--surface)}
@media(max-width:1024px){.mobile-nav-toggle{display:inline-flex}.sidebar{transform:translateX(-105%);transition:transform .22s ease}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.content{padding:16px}.topbar{padding:0 16px}.filters-bar{grid-template-columns:1fr 1fr}.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){.content{padding:12px}.topbar{min-height:62px}.topbar h1{font-size:17px}.topbar-right{gap:7px}.dashboard-hero{border-radius:18px}.filters-bar{grid-template-columns:1fr;padding:14px}.form-row{flex-direction:column;gap:0}.stat-strip{grid-template-columns:1fr!important}.card{padding:16px;border-radius:16px}.stat-card{padding:18px}.sidebar{width:280px}.notif-bell{width:38px;height:38px}.theme-switch{width:44px;height:28px}.user-chip{padding:5px}.user-chip span{display:none}}

/* ============================================================
   v5 full premium UI rebuild layer
   ============================================================ */
:root{
  --transition: .22s cubic-bezier(.2,.8,.2,1);
  --shadow-soft: 0 18px 55px rgba(15,23,42,.08);
  --shadow-hover: 0 22px 65px rgba(15,23,42,.14);
}
html{scroll-behavior:smooth} body{transition:background var(--transition), color var(--transition)}
.brand-link{color:#fff;text-decoration:none}.brand-link:hover{text-decoration:none}.brand-mark{width:36px;height:36px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));font-weight:900;color:#fff;box-shadow:0 12px 30px rgba(37,99,235,.32)}
.sidebar{border-right:1px solid rgba(255,255,255,.06)}.sidebar-brand strong{font-size:16px;letter-spacing:-.03em}.brand-logo{filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}.topbar-subtitle{font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.page-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.page-actions h2{font-size:26px;margin:4px 0 0}.accordion-card{animation:fadeUp .32s ease both}.card,.stat-card,.filters-bar,.performance-card{transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition),background var(--transition)}.card:hover,.stat-card:hover,.performance-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.hover-row{transition:background var(--transition)}.hover-row:hover{background:var(--surface-2)}.strong-link{font-weight:900;color:var(--text)}.strong-link:hover{color:var(--accent)}.small-text{font-size:12px;margin-top:4px}.pagination{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}.btn-block{width:100%}
.health-summary{display:flex;align-items:center;gap:16px;padding:14px;border-radius:18px;background:var(--surface-2);border:1px solid var(--border);margin-bottom:14px}.donut{--done:0;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--done)*1%), var(--gray-bg) 0);display:grid;place-items:center;flex:0 0 auto;box-shadow:inset 0 0 0 10px rgba(255,255,255,.04)}.donut:before{content:"";position:absolute}.donut span{width:62px;height:62px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-weight:900;color:var(--text);box-shadow:0 8px 24px rgba(15,23,42,.08)}
.dashboard-row-same{align-items:stretch}.performance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.performance-card{display:block;padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2);color:var(--text)}.performance-card:hover{text-decoration:none}.performance-card .staff-mini{justify-content:space-between}.performance-card .staff-mini>div{flex:1}.performance-card span{display:block;color:var(--text-muted);font-size:12px;margin-top:2px}.score-line{margin:14px 0}.score-line b{font-size:24px;letter-spacing:-.04em}.mini-metrics{display:flex;gap:8px;justify-content:space-between}.mini-metrics span{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px 9px;font-weight:800;color:var(--text-muted)}
.notif-dropdown,.user-dropdown{transform-origin:top right;animation:popIn .16s ease}.sidebar.open:after{content:""}.theme-switch{position:relative;overflow:hidden}.theme-switch:after{content:"";position:absolute;width:22px;height:22px;left:4px;top:3px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));transition:transform var(--transition);opacity:.18}html[data-theme="dark"] .theme-switch:after{transform:translateX(18px);opacity:.25}
html[data-theme="dark"] .brand-logo{filter:brightness(1.1) drop-shadow(0 8px 18px rgba(0,0,0,.35))}html[data-theme="dark"] .donut span{background:var(--surface-2)}html[data-theme="dark"] .mini-metrics span{background:#0b1220}.user-avatar{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:900}
html[data-dashboard-style="compact"] .content{max-width:1200px}html[data-dashboard-style="compact"] .performance-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}html[data-dashboard-style="kanban"] .performance-card{border-left:4px solid var(--accent)}html[data-dashboard-style="kanban"] .card-header h2:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);margin-right:8px}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes popIn{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:760px){.page-actions{align-items:flex-start;flex-direction:column}.page-actions .btn{width:100%}.health-summary{align-items:flex-start;flex-direction:column}.performance-grid{grid-template-columns:1fr}.topbar-subtitle{display:none}}

/* v5.1 group task + premium form fixes */
.staff-picker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:8px}
.staff-picker-card{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
.staff-picker-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.12);border-color:var(--accent)}
.staff-picker-card input{width:16px;height:16px;accent-color:var(--accent)}
.staff-picker-card span{display:flex;flex-direction:column;min-width:0}.staff-picker-card small{color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.staff-picker-card.is-selected,.staff-picker-card:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:0 10px 24px rgba(59,111,224,.16)}
.group-progress-card .progress-bar,.progress-bar{height:10px;background:var(--bg);border-radius:999px;overflow:hidden;border:1px solid var(--border)}
.group-progress-card .progress-bar span,.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px;transition:width .45s ease}
.mini-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.mini-stat-row>div{padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--bg-soft,var(--surface));display:flex;flex-direction:column}.mini-stat-row strong{font-size:22px}.mini-stat-row small{color:var(--text-muted)}
.assignee-progress-list{display:grid;gap:10px}.assignee-progress-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--surface);transition:transform .2s ease,box-shadow .2s ease}.assignee-progress-item:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,23,42,.10)}.assignee-progress-item>span:nth-child(2){flex:1;display:flex;flex-direction:column}.assignee-progress-item small{color:var(--text-muted)}
.file-thumb{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;text-align:center;text-decoration:none;padding:8px;overflow:hidden}.file-thumb .file-icon{font-size:26px}.file-thumb small{font-size:11px;color:var(--text-muted);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-upload-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
@media(max-width:640px){.mini-stat-row{grid-template-columns:repeat(2,1fr)}.staff-picker-grid{grid-template-columns:1fr}.card{border-radius:16px}.content{padding:14px}.form-row{gap:10px}}

/* v5.3 polish */
.checkbox-inline{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);font-weight:700}
.staff-profile-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.profile-hero-card{background:linear-gradient(135deg,rgba(59,111,224,.10),rgba(124,58,237,.08)),var(--surface)}
.progress-update-form input[type="range"]{width:100%;accent-color:var(--accent);cursor:pointer}.range-value{display:inline-flex;margin-top:7px;color:var(--accent);font-size:14px}.assignee-progress-item{transition:transform .16s ease, box-shadow .16s ease}.assignee-progress-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.logo-preview img{max-width:190px;max-height:70px;object-fit:contain;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);padding:8px}.brand-link{overflow:hidden}.brand-logo{width:auto;height:auto;max-width:180px;max-height:46px;object-fit:contain}
@media(max-width:720px){.staff-profile-head{align-items:flex-start}.progress-update-form .form-row{display:block}.brand-logo{max-width:145px;max-height:40px}}

/* ===== v5.6 dashboard polish ===== */
.content{max-width:none;width:100%;}
.dashboard-stat-links .stat-card{color:var(--text);text-decoration:none;display:block;cursor:pointer;}
.dashboard-stat-links .stat-card:hover{text-decoration:none;transform:translateY(-4px);}
.priority-work-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0;}
.priority-work-row .priority-card{min-width:0!important;margin-bottom:0;}
.analytics-grid.dashboard-row-same{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:18px;align-items:stretch;margin:18px 0;}
.chart-card{height:100%;margin-bottom:0;}
.performance-grid{grid-template-columns:repeat(auto-fill,minmax(245px,1fr))!important;align-items:stretch;}
.performance-card{min-height:150px;display:flex!important;flex-direction:column;justify-content:space-between;}
.performance-card .staff-mini{display:flex;align-items:center;gap:12px;justify-content:flex-start!important;min-width:0;}
.performance-card .staff-mini>div{min-width:0;}
.performance-card .staff-mini strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
.performance-card .user-avatar{flex:0 0 auto;}
.score-line{margin:16px 0 12px!important;}
.progress-track,.bar{overflow:hidden;}
.bar.danger i{background:var(--red)!important;}
.staff-performance-detail{margin-top:18px;}
.stats-grid.dashboard-stat-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:18px 0;}
@media(max-width:980px){.priority-work-row,.analytics-grid.dashboard-row-same{grid-template-columns:1fr;}.performance-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;}}
@media(max-width:560px){.performance-grid{grid-template-columns:1fr!important}.priority-work-row{gap:12px}.dashboard-stat-links{grid-template-columns:1fr!important}.stats-grid.dashboard-stat-links{grid-template-columns:1fr!important}}

/* ===== v5.7 settings-connected layout repair ===== */
html[data-layout-width="boxed"] .content{max-width:1280px;margin-left:auto;margin-right:auto;}
html[data-layout-width="wide"] .content{max-width:none;width:100%;}
html[data-layout-density="compact"] .card{padding:14px;margin-bottom:12px;}
html[data-layout-density="compact"] .stat-card{padding:13px 15px;}
html[data-layout-density="compact"] table th,html[data-layout-density="compact"] table td{padding:8px 10px;}
html[data-layout-density="compact"] .performance-card{min-height:126px;padding:13px;}

.content{display:flex;flex-direction:column;}
.dashboard-hero{order:1;}
.stat-strip{order:2;}
.priority-work-row{order:3;}
.analytics-grid{order:4;}
.card:has(.performance-grid){order:5;}
.card:has(table){order:6;}

html[data-dashboard-style="compact"] .dashboard-hero{padding:18px 20px;}
html[data-dashboard-style="compact"] .dashboard-hero p{display:none;}
html[data-dashboard-style="compact"] .stat-card .stat-value{font-size:22px;}
html[data-dashboard-style="compact"] .analytics-grid{grid-template-columns:1fr 1fr;}
html[data-dashboard-style="compact"] .health-summary{padding:10px;}
html[data-dashboard-style="compact"] .donut{width:70px;height:70px;}
html[data-dashboard-style="compact"] .donut span{width:48px;height:48px;font-size:12px;}

html[data-dashboard-style="kanban"] .priority-work-row{order:2;}
html[data-dashboard-style="kanban"] .stat-strip{order:3;}
html[data-dashboard-style="kanban"] .analytics-grid{order:4;}
html[data-dashboard-style="kanban"] .priority-card{border-top:4px solid var(--accent);}
html[data-dashboard-style="kanban"] .task-card{border-left:4px solid var(--accent);}
html[data-dashboard-style="kanban"] .dashboard-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent-2) 10%,transparent)),var(--surface);}

html[data-staff-columns="3"] .performance-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
html[data-staff-columns="4"] .performance-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
html[data-staff-columns="5"] .performance-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
html[data-staff-columns="auto"] .performance-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;}
.performance-grid{justify-content:start;}
.performance-card{overflow:hidden;}
.performance-card .staff-mini strong{max-width:100%;}
html[data-staff-display="name_only"] .performance-card .user-avatar,
html[data-staff-display="name_only"] .performance-card .user-avatar-img,
html[data-staff-display="name_only"] .table-wrap .user-avatar,
html[data-staff-display="name_only"] .table-wrap .user-avatar-img{display:none!important;}
html[data-staff-display="name_only"] .performance-card .staff-mini{gap:0;}
html[data-staff-display="card"] .performance-card{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface));border-radius:22px;}
html[data-staff-display="card"] .performance-card .staff-mini{padding-bottom:8px;border-bottom:1px solid var(--border);}
.user-avatar-img{object-fit:cover;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 22%,transparent);background:var(--surface-2,var(--surface));}

@media(max-width:1200px){html[data-staff-columns="5"] .performance-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}html[data-staff-columns="4"] .performance-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:900px){html[data-staff-columns="3"] .performance-grid,html[data-staff-columns="4"] .performance-grid,html[data-staff-columns="5"] .performance-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}.priority-work-row,.analytics-grid.dashboard-row-same{grid-template-columns:1fr!important;}}
@media(max-width:560px){html[data-staff-columns] .performance-grid{grid-template-columns:1fr!important;}.topbar-right{gap:8px}.user-chip span{display:none}.content{display:block}}