/**
 * Odin Theme — Component styles extracted from Thor's dashboard.css
 * Contains ONLY the styles needed by the docking platform in standalone mode.
 * Dark/light theme variables are in platform.html <style> block.
 */

/* ============================================
   BASE COMPONENTS (Light mode defaults)
   ============================================ */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--border);
	color: var(--text);
	background: #ffffff;
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	transition: 160ms ease-in-out;
}
.btn:hover { border-color: #d1d5db; background: #f9fafb; }
.btn.primary { background: #ffffff; color: var(--primary); border-color: var(--primary); }
.btn.primary:hover { background: #fff6f3; }
.btn.ghost { background: #ffffff; color: var(--text); }
.btn.blue { color: #1558d6; border-color: #1558d6; background: #ffffff; }
.btn.blue:hover { background: #eef3ff; border-color: #0f47ae; }
.btn.orange { color: #ff7a00; border-color: #ff7a00; background: #ffffff; }
.btn.orange:hover { background: #fff4e8; border-color: #e56e00; }

.glass {
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow);
}

.card {
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 16px;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: #f9fafb;
	color: var(--text);
	font-size: 12px;
}
.badge.ok { color: #0a7d33; background: #e9f9ef; border-color: #c8f0d7; }
.badge.warn { color: #8a5a00; background: #fff7e6; border-color: #ffe2a8; }
.badge.danger { color: #a31212; background: #ffe8e8; border-color: #ffc5c5; }
.badge-success { color: #0a7d33; background: #e9f9ef; border-color: #c8f0d7; }
.badge-warning { color: #8a5a00; background: #fff7e6; border-color: #ffe2a8; }

.pill {
	display: inline-flex;
	padding: 4px 8px;
	border-radius: 999px;
	background: #f3f4f6;
	border: 1px solid var(--border);
	font-size: 12px;
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #ffffff;
	color: var(--muted);
	cursor: pointer;
	transition: all 160ms ease;
}
.icon-btn:hover { background: #f9fafb; color: var(--primary); border-color: var(--primary); }

.dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	cursor: pointer;
	border-radius: 4px;
	font-size: 13px;
	color: var(--text);
	transition: background 0.15s;
}
.dropdown-item:hover { background: rgba(0, 0, 0, 0.04); }

input, select, textarea {
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.table {
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: 12px;
}
.table th { background: var(--table-header-bg); color: var(--muted); }
.table td { border-color: var(--border); }

/* Theme toggle */
.theme-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 24px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: #ffffff;
	cursor: pointer;
	transition: all 160ms ease;
}
.theme-toggle:hover { background: #f9fafb; border-color: var(--primary); }
.theme-toggle i { font-size: 12px; transition: all 200ms ease; position: absolute; }
.theme-toggle .theme-icon-dark { opacity: 1; color: #6b7280; }
.theme-toggle .theme-icon-light { opacity: 0; color: #f59e0b; }

/* Hidden utility */
.hidden { display: none !important; }

/* Language selector */
.lang-selector:hover { border-color: var(--primary, #ff6b47); }
body.dark-theme .lang-selector { background: var(--surface); border-color: var(--border); }
body.dark-theme .lang-selector:hover { background: #252b3b; }

/* ============================================
   PILL BAR (topbar center section) — light mode
   ============================================ */

:root {
	--pill-bar-bg: linear-gradient(135deg, rgba(240, 242, 245, 0.98) 0%, rgba(230, 232, 238, 0.95) 100%);
	--pill-bar-border: rgba(0, 0, 0, 0.08);
	--pill-bar-divider: rgba(0, 0, 0, 0.1);
	--pill-btn-bg: rgba(0, 0, 0, 0.04);
	--pill-btn-hover: rgba(0, 0, 0, 0.08);
}

html.dark-theme,
body.dark-theme {
	--pill-bar-bg: linear-gradient(135deg, rgba(15, 15, 25, 0.95) 0%, rgba(25, 25, 40, 0.9) 100%);
	--pill-bar-border: rgba(255, 255, 255, 0.06);
	--pill-bar-divider: rgba(255, 255, 255, 0.1);
	--pill-btn-bg: rgba(255, 255, 255, 0.06);
	--pill-btn-hover: rgba(255, 255, 255, 0.08);
}

/* ============================================
   DARK THEME OVERRIDES
   ============================================ */

body.dark-theme .glass { background: var(--glass); border-color: var(--border); }

body.dark-theme .btn { background: var(--surface); color: var(--text); border-color: var(--border); }
body.dark-theme .btn:hover { background: #252b3b; border-color: #3d4a5e; }
body.dark-theme .btn.primary { background: var(--surface); color: var(--primary); border-color: var(--primary); }
body.dark-theme .btn.primary:hover { background: rgba(255, 107, 71, 0.1); }
body.dark-theme .btn.ghost { background: var(--surface); }
body.dark-theme .btn.blue { background: var(--surface); }
body.dark-theme .btn.blue:hover { background: rgba(21, 88, 214, 0.15); }
body.dark-theme .btn.orange { background: var(--surface); }
body.dark-theme .btn.orange:hover { background: rgba(255, 122, 0, 0.15); }

body.dark-theme .card { background: var(--surface); }

body.dark-theme .table { background: var(--surface); border-color: var(--border); }
body.dark-theme .table th { background: #252b3b; color: var(--muted); }
body.dark-theme .table td { border-color: var(--border); }

body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
	background: #252b3b !important;
	color: var(--text) !important;
	border-color: var(--border) !important;
}
body.dark-theme input:focus,
body.dark-theme select:focus,
body.dark-theme textarea:focus {
	border-color: var(--primary) !important;
	box-shadow: 0 0 0 3px rgba(255, 107, 71, 0.18) !important;
}

body.dark-theme .modal { background: rgba(0, 0, 0, 0.7); }
body.dark-theme .modal .dialog { background: var(--surface); border-color: var(--border); }
body.dark-theme .modal .dialog .head,
body.dark-theme .modal .dialog .footer { background: var(--surface); border-color: var(--border); }

body.dark-theme .badge { background: #252b3b; border-color: var(--border); }
body.dark-theme .badge-success { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: #10b981; }
body.dark-theme .badge-warning { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); color: #fbbf24; }
body.dark-theme .badge.ok { color: #4ade80; background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.3); }
body.dark-theme .badge.warn { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); }
body.dark-theme .badge.danger { color: #f87171; background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); }

body.dark-theme .pill { background: #252b3b; border-color: var(--border); }

body.dark-theme .icon-btn { background: var(--surface); border-color: var(--border); color: var(--muted); }
body.dark-theme .icon-btn:hover { background: #252b3b; color: var(--primary); border-color: var(--primary); }

body.dark-theme .dropdown-item:hover { background: rgba(255, 255, 255, 0.08); }

body.dark-theme .theme-toggle { background: var(--surface); }
body.dark-theme .theme-toggle:hover { background: #252b3b; }
body.dark-theme .theme-toggle .theme-icon-dark { opacity: 0; }
body.dark-theme .theme-toggle .theme-icon-light { opacity: 1; }