/* ============================================================
   Barra lateral esquerda retrátil - KanbAda
   Este arquivo substitui o antigo header superior.
   Use com default.php contendo <header class="app-sidebar">.
   ============================================================ */

:root {
    --kanbada-sidebar-width: 74px;
    --kanbada-sidebar-visible: 74px;
    --kanbada-sidebar-collapsed-left: -64px;
    --kanbada-sidebar-bg: #ffffff;
    --kanbada-sidebar-border: #e5e7eb;
    --kanbada-sidebar-shadow: 2px 0 10px rgba(15, 23, 42, .08);
}

/* Base da página */
html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

/* Compatibilidade: se alguma página antiga ainda usar .app-header,
   ela também será transformada em sidebar. */
.app-header,
.app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;

    width: var(--kanbada-sidebar-width) !important;
    height: 100vh !important;
    min-height: 100vh !important;

    z-index: 3000 !important;
    background: var(--kanbada-sidebar-bg) !important;
    border-right: 1px solid var(--kanbada-sidebar-border) !important;
    border-bottom: 0 !important;
    box-shadow: var(--kanbada-sidebar-shadow) !important;

    display: block !important;
    overflow: visible !important;

    transform: translateX(0);
    transition: transform .22s ease, box-shadow .22s ease;
}

/* Conteúdo deslocado pela sidebar */
body.has-left-sidebar,
body:has(.app-sidebar),
body:has(.app-header) {
    padding-left: var(--kanbada-sidebar-visible) !important;
    padding-top: 0 !important;
    transition: padding-left .22s ease;
    box-sizing: border-box;
}

/* Sidebar recolhida: fica só uma pequena aba/botão visível */
body.sidebar-collapsed {
    padding-left: 10px !important;
}

body.sidebar-collapsed .app-header,
body.sidebar-collapsed .app-sidebar {
    transform: translateX(var(--kanbada-sidebar-collapsed-left));
    box-shadow: none !important;
}

/* Inner da sidebar */
.app-header-inner,
.app-sidebar-inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    padding: 10px 8px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;

    box-sizing: border-box !important;
}

/* Regiões */
.app-header .header-left,
.app-header .header-center,
.app-header .header-right,
.app-sidebar .header-left,
.app-sidebar .header-center,
.app-sidebar .header-right {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    gap: 0 !important;
}

.app-header .header-center,
.app-sidebar .header-center {
    display: none !important;
}

.app-header .header-right,
.app-sidebar .header-right {
    flex: 1 !important;
    align-items: flex-start !important;
}

/* Logo */
.logo-link {
    text-decoration: none !important;
}

.app-header .logo-link,
.app-sidebar .logo-link {
    width: 44px !important;
    height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 14px !important;
}

.app-header .logo-link:hover,
.app-sidebar .logo-link:hover {
    background: #f3f4f6 !important;
}

.header-left .logo-text {
    display: none !important;
}

.header-left .mini-logo,
.app-header .mini-logo,
.app-sidebar .mini-logo {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
}

/* Ações */
.header-actions {
    width: 100% !important;
    display: flex !important;
    background-color: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.header-actions ul {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    list-style: none !important;
}

.header-actions .action-item {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;

    padding: 0 !important;
    border-radius: 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer;
    position: relative;
    overflow: visible !important;

    transition: background-color .16s ease, transform .16s ease, opacity .16s ease;
}

.header-actions .action-item:hover {
    background: #f3f4f6 !important;
    opacity: 1 !important;
}

.header-actions .action-item:active {
    transform: scale(.96);
}

.header-actions .action-item a,
.header-actions .action-item i,
.header-actions .action-item .bx {
    color: #374151 !important;
    font-size: 21px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    pointer-events: none;
}

/* Avatar */
.icon.avatar,
.icon.avatar img,
.icon.avatar .initials,
.header-actions .action-item .initials {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    border-radius: 50% !important;
}

.header-actions .action-item .initials {
    background: #4a90e2 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Modo escuro compacto */
.mode {
    flex-direction: column !important;
    gap: 4px !important;
}

.mode .sun-moon {
    width: 34px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.mode .sun-moon i {
    position: absolute !important;
    font-size: 18px !important;
    transition: all .3s ease;
}

.mode .sun-moon i.sun {
    opacity: 0;
}

body.dark .mode .sun-moon i.sun {
    opacity: 1;
}

body.dark .mode .sun-moon i.moon {
    opacity: 0;
}

.toggle-switch {
    width: 34px !important;
    height: 18px !important;
    border-radius: 9px !important;
    background: #ddd !important;
    position: relative !important;
    cursor: pointer;
}

.toggle-switch .switch {
    position: absolute !important;
    width: 14px !important;
    height: 14px !important;
    background: #fff !important;
    border-radius: 50% !important;
    top: 50% !important;
    left: 2px !important;
    transform: translateY(-50%) !important;
    transition: all .2s ease;
}

body.dark .toggle-switch {
    background: #695CFE !important;
}

body.dark .toggle-switch .switch {
    left: 18px !important;
}

/* Botão da sidebar */
.sidebar-toggle-btn {
    position: absolute !important;
    top: 12px !important;
    right: -17px !important;

    width: 32px !important;
    height: 32px !important;

    border: 1px solid var(--kanbada-sidebar-border) !important;
    background: #ffffff !important;
    color: #374151 !important;
    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    cursor: pointer !important;
    z-index: 3100 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12) !important;
}

.sidebar-toggle-btn i {
    font-size: 20px !important;
    transition: transform .22s ease;
}

body.sidebar-collapsed .sidebar-toggle-btn i {
    transform: rotate(180deg);
}

/* Conteúdo principal */
.main {
    width: 100% !important;
    min-height: 100vh !important;
    padding-top: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Estados escuros */
body.dark .app-header,
body.dark .app-sidebar,
body.dark .sidebar-toggle-btn {
    background: #1e1e2f !important;
    border-color: #333344 !important;
}

body.dark .header-actions .action-item:hover,
body.dark .app-sidebar .logo-link:hover,
body.dark .app-header .logo-link:hover {
    background: #333344 !important;
}

body.dark .header-actions .action-item a,
body.dark .header-actions .action-item i,
body.dark .header-actions .action-item .bx,
body.dark .sidebar-toggle-btn {
    color: #e5e7eb !important;
}

/* Visitantes */
.guest-sidebar {
    background: linear-gradient(180deg, #01042c 10%,#667eea 100%) !important;
    border-right: 1px solid rgba(255,255,255,.15) !important;
}

.guest-sidebar .action-item i,
.guest-sidebar .action-item .bx {
    color: #fff !important;
}

.guest-sidebar .action-item:hover,
.guest-sidebar .logo-link:hover {
    background: rgba(255,255,255,.12) !important;
}

/* Badges */
.notification-badge {
    position: absolute;
    top: 2px !important;
    right: 2px !important;
    background: #ff5252;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 1;
}

.plan-indicator {
    position: absolute;
    top: 2px !important;
    right: 2px !important;
    color: white;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 1;
}

.plan-indicator.plan-1 { background: #9e9e9e; }
.plan-indicator.plan-2 { background: #ff9800; }
.plan-indicator.plan-3 { background: #9c27b0; }
/* Dropdown de notificações ajustado para sidebar
   IMPORTANTE:
   - O dropdown está dentro da sidebar, mas precisa se comportar como painel independente.
   - Quando fechado, não pode capturar cliques sobre o botão de recolher/expandir.
*/
#notification-dropdown.notification-dropdown,
.app-sidebar #notification-dropdown.notification-dropdown,
.app-header #notification-dropdown.notification-dropdown {
    position: fixed !important;
    top: 12px !important;
    left: calc(var(--kanbada-sidebar-width) + 12px) !important;
    right: auto !important;
    bottom: auto !important;

    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;

    height: auto !important;
    min-height: 120px !important;
    max-height: calc(100vh - 24px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;

    z-index: 3200 !important;

    display: none !important;
    flex-direction: initial !important;
    align-items: initial !important;
    justify-content: initial !important;
    gap: 0 !important;

    pointer-events: none !important;
}

#notification-dropdown.notification-dropdown[style*="display: block"],
#notification-dropdown.notification-dropdown.active,
#notification-dropdown.notification-dropdown.open {
    display: block !important;
    pointer-events: auto !important;
}

body.sidebar-collapsed #notification-dropdown.notification-dropdown {
    left: 48px !important;
}

/* Garante que as regras globais da sidebar/Materialize não deformem o dropdown */
#notification-dropdown.notification-dropdown > li {
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    height: auto !important;
    line-height: normal !important;
    display: block !important;
    clear: none !important;
    box-sizing: border-box !important;
}

#notification-dropdown.notification-dropdown .notification-header {
    width: 100% !important;
    min-height: 56px !important;
    height: auto !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 14px 16px !important;
    box-sizing: border-box !important;
}

#notification-dropdown.notification-dropdown .divider {
    margin: 0 !important;
}

#notification-dropdown.notification-dropdown .notification-body,
#notification-dropdown.notification-dropdown #notification-list,
#notification-dropdown.notification-dropdown .notification-list {
    width: 100% !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    :root {
        --kanbada-sidebar-width: 62px;
        --kanbada-sidebar-visible: 62px;
        --kanbada-sidebar-collapsed-left: -52px;
    }

    .app-header-inner,
    .app-sidebar-inner {
        padding: 8px 6px !important;
        gap: 8px !important;
    }

    .header-actions .action-item {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 12px !important;
    }

    .header-left .mini-logo,
    .app-header .mini-logo,
    .app-sidebar .mini-logo {
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
    }

    .sidebar-toggle-btn {
        top: 10px !important;
        right: -15px !important;
        width: 30px !important;
        height: 30px !important;
    }
#notification-dropdown.notification-dropdown {
        left: calc(var(--kanbada-sidebar-width) + 6px) !important;
        width: min(360px, calc(100vw - 82px)) !important;
        min-width: min(360px, calc(100vw - 82px)) !important;
        max-width: min(360px, calc(100vw - 82px)) !important;
    }
}



/* Header do dropdown */
.notification-header {
	padding: 16px 20px !important;
	background: #f5f5f5;
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #e0e0e0;
}

#mark-all-read {
	font-size: 10px;
	color: #ffffff;
	line-height: 32px;
}

.notification-title {
	font-weight: 600;
	font-size: 16px;
	color: #333;
}

.mark-all-link {
	color: #4a90e2;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s;
}

.mark-all-link:hover {
	color: #357abd;
	text-decoration: underline;
}

/* Item de notificação */
#notification-dropdown .notification-item {
	padding: 16px 20px !important;
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	transition: background-color 0.2s;
	border-bottom: 1px solid #f0f0f0;
	position: relative;
}

#notification-dropdown .notification-item:hover {
	background-color: #f9f9f9;
}

#notification-dropdown .notification-item.unread {
	background-color: #f0f7ff;
}

#notification-dropdown .notification-item.unread:hover {
	background-color: #e5f1ff;
}

/* Ícone da notificação */
.notification-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.notification-icon i {
	font-size: 20px;
	color: #fff !important;
}

.notification-icon.green {
	background-color: #4caf50;
}

.notification-icon.blue {
	background-color: #2196f3;
}

.notification-icon.orange {
	background-color: #ff9800;
}

.notification-icon.purple {
	background-color: #9c27b0;
}

.notification-icon.grey {
	background-color: #9e9e9e;
}

/* Conteúdo da notificação */
.notification-content {
	flex: 1;
	min-width: 0;
}

.notification-content .notification-title {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	margin-bottom: 4px;
	line-height: 1.3;
}

.notification-content .notification-message {
	font-size: 13px;
	color: #666;
	margin-bottom: 4px;
	line-height: 1.4;
	word-wrap: break-word;
}

.notification-content .notification-time {
	font-size: 11px;
	color: #999;
	font-style: italic;
}

/* Indicador de não lida */
.notification-unread-indicator {
	width: 8px;
	height: 8px;
	background-color: #4a90e2;
	border-radius: 50%;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

/* Estado vazio */
.notification-empty {
	padding: 60px 20px;
	text-align: center;
	color: #999;
}

.notification-empty i {
	font-size: 64px;
	color: #ddd;
	margin-bottom: 16px;
}

.notification-empty p {
	font-size: 14px;
	margin: 0;
}

/* Estado de carregamento */
.notification-loading {
	padding: 40px 20px;
	text-align: center;
}

/* Estado de erro */
.notification-error {
	padding: 40px 20px;
	text-align: center;
	color: #f44336;
}

.notification-error i {
	font-size: 48px;
	margin-bottom: 12px;
}

.notification-error p {
	font-size: 14px;
	margin: 0;
}

/* Dark mode para notificações */
body.dark .notification-dropdown {
	background-color: #2a2a3e;
	box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

body.dark .notification-header {
	background-color: #1e1e2f;
	border-bottom-color: #333;
}

body.dark .notification-title {
	color: #e0e0e0;
}

body.dark #notification-dropdown .notification-item {
	border-bottom-color: #333;
}

body.dark #notification-dropdown .notification-item:hover {
	background-color: #333344;
}

body.dark #notification-dropdown .notification-item.unread {
	background-color: #2d3548;
}

body.dark #notification-dropdown .notification-item.unread:hover {
	background-color: #34405a;
}

body.dark .notification-content .notification-title {
	color: #e0e0e0;
}

body.dark .notification-content .notification-message {
	color: #b0b0b0;
}

body.dark .notification-content .notification-time {
	color: #888;
}

body.dark .notification-empty {
	color: #666;
}

body.dark .notification-empty i {
	color: #444;
}

/* Scrollbar para lista de notificações */
.notification-list::-webkit-scrollbar {
	width: 6px;
}

.notification-list::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.notification-list::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 3px;
}

.notification-list::-webkit-scrollbar-thumb:hover {
	background: #aaa;
}

body.dark .notification-list::-webkit-scrollbar-track {
	background: #2a2a3e;
}

body.dark .notification-list::-webkit-scrollbar-thumb {
	background: #555;
}

body.dark .notification-list::-webkit-scrollbar-thumb:hover {
	background: #666;
}

/* ===== MOBILE OPTIMIZATIONS ===== */

/* Touch target optimization */
@media (max-width: 768px) {
	.header-actions .action-item {
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
		position: relative;
		overflow: hidden;
	}

	/* Better active states for touch */
	.header-actions .action-item:active {
		transform: scale(0.95);
		transition: transform 0.1s ease;
	}

	/* Ripple effect for better touch feedback */
	.header-actions .action-item::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.1);
		transform: translate(-50%, -50%);
		transition: width 0.3s ease, height 0.3s ease;
		pointer-events: none;
	}

	.header-actions .action-item:active::after {
		width: 40px;
		height: 40px;
	}

	body.dark .header-actions .action-item::after {
		background: rgba(255, 255, 255, 0.1);
	}
}

/* Better scroll behavior for notifications */
@media (max-width: 768px) {
	#notification-dropdown.notification-dropdown {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.notification-list {
		-webkit-overflow-scrolling: touch;
	}
}

/* Prevent zoom on inputs in mobile Safari */
@media (max-width: 768px) {
	input, select, textarea {
		font-size: 16px !important;
	}
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
	.app-header {
		height: 44px;
	}

	.app-header-inner {
		padding: 0 8px;
	}

	.header-left .mini-logo {
		height: 24px;
	}

	.header-actions .action-item {
		min-width: 32px;
		min-height: 32px;
		padding: 2px 4px;
	}

	.header-actions .action-item i {
		font-size: 14px;
	}

	.mode .sun-moon {
		width: 40px;
		height: 32px;
	}

	.mode .sun-moon i {
		font-size: 14px;
	}

	.toggle-switch {
		width: 30px;
		height: 16px;
	}

	.toggle-switch .switch {
		width: 12px;
		height: 12px;
	}

	body.dark .toggle-switch .switch {
		left: 16px;
	}

	/* .main {
		padding-top: 44px;
	} */

	.icon.avatar {
		max-height: 32px;
	}

	.icon.avatar img {
		max-height: 32px;
	}

	.header-actions .action-item .initials {
		width: 20px;
		height: 20px;
		font-size: 10px;
	}
}




/* ============================================================
   CORREÇÃO FINAL — permitir scroll vertical da página
   ============================================================ */

html,
body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.has-left-sidebar {
    min-height: 100vh !important;
    overflow-y: auto !important;
}

.main {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
}


/* ============================================================
   CORREÇÃO FINAL DO DROPDOWN DE NOTIFICAÇÕES NA SIDEBAR
   Mantém o painel independente da largura da barra lateral e impede
   que ele bloqueie cliques quando estiver fechado.
   ============================================================ */

.header-actions #notification-dropdown.notification-dropdown {
    position: fixed !important;
    top: 12px !important;
    left: calc(var(--kanbada-sidebar-width) + 12px) !important;
    right: auto !important;
    bottom: auto !important;

    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;

    height: auto !important;
    min-height: 120px !important;
    max-height: calc(100vh - 24px) !important;

    display: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    pointer-events: none !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
    z-index: 3200 !important;
}

.header-actions #notification-dropdown.notification-dropdown[style*="display: block"],
.header-actions #notification-dropdown.notification-dropdown.active,
.header-actions #notification-dropdown.notification-dropdown.open {
    display: block !important;
    pointer-events: auto !important;
}

body.sidebar-collapsed .header-actions #notification-dropdown.notification-dropdown {
    left: 48px !important;
}

/* O sino continua com tamanho de botão da sidebar */
#btn-notifications.notification-item {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Os itens reais da lista de notificações ficam restritos ao dropdown */
#notification-dropdown .notification-item {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 16px 20px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

@media (max-width: 768px) {
    .header-actions #notification-dropdown.notification-dropdown {
        left: calc(var(--kanbada-sidebar-width) + 6px) !important;
        width: min(360px, calc(100vw - 82px)) !important;
        min-width: min(360px, calc(100vw - 82px)) !important;
        max-width: min(360px, calc(100vw - 82px)) !important;
    }
}



/* ===== Isolamento do logo da landing ===== */
.app-header .kb-logo-icon,
.app-sidebar .kb-logo-icon,
.app-header .kb-logo-text,
.app-sidebar .kb-logo-text{
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
}