/* ==========================================================================
   KnowMore - Android-style app interface for phones (<= 767px)
   Top app bar, bottom navigation, floating action button, card lists.
   Desktop and tablet layouts are untouched.
   ========================================================================== */
#km-bottom-nav, #km-fab, #km-appbar-menu, .km-drawer-head { display: none; }

@media only screen and (max-width: 767px) {
	:root {
		--km-primary: #6358DE;
		--km-primary-soft: #EFEEFC;
		--km-surface: #FFFFFF;
		--km-bg: #F4F3FA;
		--km-text: #1C1B22;
		--km-muted: #6E6B7B;
		--km-line: #E7E5F0;
		--km-shadow: 0 1px 2px rgba(28, 27, 34, .06), 0 2px 8px rgba(28, 27, 34, .06);
		--km-nav-h: 64px;
	}
	body.dark {
		--km-primary: #8F87F0;
		--km-primary-soft: #2E2A4A;
		--km-surface: #23232E;
		--km-bg: #18181F;
		--km-text: #F2F1F9;
		--km-muted: #A3A1B5;
		--km-line: #35354A;
		--km-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	}

	html, body { background: var(--km-bg) !important; }
	html:has(body.dark) { background: #18181F !important; }
	.navbar .separator, .separator { display: none !important; }
	body { color: var(--km-text); font-size: 15px; -webkit-tap-highlight-color: transparent;
		padding-bottom: calc(var(--km-nav-h) + 16px + env(safe-area-inset-bottom)) !important; }
	body > div.container-fluid { padding: 12px 14px 0 !important; }

	/* ---------- Top app bar ---------- */
	.navbar-fixed-top { margin: 0 !important; box-shadow: 0 1px 0 var(--km-line), 0 2px 6px rgba(0,0,0,.04); }
	.navbar-fixed-top .navbar-inner { background: var(--km-surface) !important; border: 0 !important; padding: 0 6px 0 4px !important; min-height: 56px !important; }
	.navbar-fixed-top .container-fluid { height: 56px; gap: 4px !important; }
	#km-appbar-menu {
		display: inline-flex; align-items: center; justify-content: center; flex: none;
		width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
		color: var(--km-text); font-size: 20px; padding: 0; margin: 0;
	}
	#km-appbar-menu:active { background: var(--km-primary-soft); }
	.navbar .brand { font-size: 18px !important; font-weight: 600; color: var(--km-text) !important; padding: 0 4px !important; }
	.navbar .brand .main-gravatar { display: none; }
	body.km-has-brand .navbar .brand { display: none; }
	/* brand switcher becomes the title */
	.navbar-fixed-top .btn-group.km-brand-switch { order: 0 !important; flex: 1 1 auto !important; min-width: 0; }
	.navbar-fixed-top .btn-group.km-brand-switch > .btn {
		background: transparent !important; border: 0 !important; box-shadow: none !important; text-shadow: none;
		color: var(--km-text) !important; font-size: 18px; font-weight: 600; max-width: 100% !important;
		padding: 8px 4px !important; text-align: left;
	}
	.navbar-fixed-top .btn-group.km-brand-switch > .btn img { display: none; }
	/* user menu becomes a round avatar */
	.navbar-fixed-top .btn-group.km-user-menu { order: 3 !important; flex: none !important; }
	.navbar-fixed-top .btn-group.km-user-menu > .btn {
		width: 38px; height: 38px; border-radius: 50% !important; padding: 0 !important; font-size: 0 !important;
		background: var(--km-primary) !important; border: 0 !important; box-shadow: none !important;
		display: inline-flex; align-items: center; justify-content: center;
	}
	.navbar-fixed-top .btn-group.km-user-menu > .btn:before {
		content: attr(data-initial); font-size: 16px; font-weight: 700; color: #fff; font-family: Roboto, Arial, sans-serif;
	}
	.navbar-fixed-top .btn-group.km-user-menu > .btn .caret, .navbar-fixed-top .btn-group.km-user-menu > .btn i { display: none; }
	.navbar-fixed-top .dropdown-menu {
		border-radius: 14px; border: 0; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 6px 0; margin-top: 6px;
		background: var(--km-surface);
	}
	.navbar-fixed-top .dropdown-menu a { padding: 11px 18px; font-size: 15px; color: var(--km-text); }

	/* The old purple "Menu" button: the app bar has the hamburger now */
	#km-nav-toggle { display: none !important; }

	/* ---------- Navigation drawer (existing sidebar) ---------- */
	body > div.container-fluid > div.row-fluid > div.span2 {
		width: 84% !important; max-width: 320px; padding: 0 0 20px !important; background: var(--km-surface) !important;
		border-radius: 0 20px 20px 0; transform: translateX(-105%); transition: transform .22s ease; display: block !important;
	}
	body > div.container-fluid > div.row-fluid > div.span2.km-nav-open { transform: translateX(0); }
	.km-drawer-head { display: block; padding: 22px 20px 14px; border-bottom: 1px solid var(--km-line); margin-bottom: 6px; }
	.km-drawer-head b { display: block; font-size: 18px; color: var(--km-text); }
	.km-drawer-head span { font-size: 13px; color: var(--km-muted); }
	body > div.container-fluid > div.row-fluid > div.span2 #km-nav-close { display: none !important; }
	body > div.container-fluid > div.row-fluid > div.span2 .nav-list { padding: 0 10px; }
	body > div.container-fluid > div.row-fluid > div.span2 .nav-list > li > a {
		border-radius: 24px !important; padding: 11px 16px !important; color: var(--km-text); text-shadow: none; margin: 1px 0;
	}
	body > div.container-fluid > div.row-fluid > div.span2 .nav-list > li.active > a {
		background: var(--km-primary-soft) !important; color: var(--km-primary) !important; font-weight: 600;
	}
	body > div.container-fluid > div.row-fluid > div.span2 .nav-list > li.active > a i { filter: none; }
	body > div.container-fluid > div.row-fluid > div.span2 .nav-header { color: var(--km-muted) !important; }
	.km-nav-backdrop { background: rgba(10, 8, 30, .45) !important; }

	/* ---------- Bottom navigation ---------- */
	#km-bottom-nav {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
		height: calc(var(--km-nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
		background: var(--km-surface); box-shadow: 0 -1px 0 var(--km-line), 0 -4px 14px rgba(0,0,0,.05);
	}
	#km-bottom-nav a {
		flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		color: var(--km-muted); text-decoration: none; font-size: 11.5px; font-weight: 600; letter-spacing: .1px;
	}
	#km-bottom-nav a i {
		font-size: 19px; line-height: 30px; width: 58px; height: 30px; text-align: center; border-radius: 16px;
		transition: background .15s;
	}
	#km-bottom-nav a.is-active { color: var(--km-primary); }
	#km-bottom-nav a.is-active i { background: var(--km-primary-soft); }

	/* ---------- Floating action button ---------- */
	#km-fab {
		display: inline-flex; position: fixed; right: 16px; bottom: calc(var(--km-nav-h) + 16px + env(safe-area-inset-bottom)); z-index: 1034;
		align-items: center; gap: 8px; height: 56px; padding: 0 20px 0 16px; border-radius: 18px;
		background: var(--km-primary); color: #fff !important; text-decoration: none !important; font-weight: 600; font-size: 15px;
		box-shadow: 0 6px 16px rgba(99, 88, 222, .35), 0 2px 4px rgba(0,0,0,.12);
	}
	#km-fab i { font-size: 18px; }
	#km-fab.km-fab-small { width: 56px; padding: 0; justify-content: center; }
	#km-fab.km-fab-small span { display: none; }

	/* ---------- Page header ---------- */
	.span10 > div:first-child > p.lead, .span10 > p.lead:first-child { display: none; } /* brand name is in the app bar */
	.span10 h1, .span10 h2, .span10 .km-page-title { font-size: 24px !important; font-weight: 600; letter-spacing: -.2px; margin: 6px 0 4px !important; color: var(--km-text); }
	.span10 h3 { font-size: 17px; font-weight: 600; }
	.span10 .km-sub, .span10 p.km-sub { color: var(--km-muted); font-size: 13.5px; }

	/* ---------- Surfaces ---------- */
	.km-panel, .well, .km-card, .km-st-card, .alert, .accordion-group, .km-empty, .km-tasks, .sidebar-box {
		border-radius: 16px !important; border: 0 !important; box-shadow: var(--km-shadow) !important; background: var(--km-surface);
	}
	.span10 .km-panel, .span10 .well, .span10 .km-st-card { padding: 16px !important; margin-bottom: 14px; }
	.alert { padding: 12px 14px !important; }
	.alert-success { background: #E7F7EF !important; color: #126B47 !important; }
	.alert-error, .alert-danger { background: #FDECEC !important; color: #A42A2A !important; }
	.alert-info { background: var(--km-primary-soft) !important; color: var(--km-primary) !important; }
	.km-cards { gap: 10px !important; }
	.km-card-num { color: var(--km-text); }

	/* ---------- Controls ---------- */
	.span10 .btn, .km-home-toolbar .btn {
		border-radius: 12px !important; min-height: 42px; padding: 9px 16px !important; font-weight: 600; font-size: 14px !important;
		box-shadow: none !important; text-shadow: none !important; background-image: none !important;
		display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	}
	.span10 .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-inverse) { background: var(--km-surface); border: 1px solid var(--km-line) !important; color: var(--km-text); }
	.span10 .btn-primary { background: var(--km-primary) !important; border: 0 !important; color: #fff !important; }
	.span10 .btn-mini, .span10 .btn-small { min-height: 34px; padding: 6px 12px !important; font-size: 13px !important; }
	.span10 input[type=text], .span10 input[type=url], .span10 input[type=email], .span10 input[type=search],
	.span10 input[type=password], .span10 input[type=number], .span10 input[type=date], .span10 select, .span10 textarea {
		border-radius: 12px !important; border: 1px solid var(--km-line) !important; background: var(--km-surface) !important;
		color: var(--km-text) !important; box-shadow: none !important; height: 46px; padding: 10px 14px !important; font-size: 16px !important;
	}
	.span10 textarea { height: auto; min-height: 96px; }
	.span10 input:focus, .span10 select:focus, .span10 textarea:focus { border-color: var(--km-primary) !important; outline: 2px solid var(--km-primary-soft); }
	.span10 label, .span10 .control-label { font-weight: 600; font-size: 13.5px; color: var(--km-text); }
	.km-chip { border-radius: 20px !important; padding: 8px 14px !important; }
	.km-row.km-chips-scroll, .span10 > .km-row:has(> .km-chip) { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
	.span10 > .km-row:has(> .km-chip) > .km-chip { flex: none; }

	/* ---------- Tables become card lists ---------- */
	table.km-cardlist, table.km-cardlist tbody { display: block; width: 100%; border: 0; background: transparent !important; }
	table.km-cardlist thead { display: none; }
	table.km-cardlist tr {
		display: block; background: var(--km-surface) !important; border-radius: 16px; box-shadow: var(--km-shadow);
		padding: 12px 14px; margin: 0 0 10px;
	}
	table.km-cardlist tr:hover td { background: transparent !important; }
	table.km-cardlist td {
		display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0 !important;
		padding: 5px 0 !important; background: transparent !important; font-size: 14px !important; white-space: normal !important; min-height: 0;
	}
	table.km-cardlist td:empty { display: none; }
	table.km-cardlist td[data-label]:before {
		content: attr(data-label); color: var(--km-muted); font-size: 12.5px; font-weight: 600; flex: none; max-width: 45%;
	}
	table.km-cardlist td.km-card-title { display: block; font-size: 16px !important; font-weight: 600; padding: 2px 0 8px !important;
		border-bottom: 1px solid var(--km-line) !important; margin-bottom: 4px; }
	table.km-cardlist td.km-card-title:before { display: none; }
	table.km-cardlist td.km-card-title a { color: var(--km-text); font-weight: 600; }
	table.km-cardlist td > p { margin: 0; }
	table.km-cardlist td[colspan] { display: block; text-align: center; color: var(--km-muted); }
	table.km-cardlist td[colspan]:before { display: none; }
	.km-auto-scroll:has(> table.km-cardlist), .km-table-wrap:has(> table.km-cardlist) { overflow: visible !important; }

	/* ---------- Homepage (brands) ---------- */
	.km-home-title { display: none; }
	.km-home-toolbar > .btn { display: none !important; } /* the FAB adds a brand */
	.km-home-search input.search-query { height: 48px; border-radius: 24px !important; padding: 0 18px !important; font-size: 16px;
		border: 0 !important; background: var(--km-surface) !important; box-shadow: var(--km-shadow) !important; }
	.km-home-search .btn { border-radius: 24px !important; min-height: 48px; }

	table.km-cardlist, table.km-cardlist.km-table { min-width: 0 !important; max-width: 100% !important; margin: 0 !important; }
	table.km-cardlist td .btn { min-height: 34px; padding: 6px 12px !important; }
	body.km-has-brand .span10 p.lead, body.km-has-brand .span10 .lead { display: none !important; }

	/* Search bars: one rounded row */
	.span10 form.form-search, .km-home-search { float: none !important; display: flex !important; gap: 8px; width: 100%; margin: 12px 0 !important; }
	.span10 form.form-search input.search-query, .span10 form.form-search input[type=text] { flex: 1 1 auto; width: auto !important; min-width: 0;
		border-radius: 24px !important; border: 0 !important; box-shadow: var(--km-shadow) !important; height: 46px; }
	.span10 form.form-search .btn { border-radius: 24px !important; min-height: 46px; flex: none; }
	.campaigns-rss-btn { display: none !important; }

	/* Key / value rows stack */
	.km-kv { display: block !important; padding: 8px 0; border-bottom: 1px solid var(--km-line); }
	.km-kv .km-k { width: auto !important; color: var(--km-muted); font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
	.km-kv .km-v { word-break: break-all; }

	/* Stat cards two per row */
	.km-cards { display: flex; flex-wrap: wrap; }
	.km-cards .km-card { flex: 1 1 calc(50% - 10px) !important; min-width: 0 !important; }

	body.km-has-fab .km-dup-of-fab { display: none !important; }

	/* ---------- Misc ---------- */
	footer, body > div.container-fluid > hr { display: none !important; }
	.km-st-grid { gap: 12px !important; }
	.modal { border-radius: 20px !important; }
	.pagination ul > li > a, #pagination .btn { border-radius: 10px !important; }
}