* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--gradient, linear-gradient(135deg, #d3d3d3 0%, #a9a9a9 100%));
    min-height: 100vh;
    padding: 20px;
}

/* Outer container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* White card */
.login-card {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    box-sizing: border-box;
}

.login-card h1 {
    color: #333;
    margin-bottom: 10px;
}

.login-card p {
    color: #666;
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 25px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--gradient-start, #667eea);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

textarea {
    min-height: 100px;
    resize: vertical;
}

/* Investment Fields */
.investment-fields-container {
    margin-bottom: 25px;
}

.investment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 15px;
}

.investment-grid .form-group {
    margin-bottom: 0;
}

.investment-grid label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 11px;
    cursor: help;
    font-style: normal;
}

.investment-calculations {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
}

.calc-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calc-label {
    color: #6b7280;
    font-weight: 500;
}

.calc-value {
    color: #1e293b;
    font-weight: 600;
}

/* Mobile responsiveness for investment fields */
@media (max-width: 768px) {
    .investment-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .investment-grid label {
        font-size: 14px;
    }

    .investment-calculations {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .investment-grid {
        grid-template-columns: 1fr;
    }
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-primary {
    background: var(--gradient-start, #667eea);
    color: white;
}

.btn-primary:hover {
    background: var(--gradient-end, #764ba2);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-success:hover {
    background: #218838;
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.error-message {
    color: #dc3545;
    margin-top: 10px;
    display: none;
}

.error-message.show {
    display: block;
}

.success-message {
    color: #155724;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.5;
    display: none;
}

.success-message.show {
    display: block;
}

.error-message {
    color: #721c24;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.5;
}

/* Dashboard */
.dashboard {
    background: white;
    border-radius: 10px;
    padding: 30px;
    margin-top: 20px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.header-left img {
    flex-shrink: 0;
}

.header h1 {
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.user-info {
    text-align: right;
    color: #666;
    flex-shrink: 0;
}

.user-info-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-photo-wrapper {
    text-align: center;
    flex-shrink: 0;
}

.user-photo-relative {
    position: relative;
    display: inline-block;
}

.user-photo-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f0;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
}

.user-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: white;
    font-size: 32px;
    font-weight: bold;
}

.edit-photo-link {
    font-size: 11px;
    color: #666;
    text-decoration: none;
    display: inline-block;
    margin-top: 5px;
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-actions {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.stat-card h3 {
    font-size: 32px;
    margin-bottom: 5px;
}

.stat-card p {
    font-size: 14px;
    opacity: 0.9;
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    min-width: 200px;
}

.suggestions-list {
    list-style: none;
}

.suggestion-item {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.suggestion-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.suggestion-item.unread {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
}

.suggestion-item.accepted {
    background: #f0fdf4;
    border-left: 4px solid #22c55e;
}

.suggestion-item.rejected {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
}

.suggestion-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 10px;
}

.suggestion-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.suggestion-meta {
    color: #666;
    font-size: 14px;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.badge-pending {
    background: #fef3c7;
    color: #92400e;
}

.badge-accepted {
    background: #d1fae5;
    color: #065f46;
}

.badge-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.badge-review {
    background: #dbeafe;
    color: #1e40af;
}

.unread-badge {
    background: #4b5563;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
}

.flag-badge {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #dc2626;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 4px;
}

.suggestion-description {
    color: #555;
    margin-top: 10px;
    line-height: 1.5;
}

.suggestion-savings {
    color: #16a34a;
    font-weight: 600;
    margin-top: 10px;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    overflow-y: auto;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    background: white;
    border-radius: 10px;
    padding: 30px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

.modal-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 20px;
    padding-right: 50px;
}

.modal-header h2 {
    color: #333;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f5f5f5;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    font-weight: 300;
}

.close-btn:hover {
    background: #e0e0e0;
    color: #333;
    transform: rotate(90deg);
}

.close-btn:active {
    background: #d0d0d0;
    transform: rotate(90deg) scale(0.95);
}

.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f5f5f5;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    font-weight: 300;
}

.close-button:hover {
    background: #e0e0e0;
    color: #333;
    transform: rotate(90deg);
}

.close-button:active {
    background: #d0d0d0;
    transform: rotate(90deg) scale(0.95);
}

.detail-section {
    margin-bottom: 20px;
}

.detail-section h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 16px;
}

.detail-section p {
    color: #555;
    line-height: 1.6;
}

.comments-list {
    list-style: none;
    margin-top: 20px;
}

.comment-item {
    background: #f9fafb;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.comment-author {
    font-weight: 600;
    color: #333;
}

.comment-date {
    color: #999;
}

.comment-text {
    color: #555;
    line-height: 1.5;
}

.activity-list {
    list-style: none;
    margin-top: 20px;
}

.activity-item {
    border-left: 3px solid #667eea;
    padding-left: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.activity-item:last-child {
    border-left-color: transparent;
}

.activity-time {
    color: #999;
    font-size: 12px;
}

.activity-description {
    color: #333;
    margin-top: 5px;
}

.admin-controls {
    background: #f9fafb;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
}

.tab-btn {
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    color: #666;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s;
}

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

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}
#taskCommentsTab.active {
    display: flex;
    flex-direction: column;
    max-height: 500px;
}

/* Admin Panel Text Styling */
.tab-content h3 {
    color: #333;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
    letter-spacing: -0.3px;
}

.tab-content p {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.tab-content small {
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    display: block;
    margin-top: 6px;
}

.tab-content label {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.tab-content label span {
    font-weight: 500;
    color: #444;
}

.tab-content hr {
    margin: 30px 0;
    border: none;
    border-top: 2px solid #e9ecef;
}

/* Draggable departments */
.department-item {
    cursor: move;
    transition: background 0.2s;
}

.department-item.dragging {
    opacity: 0.5;
}

.department-item.drag-over {
    border-top: 3px solid #667eea;
}

.department-name {
    display: inline-block;
    min-width: 200px;
}

.department-name.editing input {
    border: 1px solid #667eea;
    padding: 4px 8px;
    font-size: 14px;
}

/* Force scrollbar to always be visible on modal content */
.modal-content::-webkit-scrollbar {
    width: 12px;
    display: block;
}

.modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* For Firefox */
.modal-content {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Responsive */
@media (max-width: 900px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-left {
        width: 100%;
    }

    .user-info {
        width: 100%;
        text-align: left;
    }
}

/* Mobile: reduce padding so the card can never exceed the viewport */
@media (max-width: 768px) {
    .container {
        padding: 16px;
    }

    .login-card {
        padding: 24px;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .controls {
        flex-direction: column;
        gap: 8px;
    }

    /* Make all control elements full width on mobile */
    .controls > * {
        width: 100% !important;
        min-width: auto !important;
        flex: none !important;
    }

    /* Buttons in controls should be full width */
    .controls .btn {
        width: 100%;
        padding: 12px;
        font-size: 14px;
        height: auto !important;
    }

    /* Search box full width */
    .controls .search-box {
        width: 100%;
        min-width: auto;
    }

    /* Selects full width */
    .controls select {
        width: 100%;
        padding: 10px;
        font-size: 14px;
    }

    /* Labels and checkboxes centered */
    .controls label {
        width: 100%;
        justify-content: flex-start;
    }

    /* Admin control buttons should stack */
    .controls span {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .modal-content {
        padding: 20px;
        max-height: 95vh;
    }

    .header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        width: 100%;
    }

    .header-left {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .header-left img {
        display: block;
        max-height: 60px !important;
        max-width: 100%;
        height: auto;
        margin: 0 !important;
    }

    .header h1 {
        font-size: 18px;
        width: 100%;
        text-align: center;
        word-break: break-word;
        overflow-wrap: break-word;
        margin: 0;
    }

    .user-info {
        width: 100%;
        min-width: 0;
    }

    /* THIS is the key fix: force a true column layout, not a wrapped row */
    .user-info > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        text-align: center;
    }

    /* The block that contains name/department/buttons (2nd child inside the flex) */
    .user-info > div > div:last-child {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .user-info p,
    .user-info strong {
        overflow-wrap: anywhere;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* Button row: stack buttons nicely and stop overflow */
    .user-info div[style*="padding-top: 10px"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }

    .user-info div[style*="padding-top: 10px"] button {
        width: 100%;
        max-width: 100%;
    }

    .user-info button {
        font-size: 12px;
        padding: 6px 10px;
    }

    /* Dashboard padding adjustments for mobile */
    .dashboard {
        padding: 15px;
    }

    /* Suggestion items mobile adjustments */
    .suggestion-item {
        padding: 15px;
    }

    .suggestion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .suggestion-title {
        font-size: 16px;
    }

    /* Badge adjustments */
    .badge {
        font-size: 11px;
        padding: 3px 6px;
    }
}

/* Extra small devices (down to 320px) */
@media (max-width: 480px) {
    body {
        padding: 0px;
    }

    .dashboard {
        padding: 12px;
        margin-top: 8px;
    }

    .header {
        margin-bottom: 15px;
        gap: 12px;
    }

    .header h1 {
        font-size: 16px;
    }

    .header-left img {
        max-height: 60px !important;
    }

    .btn {
        font-size: 13px;
        padding: 10px 16px;
    }

    .modal-content {
        padding: 15px;
    }

    .user-info-container {
        gap: 8px;
    }

    .user-photo-container {
        width: 50px;
        height: 50px;
    }

    .user-photo-placeholder {
        font-size: 20px;
    }

    .edit-photo-link {
        font-size: 10px;
        margin-top: 3px;
    }

    .user-details p {
        font-size: 13px;
        margin: 2px 0;
    }

    .user-actions {
        gap: 6px;
        padding-top: 6px;
    }

    .btn-sm {
        font-size: 11px;
        padding: 6px 10px;
    }

    .header-left {
        justify-content: center;
    }

    /* Email settings modal mobile adjustments */
    #userEmailSettingsModal .modal-content {
        max-width: 100%;
        margin: 10px;
        padding: 0;
    }

    #userEmailSettingsModal .modal-header {
        padding: 12px 15px;
    }

    #userEmailSettingsModal .modal-header h2 {
        font-size: 18px;
    }

    #userEmailSettingsModal .modal-body {
        padding: 15px !important;
    }

    #userEmailSettingsModal #emailStatusSection {
        padding: 12px !important;
        margin-bottom: 15px !important;
    }

    #userEmailSettingsModal #emailStatusSection h3 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    #userEmailSettingsModal #emailStatusSection > div {
        gap: 8px !important;
        margin-bottom: 6px !important;
    }

    #userEmailSettingsModal #emailStatusSection strong {
        min-width: 70px !important;
        font-size: 13px;
    }

    #userEmailSettingsModal #emailStatusSection span {
        font-size: 13px;
    }

    #userEmailSettingsModal h3 {
        font-size: 14px !important;
    }

    #userEmailSettingsModal input[type="email"] {
        font-size: 14px !important;
    }

    #userEmailSettingsModal .btn {
        font-size: 14px;
        padding: 12px 20px;
    }

    /* Make form inputs more touch-friendly */
    input, textarea, select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 10px;
    }

    .stats-grid {
        gap: 10px;
    }

    .stat-card h3 {
        font-size: 24px;
    }

    .stat-card p {
        font-size: 12px;
    }
}

/* Vote buttons */
.vote-btn {
    background: #f0f0f0;
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vote-btn:hover {
    background: #e0e0e0;
    border-color: #999;
    transform: translateY(-1px);
}

.vote-btn.active {
    background: var(--gradient-start, #667eea);
    color: white;
    border-color: var(--gradient-start, #667eea);
}

.vote-btn span {
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

/* Pin button */
.pin-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--gradient-start, #667eea);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    position: relative;
}

.pin-btn:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--gradient-end, #764ba2);
    transform: scale(1.1);
}

.pin-btn.pinned {
    background: var(--gradient-start, #667eea);
    border-color: var(--gradient-start, #667eea);
}

.pin-btn.pinned:hover {
    background: var(--gradient-end, #764ba2);
    border-color: var(--gradient-end, #764ba2);
    transform: scale(1.1);
}

/* Pin icon using CSS - looks like a thumbtack */
.pin-btn::before {
    content: '📍';
    display: block;
    transition: transform 0.2s, filter 0.2s;
    filter: grayscale(0);
}

.pin-btn.pinned::before {
    transform: rotate(45deg);
    filter: brightness(0) invert(1);
}

/* Loading animation for similarity check button */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.btn-loading {
    position: relative;
    background: linear-gradient(
        90deg,
        #28a745 0%,
        #28a745 40%,
        #5cb85c 50%,
        #28a745 60%,
        #28a745 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite;
    color: white !important;
    pointer-events: none;
}

/* Recognition Styles */
.recognition-stream {
    margin-top: 25px;
}

.recognition-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recognition-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

/* Recognition Form Card */
.recognition-card-form {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.recognition-card-header {
    background: var(--gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    padding: 18px 30px;
}

.recognition-card-body {
    padding: 30px;
}

.recognition-card-body .form-group {
    margin-bottom: 20px;
}

.recognition-card-body .form-group:last-of-type {
    margin-bottom: 0;
}

.recognition-card-body label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
}

.recognition-card-body input[type="text"],
.recognition-card-body select,
.recognition-card-body textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.recognition-card-body input[type="text"]:focus,
.recognition-card-body select:focus,
.recognition-card-body textarea:focus {
    outline: none;
    border-color: var(--gradient-start, #667eea);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

@media (max-width: 768px) {
    .recognition-card-header {
        padding: 16px 20px;
    }

    .recognition-card-body {
        padding: 20px;
    }

    .recognition-card-body .form-group {
        margin-bottom: 18px;
    }

    /* Recognition stats display mobile improvements */
    #statsDisplay > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    #statsDisplay button {
        width: 100%;
        margin-top: 10px;
    }

    #statsDisplay > div:last-child {
        grid-template-columns: 1fr !important;
    }

    /* Recognition send form section mobile improvements */
    #sendRecognitionSection {
        margin: 0 -15px 20px -15px !important;
        padding: 20px 15px !important;
    }
}

@media (max-width: 480px) {
    #statsDisplay {
        padding: 15px !important;
    }

    #statsDisplay h3 {
        font-size: 16px !important;
    }

    #sendRecognitionSection {
        margin: 0 -10px 15px -10px !important;
        padding: 15px 10px !important;
    }
}

/* ===== ICON SYSTEM ===== */
/* Change icons by uncommenting the library you want to use and updating the classes below */

/* Recognition/Award Icon */
.icon-recognition::before {
    /* Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f559"; /* fa-award */
    
    /* Bootstrap Icons - uncomment to use */
    /* font-family: "bootstrap-icons";
    content: "\f5e1"; */ /* bi-trophy */
}

/* Heart/Like Icon */
.icon-heart::before {
    /* Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f004"; /* fa-heart */
    
    /* Bootstrap Icons - uncomment to use */
    /* font-family: "bootstrap-icons";
    content: "\f417"; */ /* bi-heart-fill */
}

/* Comment/Reply Icon */
.icon-comment::before {
    /* Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f075"; /* fa-comment */
    
    /* Bootstrap Icons - uncomment to use */
    /* font-family: "bootstrap-icons";
    content: "\f27a"; */ /* bi-chat-fill */
}

/* Generic icon styling */
.icon-recognition,
.icon-heart,
.icon-comment {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.icon-recognition::before,
.icon-heart::before,
.icon-comment::before {
    display: inline-block;
    margin-right: 0.25em;
}

/* Notification Indicators */
.notification-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background: #dc3545;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.award-banner {
    text-align: center;
    min-width: 150px;
    height: 42px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.award-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: auto;
}

.new-badge {
    display: inline-block;
    width: auto !important;
    padding: 2px 6px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

@media (max-width: 1200px) {
    .header {
        flex-wrap: wrap;
    }

    .header-left {
        flex: 1;
        min-width: 300px;
    }

    .user-info {
        flex-shrink: 0;
    }
}

/* AI Research Assistant Card */
.ai-research-card {
    border: 1px solid var(--ai-research-border, #f5c6e0);
    border-radius: 8px;
    margin-top: 20px;
    overflow: hidden;
}

.ai-research-header {
    background: var(--ai-research-gradient, linear-gradient(135deg, #f093fb 0%, #f5576c 100%));
    color: white;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.ai-research-header h3 {
    margin: 0;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-bottom: none;
    text-decoration: none;
    padding-bottom: 0;
}

.ai-research-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 50%;
    font-size: 16px;
    flex-shrink: 0;
}

.ai-research-chevron {
    transition: transform 0.2s;
    font-size: 14px;
}

.ai-research-chevron.open {
    transform: rotate(180deg);
}

.ai-research-body {
    padding: 16px;
    background: var(--ai-research-bg, #fff5f9);
}

.ai-research-body.collapsed {
    display: none;
}

.research-section {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--ai-research-divider, #f5c6e0);
}

.research-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.research-section h4 {
    color: var(--ai-research-accent, #e8458b);
    font-size: 14px;
    margin: 0 0 8px 0;
}

.research-section p,
.research-section li {
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
}

.research-section ol,
.research-section ul {
    margin: 4px 0 0 0;
    padding-left: 20px;
}

.research-section li {
    margin-bottom: 4px;
}

.feasibility-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feasibility-high {
    background: #d1fae5;
    color: #065f46;
}

.feasibility-medium {
    background: #fef3c7;
    color: #92400e;
}

.feasibility-low {
    background: #fee2e2;
    color: #991b1b;
}

.risks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.risks-table th {
    text-align: left;
    padding: 6px 8px;
    background: var(--ai-research-table-header, #fce4ec);
    color: var(--ai-research-accent, #e8458b);
    font-size: 12px;
    font-weight: 600;
}

.risks-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--ai-research-divider, #f5c6e0);
    vertical-align: top;
    color: #374151;
}

.risks-table tr:last-child td {
    border-bottom: none;
}

.ai-research-meta {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ai-research-divider, #f5c6e0);
}

.ai-research-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.ai-research-actions .btn {
    font-size: 13px;
    padding: 6px 14px;
}

.btn-ai-primary {
    background: var(--ai-research-gradient, linear-gradient(135deg, #f093fb 0%, #f5576c 100%));
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.btn-ai-primary:hover {
    opacity: 0.9;
}

.btn-ai-secondary {
    background: white;
    color: var(--ai-research-accent, #e8458b);
    border: 1px solid var(--ai-research-divider, #f5c6e0);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.btn-ai-secondary:hover {
    background: var(--ai-research-bg, #fff5f9);
}

.ai-research-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 16px;
    color: var(--ai-research-accent, #e8458b);
    font-size: 14px;
}

.ai-research-spinner .spinner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ai-research-accent, #e8458b);
    animation: aiDotPulse 1.4s infinite ease-in-out both;
}

.ai-research-spinner .spinner-dot:nth-child(1) { animation-delay: -0.32s; }
.ai-research-spinner .spinner-dot:nth-child(2) { animation-delay: -0.16s; }
.ai-research-spinner .spinner-dot:nth-child(3) { animation-delay: 0s; }

@keyframes aiDotPulse {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

@media (max-width: 768px) {
    .notification-indicator {
        width: 14px;
        height: 14px;
        border-width: 2px;
    }

    /* Ensure NEW badge respects JavaScript display control on mobile */
    .new-badge[style*="display: none"] {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .ai-research-header {
        padding: 10px 12px;
    }

    .ai-research-body {
        padding: 12px;
    }

    .risks-table th,
    .risks-table td {
        padding: 5px 6px;
        font-size: 12px;
    }

    .ai-research-actions {
        flex-direction: column;
    }

    .ai-research-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* ===== TASKS SYSTEM STYLES ===== */

/* Task page tabs */
.task-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.task-tab-btn {
    padding: 10px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #64748b;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.task-tab-btn:hover {
    border-color: #94a3b8;
    color: #334155;
}

.task-tab-btn.active {
    background: var(--gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: white;
    border-color: transparent;
}

.task-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}

/* Task list */
.task-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Task card */
.task-card {
    background: white;
    border-radius: 10px;
    padding: 16px 16px 16px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #94a3b8;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.task-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.task-card.priority-urgent {
    border-left-color: #dc2626;
}

.task-card.priority-high {
    border-left-color: #f97316;
}

.task-card.priority-medium {
    border-left-color: #3b82f6;
}

.task-card.priority-low {
    border-left-color: #94a3b8;
}

.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.task-card-title {
    font-weight: 600;
    font-size: 15px;
    color: #1e293b;
    flex: 1;
    word-break: break-word;
}

.task-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: #64748b;
}

.task-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Task priority badges */
.task-priority-urgent {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.task-priority-high {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.task-priority-medium {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.task-priority-low {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* Task status badges */
.task-status-todo {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
}

.task-status-in-progress {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #dbeafe;
    color: #1d4ed8;
}

.task-status-blocked {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #fef2f2;
    color: #dc2626;
}

.task-status-awaiting-review {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #fef3c7;
    color: #b45309;
}

.task-status-done {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #dcfce7;
    color: #16a34a;
}

.task-status-cancelled {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #94a3b8;
    text-decoration: line-through;
}

/* Task due date */
.task-due-date {
    font-size: 12px;
    color: #64748b;
}

.task-due-date.overdue {
    color: #dc2626;
    font-weight: 600;
}

/* Suggestion modal task list (compact) */
.suggestion-task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suggestion-task-card {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px 12px 12px 16px;
    border-left: 3px solid #94a3b8;
    cursor: pointer;
    transition: background 0.15s;
}

.suggestion-task-card:hover {
    background: #f1f5f9;
}

.suggestion-task-card.priority-urgent {
    border-left-color: #dc2626;
}

.suggestion-task-card.priority-high {
    border-left-color: #f97316;
}

.suggestion-task-card.priority-medium {
    border-left-color: #3b82f6;
}

.suggestion-task-card.priority-low {
    border-left-color: #94a3b8;
}

.suggestion-task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}

.suggestion-task-card-title {
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
    flex: 1;
}

.suggestion-task-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    color: #64748b;
}

/* Search results dropdown (for assignee autocomplete) */
.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.search-results-dropdown .search-result-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
}

.search-results-dropdown .search-result-item:hover {
    background: #f1f5f9;
}

.search-results-dropdown .search-result-item:last-child {
    border-bottom: none;
}

/* Task controls row */
.task-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.task-controls input[type="text"] {
    flex: 1;
    min-width: 200px;
}

.task-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.task-filters select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    background: white;
    color: #334155;
    min-width: 140px;
}

/* ── Task Toolbar (single row) ──────────────────────────── */
.task-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: nowrap;
}

/* Shared base for all toolbar controls — consistent height and rounding */
.toolbar-item {
    height: 38px;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}
.toolbar-search {
    flex: 1;
    min-width: 120px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    background: white;
}
.toolbar-select {
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    background: white;
    min-width: 100px;
    cursor: pointer;
}
.toolbar-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.toolbar-action-primary {
    background: var(--gradient-start, #4a9bd9);
    color: white;
}
.toolbar-action-primary:hover { opacity: 0.9; }
.toolbar-action-secondary {
    background: #6b7280;
    color: white;
}
.toolbar-action-secondary:hover { opacity: 0.9; }
.toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    background: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    height: 38px;
    border-radius: 8px;
}
.toolbar-btn:hover { background: #f8fafc; }

.assignee-search-wrapper { position: relative; }
.assignee-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 250px;
    overflow-y: auto;
    z-index: 200;
    min-width: 200px;
}
.assignee-search-results .assignee-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
}
.assignee-search-results .assignee-option:last-child { border-bottom: none; }
.assignee-search-results .assignee-option:hover { background: #f8fafc; }
.assignee-search-results .assignee-option.active { background: #eff6ff; font-weight: 600; }
.toolbar-badge {
    display: inline-block;
    background: #3b82f6;
    color: white;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 11px;
}
.toolbar-btn-primary {
    white-space: nowrap;
}

/* Action Now badge */
.action-now-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 38px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
    white-space: nowrap;
}
.action-now-dot {
    width: 8px;
    height: 8px;
    background: #dc2626;
    border-radius: 50%;
    animation: actionNowPulse 2s infinite;
}
@keyframes actionNowPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Filters Slideout Panel ────────────────────────────── */
.filters-panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 998; }
.filters-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; background: white; z-index: 999; box-shadow: -4px 0 20px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
.filters-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; }
.filters-panel-header h3 { margin: 0; font-size: 18px; }
.filters-panel-header button { border: none; background: none; font-size: 24px; cursor: pointer; color: #64748b; }
.filters-panel-body { padding: 20px; overflow-y: auto; flex: 1; }
.filters-panel-body .filter-group { margin-bottom: 16px; }
.filters-panel-body label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; color: #333; }
.filters-panel-body select { width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; box-sizing: border-box; }
.filters-panel-footer { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid #e2e8f0; }
.filters-panel-footer .btn { flex: 1; }

/* ── Desktop Task Table ────────────────────────────────── */
.task-table-container { display: block; }
.task-table { width: 100%; border-collapse: collapse; }
.task-table th { text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #e2e8f0; }
.task-table td { padding: 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.task-table tbody tr { cursor: pointer; transition: background 0.15s; }
.task-table tbody tr:hover { background: #f8fafc; }

.task-row-title { font-weight: 600; font-size: 14px; color: #1e293b; margin-bottom: 2px; }
.task-row-description { font-size: 12px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 350px; }

.priority-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.priority-badge.priority-urgent { background: #fef2f2; color: #dc2626; }
.priority-badge.priority-high { background: #fff7ed; color: #ea580c; }
.priority-badge.priority-medium { background: #eff6ff; color: #2563eb; }
.priority-badge.priority-low { background: #f8fafc; color: #64748b; }

.assignee-cell { display: flex; align-items: center; gap: 8px; }
.assignee-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.assignee-avatar img { width: 100%; height: 100%; object-fit: cover; }
.assignee-initials { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: white; background: var(--gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%)); }
.assignee-name { font-size: 13px; color: #334155; }

.due-date-cell { font-size: 13px; }
.due-overdue { color: #dc2626; font-weight: 600; }
.due-soon { color: #f59e0b; }
.due-normal { color: #64748b; }

.source-link { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #3b82f6; text-decoration: none; }
.source-link:hover { text-decoration: underline; }
.source-icon { font-size: 14px; }

.comment-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #94a3b8; margin-left: 8px; }

/* Keep old filter-search for backward compat */
.filter-search {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Active filter chips */
.active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    align-items: center;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 10px;
    background: #e2e8f0;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #334155;
}
.filter-chip button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: #64748b;
    padding: 0;
    line-height: 1;
}
.filter-chip button:hover {
    color: #1e293b;
}
.filter-chip-clear {
    font-size: 12px;
    color: #3b82f6;
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
}

/* Mobile filter bar */
.mobile-filter-bar {
    display: none;
    gap: 8px;
    margin-bottom: 12px;
}
.filter-count-badge {
    display: inline-block;
    background: #3b82f6;
    color: white;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 11px;
    margin-left: 4px;
}

/* Mobile bottom sheet */
.mobile-filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
}
.mobile-filter-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    z-index: 1000;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.mobile-filter-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}
.mobile-filter-sheet-header h3 {
    margin: 0;
    font-size: 18px;
}
.mobile-filter-sheet-header button {
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
    color: #64748b;
}
.mobile-filter-sheet-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.mobile-filter-sheet-body .filter-group {
    margin-bottom: 16px;
}
.mobile-filter-sheet-body .filter-group:last-child {
    margin-bottom: 0;
}
.mobile-filter-sheet-body label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
    font-size: 14px;
}
.mobile-filter-sheet-body select {
    width: 100%;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}
.mobile-filter-sheet-footer {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
}
.mobile-filter-sheet-footer .btn {
    flex: 1;
}

/* Actions menu */
.mobile-actions-wrapper {
    position: relative;
}
.actions-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    min-width: 160px;
    overflow: hidden;
}
.actions-menu button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    color: #333;
}
.actions-menu button:hover {
    background: #f5f5f5;
}

/* Responsive: table vs cards, toolbar vs mobile bar */
@media (max-width: 768px) {
    .task-table-container { display: none !important; }
    #taskListContainer { display: block !important; }
    .task-toolbar .toolbar-select { display: none; }
    .task-toolbar .toolbar-btn { display: none; }
    .task-toolbar .toolbar-btn-primary { display: none; }
    .task-toolbar > .btn { display: none; }
    .action-now-badge { display: none !important; }
    .sort-newest-comment { font-size: 12px; }
    .mobile-filter-bar {
        display: flex !important;
    }
    .toolbar-search {
        width: 100%;
    }
}
@media (min-width: 769px) {
    #taskListContainer { display: none !important; }
    .task-table-container { display: block !important; }
}

/* Responsive task styles */
@media (max-width: 768px) {
    .task-tabs {
        gap: 6px;
    }

    .task-tab-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .task-card {
        padding: 12px 12px 12px 16px;
    }

    .task-card-header {
        flex-direction: column;
        gap: 6px;
    }

    .task-controls {
        flex-direction: column;
    }

    .task-controls input[type="text"] {
        min-width: unset;
        width: 100%;
    }

    .task-filters {
        flex-direction: column;
    }

    .task-filters select {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 480px) {
    .task-tab-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .task-card-title {
        font-size: 14px;
    }

    .task-card-meta {
        font-size: 12px;
    }

    .suggestion-task-card {
        padding: 10px 10px 10px 14px;
    }
}

/* Range slider styling for lifecycle controls */
input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    width: 100%;
}

input[type="range"]::-webkit-slider-track {
    background: #cbd5e1 !important;
    height: 10px !important;
    border-radius: 5px !important;
    border: 1px solid #94a3b8 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    margin-top: -10px;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

input[type="range"]::-moz-range-track {
    background: #cbd5e1 !important;
    height: 10px !important;
    border-radius: 5px !important;
    border: 1px solid #94a3b8 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.25), 0 2px 6px rgba(0,0,0,0.3);
}

input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.25), 0 2px 6px rgba(0,0,0,0.3);
}

/* ===== Dual Lifecycle Slider ===== */

.dual-slider-container {
  margin-bottom: 25px;
}

.dual-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 15px;
}

.dual-slider-header label {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.dual-slider-outputs {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 13px;
  color: #666;
  text-align: right;
}

.dual-slider-outputs strong {
  color: #333;
  font-weight: 600;
}

/* Dual slider wrapper */
.dual-slider-wrapper {
  position: relative;
  height: 44px;
  margin-bottom: 20px;
}

/* Base styles for both range inputs */
.dual-slider {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
}

/* Hide the track (we'll show custom track below) */
.dual-slider::-webkit-slider-runnable-track {
  background: transparent;
  height: 8px;
}

.dual-slider::-moz-range-track {
  background: transparent;
  height: 8px;
}

/* Style the thumbs and enable pointer events */
.dual-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid white;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s, box-shadow 0.1s;
}

.dual-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.dual-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.dual-slider::-moz-range-thumb {
  pointer-events: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid white;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s, box-shadow 0.1s;
}

.dual-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.dual-slider::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

/* Revenue slider (inner handle) - Use gradient start color */
.dual-slider-revenue {
  z-index: 3;
}

.dual-slider-revenue::-webkit-slider-thumb {
  background: var(--gradient-start, #667eea);
}

.dual-slider-revenue::-moz-range-thumb {
  background: var(--gradient-start, #667eea);
}

/* Lifecycle slider (outer handle) - Use gradient end color */
.dual-slider-lifecycle {
  z-index: 4;
}

.dual-slider-lifecycle::-webkit-slider-thumb {
  background: var(--gradient-end, #764ba2);
}

.dual-slider-lifecycle::-moz-range-thumb {
  background: var(--gradient-end, #764ba2);
}

/* Focus styles for accessibility */
.dual-slider:focus {
  outline: none;
}

.dual-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.25);
}

.dual-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.25);
}

/* Visual track background */
.dual-slider-track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  z-index: 1;
}

/* Revenue fill (blue) - from start to revenue window */
.dual-slider-revenue-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: #3b82f6;
  border-radius: 4px 0 0 4px;
  transition: width 0.1s ease;
  z-index: 2;
}

/* Tail fill (amber) - from revenue window to lifecycle */
.dual-slider-tail-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: #f59e0b;
  transition: left 0.1s ease, width 0.1s ease;
  z-index: 2;
}

/* Timeline controls */
.timeline-controls {
  margin-top: 15px;
}

.lifecycle-timeline {
  display: flex;
  height: 30px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  cursor: default;
}

/* Year segments - base styling */
.seg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  border-right: 1px solid white;
  transition: background 0.2s;
}

.seg:last-child {
  border-right: none;
}

/* Revenue window segment (blue) */
.seg-revenue {
  background: #3b82f6;
  color: white;
}

/* Long tail segment (amber) */
.seg-tail {
  background: #f59e0b;
  color: white;
}

/* Disabled segment (light grey) */
.seg-disabled {
  background: #e5e7eb;
  color: #9ca3af;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .dual-slider-header {
    flex-direction: column;
    gap: 8px;
  }

  .dual-slider-outputs {
    align-items: flex-start;
    text-align: left;
  }

  .timeline-mode-toggle {
    flex-wrap: wrap;
  }

  .timeline-mode-btn {
    flex: 1;
    min-width: 140px;
  }
}

@media (max-width: 480px) {
  .dual-slider-wrapper {
    height: 50px; /* Larger touch target */
  }

  .dual-slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .dual-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }
}

/* ===== IMAGE GALLERY COMPONENT ===== */

.image-gallery {
  margin: 15px 0;
}

.image-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.image-gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  background: #f9fafb;
  cursor: grab;
  transition: all 0.2s;
}

.image-gallery-item:hover {
  border-color: #9ca3af;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.image-gallery-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.image-gallery-item.drag-over {
  border-color: #3b82f6;
  background: #eff6ff;
  transform: scale(1.05);
}

.image-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-gallery-drag-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  cursor: grab;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s;
}

.image-gallery-item:hover .image-gallery-drag-handle {
  opacity: 1;
}

.image-gallery-order-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.image-gallery-new-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: #10b981;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 2;
}

.image-gallery-delete,
.image-gallery-delete-new {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ef4444;
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: all 0.2s;
  z-index: 3;
}

.image-gallery-item:hover .image-gallery-delete,
.image-gallery-item:hover .image-gallery-delete-new {
  opacity: 1;
}

.image-gallery-delete:hover,
.image-gallery-delete-new:hover {
  background: #dc2626;
  transform: scale(1.1);
}

.image-gallery-add {
  aspect-ratio: 1;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #f9fafb;
}

.image-gallery-add:hover {
  border-color: #9ca3af;
  background: #f3f4f6;
}

.image-gallery-add-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #6b7280;
  padding: 20px;
  text-align: center;
}

.image-gallery-add-label i {
  font-size: 24px;
  color: #9ca3af;
}

.image-gallery-add-label span {
  font-size: 13px;
  font-weight: 500;
}

.image-gallery-add-label small {
  font-size: 11px;
  color: #9ca3af;
}

.image-gallery-limit-reached {
  aspect-ratio: 1;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f9fafb;
  color: #9ca3af;
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

.image-gallery-limit-reached i {
  font-size: 20px;
}

.image-gallery-drop-active {
  outline: 2px dashed #667eea;
  outline-offset: -2px;
  background-color: rgba(102, 126, 234, 0.05);
  border-radius: 8px;
}

/* ===== IMAGE LIGHTBOX ===== */

.image-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.image-lightbox.show {
  display: flex;
}

.image-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.image-lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.image-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10001;
}

.image-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.image-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.image-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.image-lightbox-nav.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.image-lightbox-nav-prev {
  left: 20px;
}

.image-lightbox-nav-next {
  right: 20px;
}

.image-lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

/* Mobile responsiveness for gallery */
@media (max-width: 768px) {
  .image-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }

  .image-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .image-lightbox-nav-prev {
    left: 10px;
  }

  .image-lightbox-nav-next {
    right: 10px;
  }

  .image-lightbox-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .image-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
  }

  .image-lightbox-image {
    max-height: 70vh;
  }
}

/* Image count badge for suggestion cards */
.suggestion-image-count-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.suggestion-image-count-badge i {
  font-size: 11px;
}

/* Admin+ Tab Lock Styling */
.tab-lock-icon {
  margin-right: 5px;
  opacity: 0.6;
  font-size: 0.9em;
}

.tab-btn-locked {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.tab-btn-locked:hover {
  background: transparent !important;
}

/* ============================================================================
   MOBILE NAV / DRAWER (mobile-design-improvements)
   --------------------------------------------------------------------------
   New mobile layout per Mobile UI Spec. All rules below are gated on either
   `body.m-nav-active` (so login/index/verify pages are unaffected) or the
   primary mobile breakpoint at 768px. Desktop layout is unchanged.
   ========================================================================== */

:root {
  /* Spacing scale */
  --m-space-1: 8px;
  --m-space-2: 12px;
  --m-space-3: 16px;
  --m-space-4: 24px;

  /* Mobile typography */
  --m-text-meta: 12px;
  --m-text-body: 14px;
  --m-text-base: 16px;
  --m-text-heading: 18px;

  /* Mobile component sizes */
  --m-header-h: 56px;
  --m-search-h: 48px;
  --m-button-h: 64px;
  --m-drawer-item-h: 44px;
  --m-drawer-w: 85vw;
  --m-drawer-max-w: 360px;
  --m-radius: 8px;
  --m-radius-lg: 10px;

  /* Z-index tiers */
  --m-z-header: 100;
  --m-z-overlay: 900;
  --m-z-drawer: 1000;
}

/* Default state: mobile-nav DOM exists in markup but is hidden on desktop.
   All mobile-only chrome must be listed here so it doesn't leak into the
   769–1199px viewport range. The mobile section below re-shows them inside
   @media (max-width: 768px). */
.m-header,
.m-dashboard,
.m-drawer,
.m-drawer__overlay,
.m-filters-trigger,
.m-chips,
.m-sheet,
.m-sheet__overlay { display: none; }

@media (max-width: 768px) {
  /* On mobile, only show mobile-nav chrome on pages that opt in via the
     m-nav-active body class (set by mobile-nav.js). Login/verify pages
     don't load mobile-nav.js so they keep their existing layout. */
  body.m-nav-active .m-header,
  body.m-nav-active .m-drawer,
  body.m-nav-active .m-drawer__overlay { display: block; }

  body.m-nav-active.m-nav-dashboard .m-dashboard { display: block; }

  /* Hide existing desktop chrome on opted-in pages */
  body.m-nav-active .header,
  body.m-nav-active .page-header,
  body.m-nav-active .controls,
  body.m-nav-active #statisticsSection { display: none !important; }

  /* Hide page-specific filter containers in their original DOM position
     on mobile. They don't have a .controls class so the rule above
     wouldn't catch them, and we don't want them taking up space if the
     JS move into the sheet is delayed or fails. The matching show rule
     inside #m-filter-sheet-body below uses a more-specific selector so
     they reappear once moved. */
  body.m-nav-active #task-filters,
  body.m-nav-active #projectsFilters,
  body.m-nav-active #recognitionFilters,
  body.m-nav-active #queueFilters,
  body.m-nav-active #taskBoardFilters { display: none !important; }

  /* Pages without a `.dashboard` wrapper (project-tasks) need the
     top-padding gap below the sticky header applied to `.container`
     directly. The body marker is set by mobile-nav.js when no
     `.dashboard` is found. */
  body.m-nav-active.m-nav-no-dashboard .container {
    padding-top: var(--m-space-3);
  }

  /* Pull the dashboard wrapper flush against the screen edges */
  body.m-nav-active .container { padding: 0; }
  body.m-nav-active .dashboard {
    margin-top: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  /* Push body content down so the sticky header doesn't cover it */
  body.m-nav-active { padding-top: var(--m-header-h); }

  /* Pages without the dashboard's #m-dashboard wrapper (tasks, projects,
     recognition, impl-queue) start their content directly under the
     sticky header. Give .dashboard a small top padding on mobile so the
     first row of content (tabs, filters, etc.) isn't flush against the
     header. The dashboard page is unaffected because its m-dashboard
     wrapper sits above .dashboard and provides its own top breathing
     room. */
  body.m-nav-active .dashboard {
    padding-top: var(--m-space-3);
  }

  /* ── Sticky header ─────────────────────────────────────────────────── */
  .m-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--m-header-h);
    padding: 0 var(--m-space-3);
    background: var(--gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: #fff;
    z-index: var(--m-z-header);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
  .m-header__brand {
    display: flex;
    align-items: center;
    gap: var(--m-space-1);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
  }
  .m-header__logo {
    max-height: 36px;
    max-width: 120px;
    width: auto;
    display: block;
  }
  .m-header__logo[hidden] { display: none; }
  .m-header__title {
    font-size: var(--m-text-heading);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .m-header__hamburger {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    border-radius: 6px;
  }
  .m-header__hamburger:active { background: rgba(255, 255, 255, 0.15); }
  .m-hamburger__bar {
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* ── Dashboard mobile widgets (search + action stack) ──────────────── */
  .m-dashboard {
    padding: var(--m-space-2) 0 var(--m-space-3);
  }
  .m-search {
    display: block;
    width: calc(100% - 2 * var(--m-space-3));
    height: var(--m-search-h);
    margin: var(--m-space-2) var(--m-space-3);
    padding: 0 var(--m-space-3);
    border: 1px solid #ddd;
    border-radius: var(--m-radius);
    font-size: var(--m-text-base); /* 16px to avoid iOS zoom */
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
  }
  .m-search:focus {
    outline: none;
    border-color: var(--gradient-start, #667eea);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
  }

  .m-actions {
    display: flex;
    flex-direction: column;
    gap: var(--m-space-2);
    padding: 0 var(--m-space-3);
  }
  .m-actions__btn {
    height: var(--m-button-h);
    width: 100%;
    border: none;
    border-radius: var(--m-radius-lg);
    background: var(--gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: #fff;
    font-size: var(--m-text-base);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-space-1);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
  }
  .m-actions__btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .m-actions__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #dc3545;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
  }
  .m-actions__count[hidden] { display: none; }

  /* ── Drawer + overlay ──────────────────────────────────────────────── */
  .m-drawer__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: var(--m-z-overlay);
  }
  .m-drawer__overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .m-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--m-drawer-w);
    max-width: var(--m-drawer-max-w);
    background: #fff;
    z-index: var(--m-z-drawer);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    padding: var(--m-space-3);
    box-sizing: border-box;
  }
  .m-drawer.is-open { transform: translateX(0); }

  .m-drawer__profile {
    display: flex;
    align-items: center;
    gap: var(--m-space-2);
    padding-bottom: var(--m-space-3);
    border-bottom: 1px solid #eee;
    margin-bottom: var(--m-space-2);
  }
  .m-drawer__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 20px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
  }
  .m-drawer__profile-text { min-width: 0; }
  .m-drawer__profile-name {
    font-size: var(--m-text-base);
    font-weight: 600;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-drawer__profile-dept {
    font-size: var(--m-text-meta);
    color: #888;
  }

  .m-drawer__section {
    padding: var(--m-space-1) 0;
    border-bottom: 1px solid #f1f1f1;
  }
  .m-drawer__section:last-child { border-bottom: none; }
  .m-drawer__section-title {
    font-size: var(--m-text-meta);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #999;
    padding: var(--m-space-2) var(--m-space-1) var(--m-space-1);
    font-weight: 600;
  }

  .m-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .m-drawer__list li { margin: 0; padding: 0; }
  .m-drawer__list li[hidden] { display: none; }

  .m-drawer__list-item {
    display: flex;
    align-items: center;
    height: var(--m-drawer-item-h);
    padding: 0 var(--m-space-1);
    color: #222;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    background: transparent;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
  }
  .m-drawer__list-item:active { background: #f5f5f5; }
  .m-drawer__list-item.is-active {
    color: var(--gradient-start, #667eea);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--gradient-start, #667eea);
    background: #f7f8ff;
  }
  .m-drawer__btn { color: #444; }

  /* Disabled list item — used for actions that exist on desktop only.
     Renders as a row with a small "Desktop only" label on the right. */
  .m-drawer__list-item--disabled {
    cursor: default;
    color: #999;
    justify-content: space-between;
    gap: var(--m-space-2);
  }
  .m-drawer__list-item--disabled:active { background: transparent; }

  /* Nested item — sub-link rendered under its parent (e.g. Task Board
     beneath Tasks). Visually indented and slightly smaller. */
  .m-drawer__list-item--nested {
    padding-left: var(--m-space-4);
    font-size: var(--m-text-body);
    color: #555;
  }
  .m-drawer__list-item--nested.is-active {
    box-shadow: inset 3px 0 0 var(--gradient-start, #667eea);
    background: #f7f8ff;
  }
  .m-drawer__list-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-drawer__list-item-meta {
    flex-shrink: 0;
    font-size: var(--m-text-meta);
    font-weight: 500;
    color: #aaa;
    text-transform: none;
    letter-spacing: 0;
  }

  .m-drawer__totals[hidden] { display: none; }
  .m-drawer__totals-body {
    padding: var(--m-space-1);
    display: flex;
    flex-direction: column;
    gap: var(--m-space-1);
  }
  .m-drawer__totals-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--m-text-body);
    color: #444;
  }
  .m-drawer__totals-value {
    font-weight: 600;
    color: #222;
  }

  /* ── Compact suggestion cards on mobile ────────────────────────────── */
  body.m-nav-active.m-nav-dashboard .suggestion-item {
    padding: var(--m-space-2) var(--m-space-3);
    margin-bottom: var(--m-space-2);
    border-radius: var(--m-radius);
  }
  body.m-nav-active.m-nav-dashboard .suggestion-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* The dashboard's suggestion list lives directly inside .dashboard;
     give it some side padding now that .dashboard has none, plus an
     explicit top gap so it isn't flush against the filters trigger /
     action buttons regardless of browser default <ul> margin handling. */
  body.m-nav-active.m-nav-dashboard .suggestions-list {
    margin: 0;
    padding: var(--m-space-3);
  }

  /* ── Filters trigger button ────────────────────────────────────────── */
  .m-filters-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--m-space-2);
    width: calc(100% - 2 * var(--m-space-3));
    margin: var(--m-space-2) var(--m-space-3) var(--m-space-3);
    height: var(--m-search-h);
    padding: 0 var(--m-space-3);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: var(--m-radius);
    color: #333;
    font-size: var(--m-text-body);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
  }
  .m-filters-trigger:active { background: #f5f5f5; }
  .m-filters-trigger__label {
    display: inline-flex;
    align-items: center;
    gap: var(--m-space-1);
  }
  .m-filters-trigger__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--gradient-start, #667eea);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
  }
  .m-filters-trigger__count[hidden] { display: none; }
  .m-filters-trigger__chevron {
    color: #888;
    font-size: 18px;
    line-height: 1;
  }

  /* ── Bottom sheet + overlay ────────────────────────────────────────── */
  .m-sheet__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 901;
  }
  .m-sheet__overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .m-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    z-index: 1001;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    /* Use dvh for iOS Safari (URL bar) with vh fallback */
    max-height: 80vh;
    max-height: 80dvh;
    /* Respect iOS home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .m-sheet.is-open { transform: translateY(0); }

  .m-sheet__header {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: var(--m-space-1) var(--m-space-3) var(--m-space-2);
    border-bottom: 1px solid #eee;
    /* Header is the drag-handle area; allow touch events to bubble for the
       drag-to-dismiss handler but stop the browser doing its own scroll. */
    touch-action: none;
  }
  /* Visual drag affordance — a short pill at the top of the sheet */
  .m-sheet__handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #d4d4d8;
    margin: 6px auto var(--m-space-1);
  }
  .m-sheet__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .m-sheet__title {
    font-size: var(--m-text-heading);
    font-weight: 600;
    color: #222;
    margin: 0;
  }
  .m-sheet__done {
    border: none;
    background: transparent;
    color: var(--gradient-start, #667eea);
    font-size: var(--m-text-base);
    font-weight: 600;
    padding: var(--m-space-1) var(--m-space-2);
    cursor: pointer;
    font-family: inherit;
    border-radius: 6px;
  }
  .m-sheet__done:active { background: #f0f1ff; }

  .m-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--m-space-3);
  }

  .m-sheet__footer {
    flex-shrink: 0;
    padding: var(--m-space-2) var(--m-space-3);
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-start;
  }
  .m-sheet__reset {
    background: transparent;
    border: 1px solid #ddd;
    color: #555;
    font-size: var(--m-text-body);
    font-weight: 600;
    padding: var(--m-space-1) var(--m-space-3);
    border-radius: var(--m-radius);
    cursor: pointer;
    font-family: inherit;
  }
  .m-sheet__reset:active {
    background: #f5f5f5;
    color: #333;
  }

  /* Generic rules for ANY filter container that has been moved into the
     sheet. The mobile-nav.js registry decides which container IDs get
     moved per page (.controls, .task-filters, #recognitionFilters,
     #queueFilters, etc.); they all become direct children of
     #m-filter-sheet-body. These rules force a clean stacked layout and
     override any hostile inline `style="display: contents"` left over
     from the desktop layout. */
  body.m-nav-active #m-filter-sheet-body > *,
  body.m-nav-active #m-filter-sheet-body #task-filters,
  body.m-nav-active #m-filter-sheet-body #projectsFilters,
  body.m-nav-active #m-filter-sheet-body #recognitionFilters,
  body.m-nav-active #m-filter-sheet-body #queueFilters,
  body.m-nav-active #m-filter-sheet-body #taskBoardFilters {
    display: flex !important;
    flex-direction: column;
    gap: var(--m-space-2);
    margin: 0 0 var(--m-space-3);
    padding: 0;
    width: 100%;
  }
  body.m-nav-active #m-filter-sheet-body > *:last-child {
    margin-bottom: 0;
  }
  body.m-nav-active #m-filter-sheet-body select,
  body.m-nav-active #m-filter-sheet-body input[type="text"] {
    width: 100%;
    height: var(--m-search-h);
    font-size: var(--m-text-base);
    padding: 0 var(--m-space-3);
    border: 1px solid #ddd;
    border-radius: var(--m-radius);
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
    /* Some pages set inline `style="flex: 0 0 auto"` etc — override */
    flex: 0 0 auto;
  }
  body.m-nav-active #m-filter-sheet-body label {
    font-size: var(--m-text-body);
    /* Allow checkbox + text labels to lay themselves out horizontally
       (most pages already use display:flex inline on these labels). */
  }

  /* ── Filter chips row ──────────────────────────────────────────────── */
  .m-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-space-1);
    padding: 0 var(--m-space-3) var(--m-space-2);
  }
  .m-chips[hidden] { display: none; }

  .m-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--m-space-1);
    height: 32px;
    padding: 0 10px 0 12px;
    border-radius: 16px;
    border: 1px solid var(--gradient-start, #667eea);
    background: #f0f1ff;
    color: var(--gradient-start, #667eea);
    font-size: var(--m-text-meta);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    max-width: 100%;
  }
  .m-chip:active { background: #e4e6ff; }
  .m-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
  }
  .m-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    font-size: 16px;
    line-height: 1;
    color: inherit;
  }
  .m-chip--clear-all {
    background: transparent;
    border-color: #aaa;
    color: #555;
  }
  .m-chip--clear-all:active { background: #f5f5f5; }
  .m-chip--clear-all .m-chip__x { display: none; }

  /* The filter trigger mount placeholder is empty on desktop and pages
     without filters; make sure it's flush. */
  #m-filter-trigger-mount:empty { display: none; }

  /* ── Scrollable .tabs strip on mobile ──────────────────────────────────
     The tab navigation in the view-suggestion modal (Full Details /
     Comments / Activity / Tasks) and the admin modal otherwise overflows
     on narrow screens. Force a single horizontally-scrollable row, native
     mobile pattern (iOS-style segmented scroll). Applies on every page so
     it doesn't need the m-nav-active gate — narrow viewports always
     benefit from this. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar visually but keep functional */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* A bit of inset so the first/last tab aren't flush against the
       modal edge */
    padding-left: var(--m-space-3);
    padding-right: var(--m-space-3);
    margin-left: calc(-1 * var(--m-space-3));
    margin-right: calc(-1 * var(--m-space-3));
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* ── Recognition Detail (mobile-only restructure) ──────────────────── */
  /* Desktop defaults for these classes are below the media query. */

  body.m-nav-active .rdetail-back { display: inline-flex; }
  body.m-nav-active .rdetail-page-title { display: block; }

  body.m-nav-active .rdetail-page {
    padding: 0 var(--m-space-3) var(--m-space-4);
  }

  body.m-nav-active .rdetail-back {
    align-items: center;
    background: transparent;
    border: none;
    padding: var(--m-space-1) 0;
    color: var(--gradient-start, #667eea);
    font-size: var(--m-text-body);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
  }
  body.m-nav-active .rdetail-back:active { opacity: 0.7; }

  body.m-nav-active .rdetail-page-title {
    margin: var(--m-space-1) 0 var(--m-space-3);
    font-size: var(--m-text-heading);
    font-weight: 600;
    color: #222;
  }

  /* Card shrinks on mobile */
  body.m-nav-active .rdetail-card {
    padding: var(--m-space-3);
    margin-bottom: var(--m-space-3);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-radius: var(--m-radius);
  }

  /* Meta row: date+id on left, heart on right */
  body.m-nav-active .rdetail-card__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--m-space-2);
    margin: 0;
    padding: 0;
    border: none;
  }
  body.m-nav-active .rdetail-card__when {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  body.m-nav-active .rdetail-card__date {
    color: #444;
    font-size: var(--m-text-body);
    font-weight: 500;
  }
  body.m-nav-active .rdetail-card__id {
    color: #999;
    font-size: var(--m-text-meta);
  }
  body.m-nav-active .rdetail-card__like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: var(--m-space-1) 4px;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
  }
  body.m-nav-active .rdetail-card__like #likeIcon {
    color: #dc3545;
    font-size: 18px;
  }
  body.m-nav-active .rdetail-card__like #likeCount {
    color: #444;
    font-size: var(--m-text-body);
    font-weight: 500;
  }

  body.m-nav-active .rdetail-card__divider {
    border: none;
    border-top: 1px solid #eee;
    margin: var(--m-space-2) 0;
    height: 0;
  }

  /* Participants — text only, no avatars on mobile */
  body.m-nav-active .rdetail-card__avatar { display: none; }
  body.m-nav-active .rdetail-card__participants {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--m-space-1);
    margin: 0;
    padding: var(--m-space-1) 0;
    text-align: left;
  }
  body.m-nav-active .rdetail-card__from,
  body.m-nav-active .rdetail-card__to {
    color: #222;
    font-size: var(--m-text-base);
    font-weight: 600;
  }
  body.m-nav-active .rdetail-card__arrow {
    color: #888;
    font-size: var(--m-text-base);
    font-weight: 400;
  }

  /* Type pill — compact */
  body.m-nav-active .rdetail-card__type {
    margin: var(--m-space-2) 0 0;
    text-align: left;
  }
  body.m-nav-active .rdetail-card__type-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: var(--m-text-meta);
    font-weight: 600;
  }

  /* Message block — subtle, lighter padding */
  body.m-nav-active .rdetail-card__message {
    margin: var(--m-space-2) 0 0;
    padding: var(--m-space-2) var(--m-space-3);
    background: #f8f9fa;
    border-left: 3px solid var(--gradient-start, #667eea);
    border-radius: 6px;
  }
  body.m-nav-active .rdetail-card__message p {
    margin: 0;
    color: #333;
    font-size: var(--m-text-base);
    line-height: 1.5;
  }

  /* Standalone delete button below the card */
  body.m-nav-active .rdetail-delete-row:empty { display: none; }
  body.m-nav-active .rdetail-delete-row {
    margin-top: var(--m-space-3);
    text-align: left;
  }
  body.m-nav-active .rdetail-delete-btn {
    background: transparent;
    color: #dc3545;
    border: 1px solid #fca5a5;
    padding: 8px 16px;
    border-radius: var(--m-radius);
    cursor: pointer;
    font-size: var(--m-text-body);
    font-weight: 500;
    font-family: inherit;
  }
  body.m-nav-active .rdetail-delete-btn:active { background: #fee2e2; }

  /* Response section — same compact rhythm */
  body.m-nav-active .rdetail-response {
    background: white;
    border-radius: var(--m-radius);
    padding: var(--m-space-3);
    margin-top: var(--m-space-3);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }
  body.m-nav-active .rdetail-response__title {
    margin: 0 0 var(--m-space-1);
    font-size: var(--m-text-base);
    font-weight: 600;
    color: #222;
  }
  body.m-nav-active .rdetail-response__hint {
    color: #666;
    font-size: var(--m-text-body);
    margin: 0 0 var(--m-space-2);
  }
  body.m-nav-active .rdetail-response__message {
    margin: var(--m-space-1) 0;
    padding: var(--m-space-2) var(--m-space-3);
    background: #e7f3ff;
    border-left: 3px solid #667eea;
    border-radius: 6px;
  }
  body.m-nav-active .rdetail-response__message p {
    margin: 0;
    color: #333;
    font-size: var(--m-text-body);
    line-height: 1.5;
  }
  body.m-nav-active .rdetail-response__timestamp {
    color: #999;
    font-size: var(--m-text-meta);
    text-align: right;
    margin: var(--m-space-1) 0 0;
  }
}

/* ============================================================================
   RECOGNITION DETAIL — desktop defaults
   --------------------------------------------------------------------------
   Reproduce the look of the previous inline-styled template so desktop is
   visually unchanged. Mobile overrides live above inside the m-nav-active
   media query block.
   ========================================================================== */

.rdetail-page {
  max-width: 800px;
  margin: 0 auto;
}
.rdetail-back,
.rdetail-page-title {
  /* Mobile-only chrome — hidden on desktop */
  display: none;
}

.rdetail-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;
}
.rdetail-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}
.rdetail-card__when {
  display: flex;
  flex-direction: column;
}
.rdetail-card__date {
  color: #666;
  font-size: 14px;
}
.rdetail-card__id {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
}
.rdetail-card__like {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.rdetail-card__like #likeIcon {
  color: #dc3545;
  font-size: 20px;
}
.rdetail-card__like #likeCount {
  color: #666;
  font-size: 16px;
}
.rdetail-card__divider {
  /* On desktop the meta row already has its own border-bottom; hide the
     standalone divider so we don't get a double rule. */
  display: none;
}
.rdetail-card__participants {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}
.rdetail-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.rdetail-card__from,
.rdetail-card__to {
  color: #333;
  font-size: 16px;
  font-weight: 700;
}
.rdetail-card__arrow {
  color: #999;
  font-size: 24px;
}
.rdetail-card__type {
  text-align: center;
  margin-bottom: 20px;
}
.rdetail-card__type-pill {
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
.rdetail-card__message {
  background: #f8f9fa;
  border-left: 4px solid #667eea;
  padding: 20px;
  margin: 20px 0;
  border-radius: 6px;
}
.rdetail-card__message p {
  margin: 0;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

.rdetail-delete-row {
  margin-top: 20px;
  text-align: right;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.rdetail-delete-row:empty { display: none; }
.rdetail-delete-btn {
  background: #fee2e2;
  color: #dc3545;
  border: 1px solid #fca5a5;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
}
.rdetail-delete-btn:hover { background: #fecaca; }

.rdetail-response {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.rdetail-response__title {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  font-size: 18px;
}
.rdetail-response__hint {
  color: #666;
  margin-bottom: 20px;
  font-size: 14px;
}
.rdetail-response__message {
  background: #e7f3ff;
  border-left: 4px solid #667eea;
  padding: 20px;
  margin: 15px 0;
  border-radius: 6px;
}
.rdetail-response__message p {
  margin: 0;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}
.rdetail-response__timestamp {
  color: #999;
  font-size: 13px;
  text-align: right;
  margin: 10px 0 0;
}

/* ============================================================================
   IMPLEMENTATION QUEUE SUMMARY (suggestion modal → Tasks tab)
   --------------------------------------------------------------------------
   Desktop: 4-column auto-fit grid with stacked label/value pairs.
   Mobile: compact single-column inline label:value rows so the section
   doesn't dominate the page on small screens.
   ========================================================================== */

.iq-summary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.iq-summary__title {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 10px;
}
.iq-summary--empty .iq-summary__title { margin-bottom: 4px; }
.iq-summary__title i { margin-right: 6px; }
.iq-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.iq-summary__item { min-width: 0; }
.iq-summary__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin-bottom: 4px;
}
.iq-summary__value {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}
.iq-summary__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.iq-summary__placeholder { color: #9ca3af; }
.iq-summary__empty-msg {
  font-size: 13px;
  color: #94a3b8;
}

@media (max-width: 768px) {
  /* Compact summary on mobile: tighter padding, single-column inline
     label:value rows so the section reads as a supporting summary rather
     than a feature panel. Roughly halves the vertical footprint. */
  .iq-summary {
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: none;
  }
  .iq-summary__title {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .iq-summary__grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .iq-summary__item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 0;
  }
  .iq-summary__label {
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .iq-summary__label::after { content: ':'; }
  .iq-summary__value {
    font-size: 13px;
    color: #1e293b;
    font-weight: 600;
  }
  /* Smaller rank badge so it sits inline with the label without
     bumping the row height */
  .iq-summary__rank {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
}

/* ============================================================================
   RECOGNITION STATS PANEL (#statsDisplay on recognition.html)
   --------------------------------------------------------------------------
   Desktop: roomy white card with header row, large stat tiles in an
   auto-fit grid (matches the previous inline-styled look).
   Mobile: compact summary — small heading, full-width Send button, fixed
   2x2 grid with smaller tiles, ~50% less vertical footprint.
   ========================================================================== */

.r-stats {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.r-stats__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}
.r-stats__title {
  margin: 0;
  color: #333;
  font-size: 18px;
}
.r-stats__send {
  padding: 10px 20px;
}
.r-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}
.r-stats__tile {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
}
.r-stats__tile-num {
  font-size: 28px;
  font-weight: bold;
  color: #000;
}
.r-stats__tile-label {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}

@media (max-width: 768px) {
  /* Compact stats panel on mobile so the recognition feed reaches the
     viewport much sooner. Roughly half the previous vertical footprint. */
  .r-stats {
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
  }
  .r-stats__header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
  }
  .r-stats__title {
    font-size: 16px;
    text-align: left;
  }
  .r-stats__send {
    /* Primary action: full-width, ~50px target height, no extra
       hero-banner padding */
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .r-stats__grid {
    /* Force a 2x2 grid regardless of viewport width */
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .r-stats__tile {
    padding: 10px 8px;
    border-radius: 8px;
  }
  .r-stats__tile-num {
    font-size: 24px;
    line-height: 1.1;
  }
  .r-stats__tile-label {
    font-size: 12px;
    margin-top: 2px;
    line-height: 1.2;
  }
}

/* ── Tag Chips ── */
.tag-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
}
.tag-chip-removable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
}
.tag-chip-removable button {
  border: none;
  background: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}
.tag-chip-removable button:hover {
  color: white;
}