/**
 * File: public/assets/css/wti-custom.css
 * Description: WTI SuperApp custom CSS overrides on top of NexaDash template.
 *              Includes dashboard card styling, nav-header theme, header icon
 *              overrides for color_4 dark header, content background, and UI enhancements.
 * Author: Erwin Youfilandy
 * Created: 2026-02-19
 * Last Modified: 2026-02-22
 * Version: 5.0.0
 *
 * PT. Wise Teknologi Indonesia
 * Internal Use Only — All Rights Reserved
 */

/* ============================================
   Custom Color Variables
   ============================================ */
:root {
    --wti-primary: #1D69D6;
    --wti-sidebar-active-bg: rgba(29, 105, 214, 0.15);
    --wti-navheader-bg: #1F2025;
    --wti-content-bg: #D0CDC4;
    --title: #1e293b;
}

/* ============================================
   Content Body Background (#D0CDC4 warm beige)
   ============================================ */
.content-body {
    background-color: var(--wti-content-bg) !important;
}
body {
    background-color: var(--wti-content-bg) !important;
}

/* ============================================
   Nav Header Brand Logo (Dark BG color_4)
   ============================================ */
.nav-header .brand-logo .logo-abbr {
    max-height: 30px;
}
.nav-header .brand-logo .brand-title {
    max-height: 24px;
    margin-left: 0;
}
.nav-header .brand-logo .brand-title:not(.logo-color) {
    display: none;
}
.nav-header .brand-logo .logo-color {
    display: inline;
}

/* Expanded sidebar: hide icon, show only combination mark */
[data-sidebar-style="full"][data-layout="vertical"] .nav-header .brand-logo .logo-abbr {
    display: none;
}
/* Collapsed sidebar (menu-toggle): show icon, hide combination mark */
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .nav-header .brand-logo .logo-abbr {
    display: block;
}

/* ============================================
   Sidebar Toggle — Chevron Icon (replacing hamburger lines)
   ============================================ */
.nav-control {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1) !important;
}
.nav-control:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .nav-header .nav-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
.hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
}
.hamburger .line {
    display: none !important;
}
.hamburger svg {
    display: none !important;
}
.hamburger .toggle-icon {
    font-size: 22px;
    color: #fff;
    line-height: 1;
    transition: transform 0.3s ease;
}
.menu-toggle .hamburger .toggle-icon {
    transform: rotate(180deg);
}

/* ============================================
   Card Enhancements
   ============================================ */
.card {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ============================================
   Dashboard Revenue & Expense Cards
   ============================================ */
.revenue-card {
    background-color: #003F88;
    min-height: 180px;
}
.revenue-card .revenue-date span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
}
.revenue-card .revenue-date h4 {
    font-size: 24px;
    font-weight: 700;
}
.card.bg-warning .revenue-date span {
    font-size: 14px;
    font-weight: 500;
}
.card.bg-warning .revenue-date h4 {
    font-size: 24px;
    font-weight: 700;
}
.card.bg-warning {
    min-height: 180px;
}

/* ============================================
   Dashboard Deposit Stat Cards
   ============================================ */
.depostit-card .icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
.depostit-card h6 {
    font-weight: 500;
    color: #6e6e6e;
    margin-bottom: 4px;
}
.depostit-card h3 {
    font-weight: 700;
    font-size: 1.5rem;
}

/* ============================================
   Dashboard Welcome / Info Card
   ============================================ */
.rainbow-box .finance h4 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ============================================
   Dashboard Chart Headers
   ============================================ */
.heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--title);
}

/* ============================================
   Table Enhancements
   ============================================ */
.table > thead {
    border-bottom: 2px solid #dee2e6;
}
.table > thead th {
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #495057;
}

/* ============================================
   Badge Status Colors (soft variants)
   ============================================ */
.badge-soft-success {
    color: #28b765;
    background-color: rgba(40, 183, 101, 0.18);
}
.badge-soft-danger {
    color: #ed5555;
    background-color: rgba(237, 85, 85, 0.18);
}
.badge-soft-warning {
    color: #f4c238;
    background-color: rgba(244, 194, 56, 0.18);
}
.badge-soft-info {
    color: #52c6ea;
    background-color: rgba(82, 198, 234, 0.18);
}
.badge-soft-primary {
    color: var(--primary);
    background-color: var(--rgba-primary-1);
}
.badge-soft-secondary {
    color: #6c757d;
    background-color: rgba(108, 117, 125, 0.18);
}

/* ============================================
   Data Table Component
   ============================================ */
.wti-data-table .table {
    margin-bottom: 0;
}
.wti-data-table .table td,
.wti-data-table .table th {
    vertical-align: middle;
}

/* ============================================
   Form Enhancements
   ============================================ */
.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}

/* ============================================
   Global Menu Search Dropdown
   ============================================ */
.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 360px;
    overflow-y: auto;
    z-index: 9999;
}
.search-result-item {
    display: block;
    padding: 0.625rem 0.875rem;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.12s;
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:hover,
.search-result-item.active {
    background-color: #f0f4ff;
    color: var(--primary);
}
.search-result-item .result-icon {
    font-size: 20px;
    width: 32px;
    min-width: 32px;
    text-align: center;
    color: var(--primary);
    opacity: 0.7;
}
.search-result-item .result-text {
    margin-left: 0.5rem;
    min-width: 0;
}
.search-result-item .result-label {
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-item .result-parent {
    font-size: 0.6875rem;
    color: #888;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-no-results {
    padding: 1.25rem;
    text-align: center;
    color: #999;
    font-size: 0.8125rem;
}

/* ============================================
   Header Badge Indicators (Notification, Task, Chat)
   ============================================ */
#notification-badge:not(:empty),
#task-badge:not(:empty),
#chat-badge:not(:empty) {
    display: inline-block !important;
}
#notification-badge:empty,
#task-badge:empty,
#chat-badge:empty {
    display: none !important;
}

/* ============================================
   Header Profile (square avatar + chevron)
   ============================================ */
.header-profile2 .header-media .bg-primary {
    font-family: var(--font-family-base);
}
.header-profile2 .profile-chevron {
    opacity: 0.7;
    transition: opacity 0.2s;
}
.header-profile2:hover .profile-chevron {
    opacity: 1;
}

/* ============================================
   Dashboard Bar Title
   ============================================ */
.dashboard_bar {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--title);
}

/* ============================================
   Dark Header (color_4 #1F2025) — <i> Icon Color Overrides
   NexaDash built-in color_4 handles SVG icons and search area,
   but not <i> font-icon elements in nav-items.
   ============================================ */
[data-headerbg="color_4"] .header-right .notification_dropdown .nav-link i,
[data-headerbg="color_4"] .header-right .nav-item .nav-link i {
    color: #fff;
}
[data-headerbg="color_4"] .header-right .notification_dropdown .nav-link:hover i,
[data-headerbg="color_4"] .header-right .nav-item .nav-link:hover i {
    color: #FDC500;
}
[data-headerbg="color_4"] .header-right .dz-fullscreen i {
    color: #fff;
}
[data-headerbg="color_4"] .header-right .dz-fullscreen:hover i {
    color: #FDC500;
}
[data-headerbg="color_4"] .header-info2 .header-info span {
    color: #fff;
}
[data-headerbg="color_4"] .header-info2 .header-info small {
    color: #c4c7ce !important;
}

/* ============================================
   Logo Settings — Compact Grid
   ============================================ */
.logo-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.logo-card {
    transition: box-shadow .15s ease;
}
.logo-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.logo-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 1rem;
    flex-shrink: 0;
}

.logo-card .input-group-sm .form-control {
    font-size: .72rem;
}

.logo-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.logo-preview-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 991.98px) {
    .logo-settings-grid {
        grid-template-columns: 1fr;
    }
    .logo-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .logo-preview-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Authentication Pages — Authero-style
   ============================================ */
.wti-auth {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100vh;
    overflow: hidden;
}
.wti-auth-form {
    width: 50%;
    min-width: 0;
    flex-shrink: 0;
    background: #fff;
    padding: 0 24px;
}
.wti-auth-card {
    width: 100%;
    max-width: 420px;
    padding: 0 8px;
}
.wti-auth-logo {
    max-height: 38px;
    object-fit: contain;
}
.wti-auth-card .title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
}
.wti-auth-card .form-control {
    border-radius: 10px;
    padding: 10px 14px;
    border: 1.5px solid #e0e3eb;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wti-auth-card .form-control:focus {
    border-color: #4e73df;
    box-shadow: 0 0 0 3px rgba(78,115,223,0.10);
}
.wti-auth-card label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #3a3b45;
}
.wti-auth-card .btn-primary {
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
    border: none;
    transition: transform 0.15s, box-shadow 0.2s;
}
.wti-auth-card .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(78,115,223,0.35);
}

/* Right panel — branded image */
.wti-auth-panel {
    width: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../images/bg_auth.png') center/cover no-repeat,
                linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    overflow: hidden;
}
.wti-auth-panel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,52,96,0.82) 0%, rgba(22,33,62,0.88) 50%, rgba(26,26,46,0.92) 100%);
    z-index: 1;
}
.wti-auth-panel-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 48px;
    max-width: 480px;
    text-align: left;
}
.wti-auth-panel-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-bottom: 16px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.wti-auth-panel-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    color: #fff;
}
.wti-auth-panel-subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 32px;
    font-weight: 500;
}
.wti-auth-panel-features {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
}
.wti-auth-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.88);
    font-weight: 500;
    width: calc(50% - 16px);
}
.wti-auth-feature-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #36d1dc, #5b86e5);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(54,209,220,0.5);
}

/* Responsive */
@media (max-width: 991.98px) {
    .wti-auth-form { width: 100%; }
    .wti-auth-panel { display: none !important; }
}
@media (max-width: 575.98px) {
    .wti-auth-card { max-width: 100%; padding: 0; }
    .wti-auth-form { padding: 0 16px; }
}

/* Password toggle addon */
.auth-pass-inputgroup .btn-link {
    z-index: 5;
}

/* Password show/hide — Boxicons */
.show-pass .bx-show {
    display: none;
}
.show-pass.active .bx-hide {
    display: none;
}
.show-pass.active .bx-show {
    display: inline-block;
}

/* ============================================
   Sidebar Menu Icon Alignment (Boxicons)
   ============================================ */
.deznav .metismenu > li > a .menu-icon i.bx {
    font-size: 22px;
    line-height: 1;
}

/* ============================================
   Browser Fullscreen Mode — Preserve Theme
   ============================================ */
html:fullscreen,
html:-webkit-full-screen,
html:-moz-full-screen {
    background-color: var(--wti-content-bg) !important;
}
html:fullscreen::backdrop {
    background-color: var(--wti-content-bg) !important;
}

html:fullscreen [data-headerbg="color_4"] .header,
html:-webkit-full-screen [data-headerbg="color_4"] .header,
html:-moz-full-screen [data-headerbg="color_4"] .header {
    background: var(--wti-navheader-bg) !important;
}
html:fullscreen [data-nav-headerbg="color_4"] .nav-header,
html:-webkit-full-screen [data-nav-headerbg="color_4"] .nav-header,
html:-moz-full-screen [data-nav-headerbg="color_4"] .nav-header {
    background: var(--wti-navheader-bg) !important;
}
html:fullscreen [data-sidebarbg="color_3"] .deznav,
html:-webkit-full-screen [data-sidebarbg="color_3"] .deznav,
html:-moz-full-screen [data-sidebarbg="color_3"] .deznav {
    background: #003F88 !important;
}
html:fullscreen .content-body,
html:-webkit-full-screen .content-body,
html:-moz-full-screen .content-body {
    background-color: var(--wti-content-bg);
}
html:fullscreen #main-wrapper,
html:-webkit-full-screen #main-wrapper,
html:-moz-full-screen #main-wrapper {
    background-color: var(--wti-content-bg);
}
html:fullscreen body,
html:-webkit-full-screen body,
html:-moz-full-screen body {
    background-color: var(--wti-content-bg) !important;
}

/* Fullscreen icon toggle */
.dz-fullscreen #icon-minimize {
    display: none;
}
.dz-fullscreen.active #icon-full {
    display: none;
}
.dz-fullscreen.active #icon-minimize {
    display: inline-block !important;
}

/* ============================================
   Soft Button Variants
   ============================================ */
.btn-soft-primary {
    color: #405189;
    background-color: rgba(64, 81, 137, 0.1);
    border-color: transparent;
}
.btn-soft-primary:hover, .btn-soft-primary:focus {
    color: #fff;
    background-color: #405189;
    border-color: #405189;
}
.btn-soft-danger {
    color: #f06548;
    background-color: rgba(240, 101, 72, 0.1);
    border-color: transparent;
}
.btn-soft-danger:hover, .btn-soft-danger:focus {
    color: #fff;
    background-color: #f06548;
    border-color: #f06548;
}
.btn-soft-info {
    color: #299cdb;
    background-color: rgba(41, 156, 219, 0.1);
    border-color: transparent;
}
.btn-soft-info:hover, .btn-soft-info:focus {
    color: #fff;
    background-color: #299cdb;
    border-color: #299cdb;
}
.btn-soft-warning {
    color: #f7b84b;
    background-color: rgba(247, 184, 75, 0.1);
    border-color: transparent;
}
.btn-soft-warning:hover, .btn-soft-warning:focus {
    color: #fff;
    background-color: #f7b84b;
    border-color: #f7b84b;
}
.btn-soft-success {
    color: #0ab39c;
    background-color: rgba(10, 179, 156, 0.1);
    border-color: transparent;
}
.btn-soft-success:hover, .btn-soft-success:focus {
    color: #fff;
    background-color: #0ab39c;
    border-color: #0ab39c;
}
.btn-soft-secondary {
    color: #6c757d;
    background-color: rgba(108, 117, 125, 0.1);
    border-color: transparent;
}
.btn-soft-secondary:hover, .btn-soft-secondary:focus {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* ============================================
   Collaboration Module - Chat
   ============================================ */
.chat-container {
    height: calc(100vh - 200px);
    min-height: 500px;
}
.chat-sidebar {
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid var(--bs-border-color);
}
.chat-main {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}
.chat-input-area {
    border-top: 1px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
    background: var(--bs-body-bg);
}
.chat-input-area textarea {
    resize: none;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}
.channel-item {
    cursor: pointer;
    transition: background-color 0.15s;
    border-left: 3px solid transparent;
}
.channel-item:hover {
    background-color: var(--bs-light);
}
.channel-item.active {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border-left-color: var(--bs-primary);
}
.avatar-sm {
    width: 36px;
    height: 36px;
}
.avatar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
    font-size: 0.875rem;
    color: #fff;
}
.message-content.deleted-message {
    color: var(--bs-secondary);
    font-style: italic;
}
.chat-thread-panel {
    height: 100%;
    overflow-y: auto;
    border-left: 1px solid var(--bs-border-color);
}
.unread-badge {
    font-size: 0.65rem;
    min-width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   Collaboration Module - Activity Stream
   ============================================ */
.activity-timeline {
    position: relative;
    padding-left: 2rem;
}
.activity-timeline::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--bs-border-color);
}
.activity-timeline-item {
    position: relative;
    padding-bottom: 1.25rem;
    padding-left: 1rem;
}
.activity-timeline-icon {
    position: absolute;
    left: -2rem;
    top: 0.125rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #fff;
    z-index: 1;
}
.activity-widget .list-group-item {
    border: none;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}
.activity-widget .list-group-item:last-child {
    border-bottom: none;
}

/* ============================================
   Collaboration Module - Knowledge Base
   ============================================ */
.kb-article-content {
    font-size: 0.9375rem;
    line-height: 1.75;
}
.kb-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
}
.kb-article-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}
.kb-article-content table th,
.kb-article-content table td {
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
}
.kb-version-list .list-group-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}
.kb-version-list .list-group-item.active {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* ============================================
   Collaboration Module - Announcements
   ============================================ */
.announcement-card {
    border-left: 4px solid var(--bs-secondary);
    transition: box-shadow 0.15s;
}
.announcement-card:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
}
.announcement-card.priority-high {
    border-left-color: var(--bs-danger);
}
.announcement-card.priority-normal {
    border-left-color: var(--bs-info);
}
.announcement-card.priority-low {
    border-left-color: var(--bs-secondary);
}

/* ============================================
   Collaboration Module - Meeting Notes
   Modern IT-Startup Design System
   ============================================ */

/* --- Design Tokens --- */
.meeting-show, .meeting-form, .meeting-index {
    --mn-primary: #1f58c7;
    --mn-primary-light: #4f8cf7;
    --mn-primary-bg: #eff4ff;
    --mn-gradient: linear-gradient(135deg, #1f58c7 0%, #4f8cf7 100%);
    --mn-radius: .5rem;
    --mn-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --mn-shadow-hover: 0 4px 12px rgba(31,88,199,.12);
    --mn-info: #3b82f6;
    --mn-participants: #6366f1;
    --mn-agenda: #0891b2;
    --mn-decisions: #059669;
    --mn-actions: #d97706;
    --mn-risks: #dc2626;
    --mn-closing: #7c3aed;
    --mn-attachments: #64748b;
}

/* --- Card Base --- */
.meeting-show .card,
.meeting-form .card,
.meeting-index .card {
    height: auto !important;
    border: none;
    border-radius: var(--mn-radius);
    box-shadow: var(--mn-shadow);
    transition: box-shadow .2s ease;
    margin-bottom: .75rem;
}
.meeting-show .card:hover,
.meeting-form .card:hover {
    box-shadow: var(--mn-shadow-hover);
}

/* --- Section Card Headers with left-accent --- */
.meeting-show .card-header,
.meeting-form .card-header {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: .5rem .875rem;
    font-weight: 600;
}
.meeting-show .card-body { padding: .625rem .875rem; }
.meeting-form .card-body { padding: .5rem .875rem; }
.meeting-show .card-footer,
.meeting-form .card-footer { padding: .5rem .875rem; background: #fafbfc; border-top: 1px solid rgba(0,0,0,.06); }

/* Section-specific accent borders */
.mn-section-info    { border-left: 3px solid var(--mn-info); }
.mn-section-participants { border-left: 3px solid var(--mn-participants); }
.mn-section-agenda  { border-left: 3px solid var(--mn-agenda); }
.mn-section-decisions { border-left: 3px solid var(--mn-decisions); }
.mn-section-actions { border-left: 3px solid var(--mn-actions); }
.mn-section-risks   { border-left: 3px solid var(--mn-risks); }
.mn-section-closing { border-left: 3px solid var(--mn-closing); }
.mn-section-attachments { border-left: 3px solid var(--mn-attachments); }

/* --- Section Header Icon Circles --- */
.mn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 14px;
    margin-right: .5rem;
    flex-shrink: 0;
    line-height: 1;
}
.mn-icon i {
    font-size: 14px;
    line-height: 1;
}
.mn-icon-info       { background: rgba(59,130,246,.1); color: var(--mn-info); }
.mn-icon-participants { background: rgba(99,102,241,.1); color: var(--mn-participants); }
.mn-icon-agenda     { background: rgba(8,145,178,.1); color: var(--mn-agenda); }
.mn-icon-decisions  { background: rgba(5,150,105,.1); color: var(--mn-decisions); }
.mn-icon-actions    { background: rgba(217,119,6,.1); color: var(--mn-actions); }
.mn-icon-risks      { background: rgba(220,38,38,.1); color: var(--mn-risks); }
.mn-icon-closing    { background: rgba(124,58,237,.1); color: var(--mn-closing); }
.mn-icon-attachments { background: rgba(100,116,139,.1); color: var(--mn-attachments); }

/* --- Section Title --- */
.mn-section-title {
    display: flex;
    align-items: center;
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: 0;
    color: #1e293b;
    letter-spacing: .01em;
}
.mn-section-title .badge { margin-left: .5rem; font-weight: 500; }

/* --- Document Header (show page) --- */
.mn-doc-header {
    background: var(--mn-gradient) !important;
    color: #fff;
    border: none;
    border-radius: var(--mn-radius) var(--mn-radius) 0 0;
    padding: .75rem 1rem;
}
.mn-doc-header .btn { border-color: rgba(255,255,255,.3); color: #fff; }
.mn-doc-header .btn:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); }
.mn-doc-header .badge { font-size: .7rem; font-weight: 500; }
.mn-doc-number { font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; font-size: .7rem; opacity: .85; }
.mn-doc-title { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }

/* --- Table Styling --- */
.meeting-show .table { font-size: .8125rem; margin-bottom: 0; }
.meeting-show .table th, .meeting-show .table td { padding: .4rem .625rem; vertical-align: middle; }
.meeting-show .table thead th {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}
.meeting-show .table tbody tr { transition: background .15s ease; }
.meeting-show .table-hover tbody tr:hover { background: #f1f5f9; }

/* --- Badge Improvements --- */
.meeting-show .badge,
.meeting-index .badge,
.meeting-form .badge {
    font-size: .675rem;
    font-weight: 500;
    letter-spacing: .02em;
    border-radius: 4px;
    padding: .25em .5em;
}

/* --- Accordion (Agenda) --- */
.meeting-show .accordion-button {
    padding: .5rem .75rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #1e293b;
    background: #fff;
}
.meeting-show .accordion-button:not(.collapsed) {
    background: rgba(8,145,178,.04);
    color: var(--mn-agenda);
    box-shadow: none;
}
.meeting-show .accordion-body { padding: .625rem .875rem; }
.meeting-show .accordion-item { border-color: #e2e8f0; }

/* --- Form Styling (create/edit) --- */
.meeting-form h6.card-title { font-size: .8125rem; margin-bottom: 0; }
.meeting-form .form-label { font-size: .8125rem; margin-bottom: .2rem; font-weight: 500; color: #475569; }
.meeting-form .row.mb-3 { margin-bottom: .5rem !important; }
.meeting-form .row.g-2 { --bs-gutter-y: .35rem; }
.meeting-form .form-control:focus,
.meeting-form .form-select:focus {
    border-color: var(--mn-primary-light);
    box-shadow: 0 0 0 3px rgba(79,140,247,.15);
}

/* --- Action Buttons (btn-xs) --- */
.meeting-show .btn-xs,
.meeting-form .btn-xs,
.meeting-index .btn-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    padding: .25rem .5rem;
    border-radius: 4px;
    line-height: 1;
    width: auto !important;
    height: auto !important;
    min-width: 28px;
    min-height: 28px;
    gap: .25rem;
    overflow: visible !important;
    white-space: nowrap;
}
.meeting-show .btn-xs i,
.meeting-form .btn-xs i,
.meeting-index .btn-xs i {
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Quick-add bar --- */
.mn-quick-add { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: var(--mn-radius); }
.mn-quick-add .btn { font-weight: 500; }

/* --- Index Page --- */
.meeting-index .card { border-radius: var(--mn-radius); }
.meeting-index .table thead th {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}
.meeting-index .table { font-size: .8125rem; }
.meeting-index .table td { vertical-align: middle; }
.meeting-index .table-hover tbody tr:hover { background: #f1f5f9; }
.mn-title-link { color: #1e293b; font-weight: 600; text-decoration: none; transition: color .15s; }
.mn-title-link:hover { color: var(--mn-primary); }

/* --- Rich Content --- */
.rich-content { line-height: 1.6; word-wrap: break-word; }
.rich-content p { margin-bottom: .25rem; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content ul, .rich-content ol { margin-bottom: .25rem; padding-left: 1.25rem; }
.rich-content table { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.rich-content table th, .rich-content table td { padding: .25rem .5rem; border: 1px solid var(--bs-border-color); font-size: .8125rem; }
.rich-content img { max-width: 100%; height: auto; }
.rich-content blockquote { border-left: 3px solid var(--mn-primary); padding-left: .75rem; margin: .5rem 0; color: #6c757d; }

/* --- Misc --- */
.meeting-show .list-group-item { padding: .4rem .875rem; font-size: .8125rem; border-color: #f1f5f9; }
.meeting-show dl.row { margin-bottom: 0; }
.meeting-show dl.row dt, .meeting-show dl.row dd { font-size: .8125rem; padding-bottom: .15rem; }
.meeting-show h6 { font-size: .8125rem; }

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 767.98px) {
    .chat-container { min-height: 300px; height: calc(100vh - 120px); }
    .search-results-dropdown { max-height: 240px; }
    .revenue-card, .card.bg-warning.text-white { min-height: 140px; }
    .chat-sidebar { width: 100%; }
}
@media (max-width: 575.98px) {
    .chat-messages { padding: 0.75rem; }
    .chat-input-area { padding: 0.5rem; }
}

/* ============================================
   Print Styles
   ============================================ */
/* ============================================
   User Detail Page
   ============================================ */
.user-detail-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1rem;
    align-items: start;
}
.user-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.user-detail-sidebar > .card {
    margin-bottom: 0 !important;
}
.user-detail-main {
    height: 100% !important;
    margin-bottom: 0 !important;
}
@media (max-width: 991.98px) {
    .user-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   User Dashboard
   ============================================ */

/* --- Shared soft-badge colors --- */
.bg-soft-primary   { background-color: rgba(78, 115, 223, 0.12) !important; }
.bg-soft-info      { background-color: rgba(54, 185, 204, 0.12) !important; }
.bg-soft-success   { background-color: rgba(28, 200, 138, 0.12) !important; }
.bg-soft-warning   { background-color: rgba(246, 194, 62, 0.14) !important; }
.bg-soft-danger    { background-color: rgba(231, 74, 59, 0.12) !important; }
.bg-soft-secondary { background-color: rgba(133, 135, 150, 0.12) !important; }
.btn-xs            { padding: 0.2rem 0.65rem; font-size: 0.72rem; border-radius: 4px; }

/* --- Profile Card --- */
.ud-profile-card { overflow: visible; border-radius: 12px; }
.ud-profile-banner {
    height: 48px;
    background: linear-gradient(135deg, #7f56da 0%, #b47cff 50%, #56d4da 100%);
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}
.ud-profile-pattern {
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.ud-profile-avatar-wrap {
    width: 50px; height: 50px;
    margin-top: -25px;
    position: relative; z-index: 2;
}
.ud-profile-avatar-img {
    width: 50px; height: 50px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.ud-profile-avatar-initials {
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #7f56da, #b47cff);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.ud-online-dot {
    position: absolute; bottom: 2px; right: 2px;
    width: 10px; height: 10px;
    background: #1cc88a; border: 2px solid #fff;
    border-radius: 50%;
}
.ud-role-badge {
    font-size: 0.62rem; font-weight: 600;
    padding: 2px 7px; border-radius: 20px;
    letter-spacing: 0.02em;
}
.ud-role-primary   { background: rgba(78,115,223,0.12); color: #4e73df; }
.ud-role-info      { background: rgba(54,185,204,0.12); color: #258391; }
.ud-role-success   { background: rgba(28,200,138,0.12); color: #13855c; }
.ud-role-warning   { background: rgba(246,194,62,0.14); color: #9e7c0a; }
.ud-role-danger    { background: rgba(231,74,59,0.12); color: #be2617; }
.ud-role-secondary { background: rgba(133,135,150,0.12); color: #60616f; }

.ud-profile-info { text-align: left; }
.ud-info-row {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.ud-info-row:last-child { border-bottom: none; }
.ud-info-icon {
    width: 22px; height: 22px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; flex-shrink: 0;
}
.ud-info-text { display: flex; flex-direction: column; min-width: 0; }
.ud-info-label { font-size: 0.58rem; color: #858796; line-height: 1; text-transform: uppercase; letter-spacing: 0.03em; }
.ud-info-value { font-size: 0.7rem; font-weight: 600; color: #3a3b45; line-height: 1.15; }
.ud-btn-profile {
    background: linear-gradient(135deg, #7f56da, #b47cff);
    border: none; color: #fff; font-weight: 600; font-size: 0.7rem;
    border-radius: 6px; padding: 4px 0;
    transition: all 0.2s ease;
}
.ud-btn-profile:hover { box-shadow: 0 4px 12px rgba(127,86,218,0.3); color: #fff; transform: translateY(-1px); }

/* --- Card Headers --- */
.ud-card-header {
    background: linear-gradient(135deg, #4e73df, #224abe);
    padding: 6px 12px;
    border-radius: 12px 12px 0 0 !important;
}
.ud-card-header-alt {
    background: #fff;
    padding: 8px 12px 6px;
    border-radius: 12px 12px 0 0 !important;
}

/* --- Mini Calendar --- */
#dashboard-mini-calendar { font-size: 0.7rem; }
#dashboard-mini-calendar .fc-toolbar { margin-bottom: 0 !important; }
#dashboard-mini-calendar .fc-toolbar-title { font-size: 0.78rem !important; font-weight: 700; color: #3a3b45; }
#dashboard-mini-calendar .fc-button {
    padding: 0.1rem 0.35rem !important; font-size: 0.62rem !important;
    background: #f0f2f8 !important; border: none !important; color: #4e73df !important;
    border-radius: 5px !important; font-weight: 600;
}
#dashboard-mini-calendar .fc-button:hover { background: #e2e6f0 !important; }
#dashboard-mini-calendar .fc-button-active { background: #4e73df !important; color: #fff !important; }
#dashboard-mini-calendar .fc-daygrid-day { min-height: unset !important; height: auto !important; }
#dashboard-mini-calendar .fc-daygrid-day-frame { min-height: 1.5rem !important; padding: 1px !important; }
#dashboard-mini-calendar .fc-daygrid-day-number { font-size: 0.68rem; padding: 1px 3px; }
#dashboard-mini-calendar .fc-col-header-cell-cushion {
    font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; color: #858796;
    letter-spacing: 0.04em; padding: 1px 0;
}
#dashboard-mini-calendar .fc-bg-event { opacity: 0 !important; }
#dashboard-mini-calendar .fc-scrollgrid { border: none !important; }
#dashboard-mini-calendar td, #dashboard-mini-calendar th { border-color: rgba(0,0,0,0.04) !important; }
#dashboard-mini-calendar .fc-scroller { overflow: hidden !important; }
.mini-cal-dot {
    position: absolute; bottom: 2px; left: 50%;
    transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    z-index: 3; box-shadow: 0 0 0 1px #fff;
}
#dashboard-mini-calendar .fc-day-today {
    background: rgba(78,115,223,0.04) !important;
}
#dashboard-mini-calendar .fc-day-today .fc-daygrid-day-number {
    background: linear-gradient(135deg, #4e73df, #224abe);
    color: #fff; border-radius: 50%;
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
}
#dashboard-mini-calendar .fc-daygrid-day:hover {
    background: rgba(78,115,223,0.06);
}

/* --- Upcoming Events --- */
.ud-events-list { overflow-y: auto; max-height: 300px; }
.ud-event-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    text-decoration: none; color: inherit;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    position: relative;
    transition: background 0.15s;
}
.ud-event-item:last-child { border-bottom: none; }
.ud-event-item:hover { background: rgba(78,115,223,0.03); color: inherit; }
.ud-event-indicator {
    width: 3px; border-radius: 3px;
    align-self: stretch; flex-shrink: 0;
}
.ud-event-icon {
    width: 30px; height: 30px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.ud-event-body { flex: 1; min-width: 0; }
.ud-event-title {
    display: block; font-size: 0.75rem; font-weight: 600;
    color: #3a3b45; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.ud-event-meta { font-size: 0.65rem; color: #858796; display: flex; align-items: center; gap: 3px; }
.ud-event-badge {
    font-size: 0.58rem; font-weight: 600;
    padding: 2px 7px; border-radius: 20px;
    flex-shrink: 0; white-space: nowrap;
}

/* --- Announcements --- */
.ud-announce-list { max-height: 400px; overflow-y: auto; }
.ud-announce-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    text-decoration: none; color: inherit;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.15s;
}
.ud-announce-item:last-child { border-bottom: none; }
.ud-announce-item:hover { background: rgba(78,115,223,0.03); color: inherit; }
.ud-announce-item.ud-unread { background: rgba(78,115,223,0.03); }
.ud-announce-icon {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0; margin-top: 2px;
}
.ud-announce-body { flex: 1; min-width: 0; }
.ud-announce-title-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.ud-announce-title {
    font-size: 0.8rem; font-weight: 600; color: #3a3b45;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.ud-new-badge {
    font-size: 0.58rem; font-weight: 700;
    background: linear-gradient(135deg, #e74a3b, #ff6b6b);
    color: #fff; padding: 1px 7px; border-radius: 20px;
    flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.05em;
}
.ud-announce-date { font-size: 0.68rem; color: #858796; display: flex; align-items: center; }

/* --- Projects & Tasks --- */
.ud-project-list { }
.ud-project-item {
    display: flex; gap: 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.ud-project-item:last-child { border-bottom: none; }
.ud-project-accent { width: 4px; flex-shrink: 0; border-radius: 0; }
.ud-project-content { flex: 1; padding: 10px 14px; }
.ud-project-title {
    display: block; font-size: 0.8rem; font-weight: 600; color: #3a3b45;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ud-project-code { font-size: 0.66rem; color: #858796; }
.ud-status-badge {
    font-size: 0.6rem; font-weight: 600;
    padding: 2px 8px; border-radius: 20px;
    flex-shrink: 0; white-space: nowrap;
}
.ud-status-success   { background: rgba(28,200,138,0.12); color: #13855c; }
.ud-status-info      { background: rgba(54,185,204,0.12); color: #258391; }
.ud-status-warning   { background: rgba(246,194,62,0.14); color: #9e7c0a; }
.ud-status-primary   { background: rgba(78,115,223,0.12); color: #224abe; }
.ud-status-secondary { background: rgba(133,135,150,0.12); color: #60616f; }
.ud-status-danger    { background: rgba(231,74,59,0.12); color: #be2617; }
.ud-progress { height: 5px; border-radius: 5px; background: #f0f2f8; }
.ud-progress .progress-bar { border-radius: 5px; }
.ud-progress-text { font-size: 0.66rem; font-weight: 700; color: #4e73df; white-space: nowrap; }

.ud-tasks-header {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 14px 4px;
    font-size: 0.72rem; font-weight: 700; color: #858796;
    text-transform: uppercase; letter-spacing: 0.04em;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.ud-task-list { }
.ud-task-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}
.ud-task-item:last-child { border-bottom: none; }
.ud-task-item.ud-task-overdue { background: rgba(231,74,59,0.03); }
.ud-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ud-task-body { flex: 1; min-width: 0; }
.ud-task-name {
    display: block; font-size: 0.78rem; font-weight: 600; color: #3a3b45;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ud-task-project { font-size: 0.66rem; color: #858796; }
.ud-task-due { font-size: 0.68rem; color: #858796; flex-shrink: 0; display: flex; align-items: center; white-space: nowrap; }
.ud-task-due.ud-overdue-text { color: #e74a3b; font-weight: 700; }

/* --- Shortcuts --- */
.ud-shortcut-grid { }
.ud-shortcut-card {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; text-decoration: none;
    padding: 16px 10px; border-radius: 12px;
    color: #fff; min-height: 100px;
    transition: all 0.25s ease;
    position: relative; overflow: hidden;
}
.ud-shortcut-card::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.06' fill-rule='evenodd'%3E%3Cpath d='M20 20.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM0 20.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM40 20.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM20 .5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM20 40.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z'/%3E%3C/g%3E%3C/svg%3E");
}
.ud-shortcut-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    color: #fff;
}
.ud-shortcut-icon-ring {
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 8px;
    position: relative; z-index: 1;
}
.ud-shortcut-label {
    font-size: 0.72rem; font-weight: 600;
    line-height: 1.3; position: relative; z-index: 1;
}

/* --- Empty state --- */
.ud-empty-icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: #f0f2f8;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #b0b3c5;
}

/* --- Responsive --- */
@media (max-width: 1199.98px) {
    .ud-events-list, .ud-announce-list { max-height: 280px; }
}
@media (max-width: 767.98px) {
    .ud-profile-banner { height: 44px; }
    .ud-profile-avatar-wrap { width: 44px; height: 44px; margin-top: -22px; }
    .ud-profile-avatar-img,
    .ud-profile-avatar-initials { width: 44px !important; height: 44px !important; font-size: 16px !important; }
    .ud-shortcut-card { min-height: 80px; padding: 12px 8px; }
    .ud-shortcut-icon-ring { width: 34px; height: 34px; font-size: 17px; }
}

@media print {
    .deznav,
    .nav-header,
    .header,
    .footer {
        display: none !important;
    }
    .content-body {
        margin-left: 0 !important;
    }
    .content-body .container-fluid {
        padding: 0 !important;
    }
}