.sidebar-root { display: flex; flex-direction: column; /* Fix width so inner content cannot expand the sidebar */ box-sizing: border-box; flex: 0 0 var(--sidebar-width) !important; width: var(--sidebar-width) !important; max-width: var(--sidebar-width) !important; min-width: var(--sidebar-width) !important; border-right: 1px solid #3333331c; height: 100%; padding: 8px 16px; /* overflow moved to content area so footer can stay visible */ overflow: visible; }

/* Stronger selector to ensure layout doesn't override sidebar sizing */
.layout > .sidebar-root { flex: 0 0 var(--sidebar-width) !important; width: var(--sidebar-width) !important; max-width: var(--sidebar-width) !important; min-width: var(--sidebar-width) !important; }

/* New content area that will take remaining space and be scrollable */
.sidebar-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: auto; }

.sidebar-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #3333331c; padding-bottom: 8px; margin-bottom: 8px; }

.sidebar-brand { display: flex; justify-content: flex-start; align-items: center; gap: 12px; }
    .sidebar-brand h1 { margin: 0; font-weight: 600; outline: none; }
    .sidebar-brand h1:focus { outline: none; }

/* Remove focus outline from all sidebar header elements */
.sidebar-header *:focus { outline: none; }

.sidebar-menu { display: flex; gap: 2px; align-items: center; }

.sidebar-footer { margin-top: auto; border-top: 1px solid #3333331c; align-content: center; }

.sidebar-user-dropdown-profile { padding: 2px 8px; display: flex; justify-content: space-between; height: 100%; align-items: center; }

nav { border-bottom: 1px solid #3333331c; padding-bottom: 8px; }

.sidebar-user-dropdown-profile h4 { margin: 0; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-connection-status { display: flex; gap: 8px; }

.sidebar-user-dropdown { padding: 8px 0px; }

.sidebar-connected { color: green; }

.sidebar-disconnected { color: red; }

.sidebar-syncing { color: orange; }

.sidebar-projects-header { display: flex; justify-content: space-between; align-items: center; } /* Actions container next to the header title (plus and refresh) */
.sidebar-project-actions { display: flex; gap: 6px, align-items: center; } /* Generic small icon button used in the sidebar header */
.btn.btn-icon { background: transparent; border: none; padding: 6px; margin: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; color: var(--text-color-light); } /* Hover/active states to match other header controls */
.btn.btn-icon:hover { background: rgba(0,0,0,0.04); color: var(--text-color-dark); } /* Keep icons same size and vertically centered */
.btn.btn-icon i { font-size: 18px; } /* Spinning class may be applied to icons when loading */
.spinning { animation: spin 1s linear infinite; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

input.sidebar-search-input { width: 100%; padding: 8px; padding-left: 36px; padding-right: 40px; border: none; color: var(--text-color-dark); font-size: 1.1em; font-weight: 500; background-color: #ecececc9; border-radius: var(--border-radius); font-family: var(--font-family); }

    input.sidebar-search-input:focus { outline: none; border-color: #888; }

.sidebar-search-wrapper { position: relative; width: 100%; }

.sidebar-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-color-light); pointer-events: none; font-size: 16px; }

/* Clear button positioned to the far right inside the search field */
.sidebar-clear-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin: 0; background: transparent; border: none; color: var(--text-color-light); cursor: pointer; font-size: 16px; }

    .sidebar-clear-btn i { pointer-events: none; }

/* Make the projects list take remaining space inside the content area and be scrollable */
.sidebar-projects-list { padding-right: 4px; margin-top: 10px; overflow: auto; flex: 1 1 auto; min-height: 0; }

.sidebar-project-container-title { border-radius: var(--border-radius); display: flex; gap: 12px; align-items: center; }
.sidebar-project-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

.sidebar-project-container { cursor: pointer; display: flex; flex-direction: column; align-items: stretch; gap: 8px; background-color: #ffffff; border-radius: var(--border-radius); }

.sidebar-project-container-title:hover,
.sidebar-project-container-title.active { background-color: var(--project-active-bg); }

.sidebar-project-container-list { width: 100%; }

.sidebar-project-container-title { padding: 8px 4px; display: flex; gap: 12px; align-items: center; justify-content: space-between; width: 100%; }

.sidebar-project-avatar { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background-color: #e74c3c; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: "Quicksand", sans-serif; font-size: 0.8rem; overflow: hidden; }

.sidebar-customer-info { display: flex; align-items: center; gap: 12px; }

.sidebar-customer-name { margin: 0; font-weight: 600; color: var(--text-color-dark); font-size: 0.9rem; max-width: 215px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-project-counter { margin: 0; color: #9aa3ab; font-size: 0.8rem; font-weight: 500; }

.sidebar-project-items { margin-left: 20px; border-left: 1.5px solid hotpink; display: flex; flex-direction: column; padding-left: 12px; box-sizing: border-box; max-width: 100%; }

.sidebar-project-item { cursor: pointer; display: block; padding: 6px 8px; border-radius: var(--border-radius); color: var(--text-color-dark); max-width: 100%; text-decoration: none; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .sidebar-project-item:hover { background-color: var(--hover-bg); }

    .sidebar-project-item.active { background-color: var(--project-active-bg); font-weight: 600; }

/* Active Timer Bar Styles */
.active-timer-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(135deg, #4f8df7 0%, #3b82f6 100%); border-radius: var(--border-radius); color: white; font-weight: 500; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin-bottom: 12px; }

.timer-status { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }

.timer-indicator { width: 8px; height: 8px; background-color: #10b981; border-radius: 50%; animation: pulse-blink 2.5s ease-in-out infinite; flex-shrink: 0; }

@keyframes pulse-blink {
    0% { opacity: 1; transform: scale(1); }
    25% { opacity: 0.3; transform: scale(1.1); }
    50% { opacity: 1; transform: scale(1); }
    75% { opacity: 0.3; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

.timer-project { color: white; font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.timer-display { font-family: var(--font-family); font-size: 0.8rem; font-weight: 700; color: white; background: rgba(255, 255, 255, 0.15); padding: 4px 12px; border-radius: 6px; min-width: 80px; text-align: center; letter-spacing: 0.5px; }

.timer-stop-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: #ef4444; border: none; border-radius: var(--border-radius); color: white; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; padding: 0; }

    .timer-stop-btn:hover { background-color: #dc2626; transform: scale(1.05); }

    .timer-stop-btn:active { transform: scale(0.95); }

    .timer-stop-btn:disabled {
  cursor: not-allowed;
  opacity: 0.8;
    }

    .timer-stop-btn i { font-size: 14px; }

    .timer-stop-btn .spinner-border-sm {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }

/* QuickStart modal specific styles (modal base styles are in app.css) */
.modal .quickstart-body { display: flex; gap: 28px; align-items: flex-start; }

.quickstart-search { flex: 1 1 320px; }
.quickstart-form { display: flex; flex-direction: column; gap: 12px; flex: 1 1 420px; }

.quickstart-search input[type="text"] { width: 100%; padding: 10px 12px; border-radius: var(--border-radius); border: 1px solid #e5e7eb; background: #fff; box-sizing: border-box; font-family: var(--font-family); color: var(--text-color-dark); }

.quickstart-search-results { margin-top: 8px; max-height: 220px; overflow: auto; }
.quickstart-search-item { padding: 10px; border-radius: 6px; cursor: pointer; }
    .quickstart-search-item.selected, .quickstart-search-item:hover { background: #f3f4f6; }
.quickstart-search-sub { font-size: 0.85rem; color: #6b7280; }

/* Match validation styles inside modal */
.modal .invalid-field { border: 1px solid #ef4444 !important; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.06); }

.autocomplete-wrapper { position: relative; }
    .autocomplete-wrapper input[type="text"] { width: 100%; }

    .autocomplete-wrapper .autocomplete-dropdown { position: absolute; top: calc(100% + 6px); left: 0; width: 100%; max-height: 300px; overflow: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; box-shadow: 0 8px 24px rgba(2,6,23,0.12); z-index: 10000; /* above modal backdrop */ }

.autocomplete-list { list-style: none; margin: 0; padding: 6px 0; }
.autocomplete-item { padding: 10px 14px; cursor: pointer; border-radius: 6px; }
    .autocomplete-item h5 { margin: 0 0 4px 0; font-size: 0.95rem; }
.autocomplete-sub { margin: 0; font-size: 0.83rem; color: #6b7280; }
.autocomplete-item.selected, .autocomplete-item:hover { background: #f3f4f6; }
.autocomplete-item.create-new { 
    border-top: 1px solid #e5e7eb; 
    color: #3b82f6; 
    font-weight: 500; 
}
    .autocomplete-item.create-new:hover { 
        background: #eff6ff; 
    }
    .autocomplete-item.create-new h5 { 
        color: #3b82f6; 
        font-weight: 600; 
    }

.quickstart-search { position: relative; }

/* ensure dropdown scrollbar matches app style */
.autocomplete-dropdown::-webkit-scrollbar { width: 10px; }
.autocomplete-dropdown::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 6px; }