/**
 * COMPONENTS.CSS
 * Component-level styles: glass panels, inputs, buttons, badges, tables, tabs, rows
 */

/* Glass Panel Effect */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* Glass Input Styling */
.glass-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.3s ease;
}

.glass-input:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    cursor: not-allowed;
}

.glass-input:focus {
    border-color: #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
    outline: none;
}

/* Date Input Calendar Picker Styling */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Select Dropdown with Custom Arrow */
select.glass-input {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFD700%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem top 50%;
    background-size: 0.65rem auto;
}

/* Button: Gold Gradient */
.btn-gold {
    background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
    color: #000;
    font-weight: 700;
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

/* Button: Outline Style */
.btn-outline {
    border: 1px solid #555;
    color: #aaa;
    transition: all 0.2s;
}

.btn-outline:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* Tab Button Styling */
.tab-btn {
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.tab-btn.active {
    color: #FFD700;
    border-bottom-color: #FFD700;
}

/* Status Badges */
.badge-scheduled {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.badge-ongoing {
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-completed {
    background-color: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Row Highlighting for Ongoing Groups */
.row-ongoing {
    background: rgba(34, 197, 94, 0.03);
    box-shadow: inset 2px 0 0 0 #4ade80;
}

/* Chart Container */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

/* ==========================================================================
   RESPONSIVE STYLES (Mobile & Tablet)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Responsive Typography */
    html,
    body {
        font-size: 14px;
    }

    h1,
    .text-xl,
    .text-2xl {
        font-size: 1.25rem !important;
    }

    h2,
    .text-lg {
        font-size: 1.125rem !important;
    }

    h3,
    .text-base {
        font-size: 1rem !important;
    }

    /* 2. Fix Table/List Text Breaking */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        width: 100%;
        display: block;
        overflow-x: auto;
    }

    table {
        min-width: 600px;
        /* Force table width to trigger scroll */
    }

    th,
    td {
        white-space: nowrap;
        /* Prevent text wrapping */
        padding: 0.5rem 0.5rem !important;
        /* Compact padding */
    }

    /* 3. Adjust Spacing */
    .glass-panel {
        padding: 1rem !important;
    }

    .p-6,
    .p-8 {
        padding: 1rem !important;
    }

    .gap-6 {
        gap: 1rem !important;
    }

    /* Adjust buttons and inputs */
    .btn-gold {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }

    .tab-btn {
        padding: 0.65rem 0.4rem !important;
        font-size: 0.7rem !important;
        flex: 0 0 calc(50% - 0.125rem);
        text-align: center;
        white-space: normal;
        word-break: keep-all;
        line-height: 1.2;
    }

    /* Make tab container wrap on mobile */
    .flex.border-b.border-gray-700 .flex {
        flex-wrap: wrap;
        gap: 0.25rem;
        justify-content: center;
    }

    input,
    select {
        font-size: 16px !important;
        /* Prevent iOS zoom */
    }

    /* Hide less important elements on very small screens if needed */
    .hide-on-mobile {
        display: none !important;
    }
}

/* ==========================================================================
   RESPONSIVE WRAPPER: Gantt (Desktop) vs List (Mobile)
   ========================================================================== */
@media (min-width: 769px) {
    .mobile-view {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .desktop-view {
        display: none !important;
    }

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

    /* Products Sub-Tabs - Mobile Layout */
    #mgr-content-products .flex.justify-between.items-center.mb-2 {
        flex-direction: column;
        gap: 1rem;
    }

    #mgr-content-products .bg-black\/40 {
        width: 100%;
        justify-content: center;
    }

    #mgr-content-products .bg-black\/40 button {
        flex: 1;
        padding: 0.75rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Action Buttons - Mobile */
    #mgr-content-products > div:first-child > div:last-child {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    #mgr-content-products .btn-outline,
    #mgr-content-products .btn-gold {
        width: 100%;
        padding: 0.65rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Weekly Timeline Header - Mobile */
    #products-sub-schedule .flex.justify-between {
        flex-direction: column;
        gap: 1rem;
    }

    #products-sub-schedule h3 {
        font-size: 1rem !important;
    }

    #products-sub-schedule p {
        font-size: 0.7rem !important;
    }

    /* Week Navigation Buttons */
    #products-sub-schedule .flex.items-center.gap-4 {
        width: 100%;
        gap: 0.5rem !important;
        justify-content: space-between;
    }

    #products-sub-schedule .flex.items-center.gap-4 button {
        flex: 1;
        padding: 0.5rem 0.25rem !important;
        font-size: 0.65rem !important;
        white-space: normal;
        line-height: 1.2;
    }

    #products-sub-schedule .flex.items-center.gap-4 i {
        display: none;
    }
}

/* ==========================================================================
   MONTHLY FLOW CHART POPUP STYLES
   ========================================================================== */
.popup-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.95rem;
}

.popup-detail-row:last-child {
    border-bottom: none;
}

.popup-detail-row span:first-child {
    color: #9ca3af;
    font-weight: 500;
}

.popup-detail-row span:last-child {
    color: #ffd700;
    font-weight: 600;
    text-align: right;
}