/* ============================================
   UNITY 2B3 - MOBILE RESPONSIVE STYLESHEET
   Dedicated mobile optimizations for dashboard
   ============================================ */

/* ============================================
   GLOBAL OVERFLOW FIX
   ============================================ */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.main-content {
    overflow-x: hidden;
    max-width: 100%;
}

/* ============================================
   QUOTE BANNER - GLOBAL FIX (all breakpoints)
   Force proper width regardless of component internals
   ============================================ */
[data-component="quote-banner"] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

[data-component="quote-banner"] > *,
[data-component="quote-banner"] > * > *,
[data-component="quote-banner"] > * > * > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Quote card inner elements */
.quote-card,
.quote-banner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.quote-content,
.quote-body,
.quote-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}

.quote-text,
.quote-card .quote-text,
.quote-banner .quote-text,
blockquote {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
}

/* ============================================
   TABLET BREAKPOINT (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {

    /* Dashboard Header - Stack vertically */
    .dashboard-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        width: 100%;
        max-width: 100%;
    }

    .dashboard-header-content {
        width: 100%;
        max-width: 100%;
    }

    /* Quote inside header content - ensure full width */
    .dashboard-header-content [data-component="quote-banner"],
    .dashboard-header-content .quote-card,
    .dashboard-header-content .quote-banner {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dashboard-header-right {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    /* Layout controls */
    .layout-controls {
        min-height: auto;
        flex-shrink: 0;
    }

    /* DateTime widget */
    .datetime-display {
        text-align: right;
        flex-shrink: 1;
        min-width: 0;
    }

    .datetime-display .date {
        font-size: 13px;
        white-space: nowrap;
    }

    .datetime-display .time {
        font-size: 22px;
    }

    /* Stats Grid - 2x2 on tablet */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* GridStack - Disable drag on tablet/mobile */
    .grid-stack {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        height: auto !important;
    }

    .grid-stack-item {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        top: auto !important;
        transform: none !important;
        margin-bottom: 0 !important;
    }

    .grid-stack-item-content {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Hide drag handles on mobile */
    .drag-handle {
        display: none !important;
    }

    /* Quote Banner - CRITICAL FIX */
    .quote-card,
    .quote-banner,
    [data-component="quote-banner"],
    [data-component="quote-banner"] > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .quote-card .quote-text,
    .quote-banner .quote-text,
    .quote-text {
        font-size: 16px !important;
        line-height: 1.5 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Cards - Full width */
    .draggable-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* Main content padding */
    .main-content {
        padding: 16px !important;
        margin-top: 56px !important;
        overflow-x: hidden !important;
    }

    /* ==========================================
       DASHBOARD HEADER - REORDER FOR MOBILE
       Order: 1) Welcome, 2) DateTime+Controls, 3) Quote
       ========================================== */
    .dashboard-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    /* Make header-content children participate in parent flex */
    .dashboard-header-content {
        display: contents;
    }

    /* Welcome title - Order 1 */
    .dashboard-header-content h1 {
        order: 1;
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 0;
    }

    /* Welcome subtitle - Order 2 */
    .dashboard-header-content p {
        order: 2;
        font-size: 13px;
        margin-bottom: 0;
    }

    /* DateTime + Controls - Order 3 */
    .dashboard-header-right {
        order: 3;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 12px;
        flex-wrap: nowrap;
        margin-top: 8px;
    }

    /* Quote Banner - Order 4 (last) */
    .dashboard-header-content [data-component="quote-banner"],
    .dashboard-header-content .quote-card,
    .dashboard-header-content .quote-banner {
        order: 4;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px;
    }

    /* Layout controls */
    .layout-controls {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
    }

    .layout-btn {
        width: 40px;
        height: 40px;
    }

    /* DateTime - Compact inline */
    .datetime-display {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .datetime-display .date {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .datetime-display .time {
        font-size: 20px;
        line-height: 1.2;
    }

    .datetime-display .member-since {
        font-size: 10px;
        white-space: nowrap;
    }

    /* ==========================================
       QUOTE BANNER - CRITICAL MOBILE FIX
       ========================================== */
    .quote-card,
    .quote-banner,
    [data-component="quote-banner"],
    [data-component="quote-banner"] > *,
    [data-component="quote-banner"] > * > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .quote-card,
    .quote-banner {
        padding: 16px !important;
        min-height: auto !important;
        margin-top: 12px;
    }

    .quote-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
        font-style: italic;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        text-align: center;
    }

    .quote-author {
        font-size: 13px !important;
        margin-top: 12px;
        text-align: center;
    }

    .quote-role {
        font-size: 11px !important;
        text-align: center;
    }

    /* Quote navigation arrows */
    .quote-nav,
    .quote-arrow,
    .quote-nav-btn,
    [class*="quote-nav"],
    [class*="quote-prev"],
    [class*="quote-next"] {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex-shrink: 0 !important;
    }

    /* Stats Grid - 2 columns */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Stat cards - Compact */
    .stat-card {
        padding: 14px !important;
    }

    .stat-header {
        padding-right: 0;
        margin-bottom: 6px;
    }

    .stat-title {
        font-size: 10px;
        letter-spacing: 0.3px;
    }

    .stat-value {
        font-size: 24px !important;
    }

    .stat-change {
        font-size: 11px;
    }

    /* Unity TV Card */
    .unity-tv-card {
        min-height: 300px !important;
    }

    .unity-tv-header {
        padding: 12px 16px !important;
    }

    .unity-tv-title {
        font-size: 16px !important;
    }

    .unity-tv-body {
        flex-direction: column !important;
    }

    .unity-tv-tabs {
        flex-direction: row !important;
        width: 100% !important;
        overflow-x: auto !important;
        border-left: none !important;
        border-top: 1px solid var(--border-color) !important;
    }

    .unity-tv-tabs .tv-tab {
        flex: 1 !important;
        min-width: 70px !important;
        padding: 10px 8px !important;
    }

    /* Activity Card */
    .activity-card {
        min-height: auto !important;
    }

    .activity-header {
        padding: 14px 16px !important;
    }

    .activity-title {
        font-size: 15px !important;
    }

    .activity-item {
        padding: 10px 16px !important;
    }

    .activity-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    .activity-text {
        font-size: 12px !important;
    }

    .activity-time {
        font-size: 11px !important;
    }

    /* Events Card */
    .events-card .event-item {
        padding: 12px !important;
    }

    .event-date-badge {
        width: 45px !important;
        height: 45px !important;
        font-size: 14px !important;
    }

    .event-title {
        font-size: 14px !important;
    }

    .event-time {
        font-size: 12px !important;
    }

    /* Featured Member Card */
    .featured-member-card {
        padding: 16px !important;
    }

    .featured-member-avatar {
        width: 60px !important;
        height: 60px !important;
    }

    .featured-member-name {
        font-size: 16px !important;
    }

    .featured-member-stats {
        gap: 16px !important;
    }

    .featured-stat-value {
        font-size: 18px !important;
    }

    /* Ask AI Card */
    .ask-ai-card {
        padding: 16px !important;
    }

    .ai-suggestions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .ai-suggestion-chip {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* Tables - Horizontal scroll */
    .table-section {
        padding: 12px !important;
    }

    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 500px;
    }

    .data-table th,
    .data-table td {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    /* Action buttons - Full width */
    .table-actions {
        flex-direction: column;
        width: 100%;
    }

    .action-btn {
        width: 100%;
        justify-content: center;
    }

    /* Filter select */
    .filter-select {
        width: 100%;
    }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
.stats-grid-stack > .grid-stack-item > .grid-stack-item-content {inset: 0px !important;}
}

.live_hide_mobile{display: none;}
    .live-session-banner{top:60px !important; right:6vw !important;}
     .sidebar {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    /* Main content - Tighter padding */
    .main-content {
        padding: 2.5% 7% !important;
    }

    /* Dashboard header */
    .dashboard-header {
        gap: 10px;
    }

    .dashboard-header-content h1 {
        font-size: 25px;
    }

    .dashboard-header-content p {
        font-size: 13px;
    }

    /* Layout controls + datetime row */
    .dashboard-header-right {
        gap: 8px;
    }

    .layout-btn {
        width: 36px;
        height: 36px;
    }

    .datetime-display .date {
        /*font-size: 11px;*/
    }

    .datetime-display .time {
        /*font-size: 18px;*/
    }

    .datetime-display .member-since {
        /*display: none;*/
    }

    /* Stats Grid - Still 2 columns but tighter */
    .stats-grid {
        gap: 8px !important;
    }

    .stat-card {
        padding: 12px !important;
    }

    .stat-title {
        font-size: 9px;
    }

    .stat-value {
        /*font-size: 20px !important;*/
    }

    /* Quote - More compact */
    .quote-card,
    .quote-banner {
        padding: 12px !important;
    }

    .quote-text {
        /*font-size: 13px !important;*/
        /*line-height: 1.5 !important;*/
    }

    .quote-author {
        font-size: 11px !important;
        margin-top: 8px;
    }

    .quote-role {
        font-size: 10px !important;
    }

    .quote-nav,
    .quote-arrow,
    .quote-nav-btn,
    [class*="quote-nav"],
    [class*="quote-prev"],
    [class*="quote-next"] {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    /* Cards - Tighter padding */
    .draggable-card {
        border-radius: 12px !important;
    }

    .card-header,
    .activity-header,
    .unity-tv-header {
        /*padding: 12px !important;*/
    }

    /* Unity TV */
    .unity-tv-card {
        min-height: 250px !important;
    }

    .unity-tv-tabs .tv-tab {
        padding: 8px 6px !important;
        min-width: 60px !important;
    }

    .tab-label,
    .tv-tab .tab-text {
        font-size: 9px !important;
    }

    /* Activity items - Compact */
    .activity-item {
        padding: 8px 12px !important;
        gap: 10px !important;
    }

    .activity-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    /* Events */
    .event-date-badge {
        width: 40px !important;
        height: 40px !important;
        font-size: 12px !important;
    }

    /* Featured member */
    .featured-member-avatar {
        width: 50px !important;
        height: 50px !important;
    }

    .featured-member-name {
        font-size: 14px !important;
    }

    .featured-stat-value {
        font-size: 16px !important;
    }

    .featured-stat-label {
        font-size: 10px !important;
    }

/* ============================================
   GRIDSTACK MOBILE OVERRIDES
   Force single column layout on mobile
   ============================================ */
@media (max-width: 768px) {
    /* Override GridStack inline styles */
    .grid-stack > .grid-stack-item {
        width: 100% !important;
        left: 0 !important;
        position: relative !important;
    }

    /* Ensure proper stacking */
    .grid-stack {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
    }

    .grid-stack-item-content {
        position: relative !important;
        inset: 0 !important;
        height: auto !important;
    }
}

/* ============================================
   TOUCH OPTIMIZATIONS
   ============================================ */
@media (max-width: 1024px) {
    /* Ensure minimum touch targets (44px) */
    .nav-item,
    .btn,
    button,
    .action-btn,
    .filter-btn,
    .tab,
    .tv-tab,
    [role="button"] {
        min-height: 44px;
    }

    /* Remove hover effects on touch devices */
    @media (hover: none) {
        .nav-item:hover,
        .stat-card:hover,
        .draggable-card:hover {
            transform: none;
            box-shadow: none;
        }
    }

    /* Disable text selection on interactive elements */
    .nav-item,
    .btn,
    button {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Prevent zoom on input focus (iOS) */
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .main-content {
        padding: 12px !important;
        margin-top: 50px !important;
    }

    .topheader {
        height: 50px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .stat-card {
        padding: 10px !important;
    }

    .stat-value {
        font-size: 18px !important;
    }
}

/* ============================================
   SAFE AREA INSETS (Notched phones)
   ============================================ */
@supports (padding: max(0px)) {
    .main-content {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }



    .topheader {
        /*padding-left: max(12px, env(safe-area-inset-left));*/
        /*padding-right: max(12px, env(safe-area-inset-right));*/
    }
}

/* ============================================
   UTILITY CLASSES FOR MOBILE
   ============================================ */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .full-width-mobile {
        width: 100% !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .stack-mobile {
        flex-direction: column !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }
}

.live_hide_mobile{display: contents;}