/* components.css - Combined Component-Specific Styles */

/* =========================
   UPLOAD AREA STYLES
   ========================= */
.upload-area {
    border: 2px dashed var(--bs-primary);
    border-radius: 10px;
    padding: 50px;
    text-align: center;
    background-color: var(--bs-body-bg);
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-area:hover {
    border-color: var(--bs-primary);
    background-color: var(--bs-secondary-bg);
    filter: brightness(0.95);
}

.upload-area.dragover {
    border-color: var(--bs-success);
    background-color: var(--bs-success-bg-subtle);
    transform: scale(1.02);
}

.upload-area.file-selected {
    border-color: var(--bs-success);
    background-color: var(--bs-success-bg-subtle);
}

.upload-area.has-files {
    display: block;
    text-align: left;
    padding: 16px 20px;
    cursor: default;
}

.upload-area.has-files:hover {
    background-color: var(--bs-body-bg);
    filter: none;
}

.upload-area.dragover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--bs-success-rgb), 0.1);
    border-radius: 8px;
    z-index: 1;
}

/* =========================
   FILE LIST COMPONENT
   ========================= */
.file-list {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
}

.file-item {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-item:last-child {
    border-bottom: none;
}

.file-item .filename {
    flex-grow: 1;
    font-size: 0.85rem;
    color: var(--bs-body-color);
    margin-right: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.file-item .file-size {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-right: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.file-item-remove {
    background: none;
    border: none;
    padding: 0.1rem 0.25rem;
    line-height: 1;
    border-radius: var(--bs-border-radius-sm);
    color: var(--bs-danger);
    flex-shrink: 0;
}

.file-item-remove:hover {
    background: var(--bs-danger-bg-subtle);
}

/* =========================
   OVERFLOW HANDLING
   ========================= */
.min-w-0 {
    min-width: 0 !important;
}

.text-truncate-enhanced {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* =========================
   DOCUMENT CARD HOVER EFFECTS
   ========================= */
.document-card {
    transition: background-color 0.2s ease, 
                border-left 0.2s ease, 
                box-shadow 0.2s ease;
    position: relative;
}

.document-card:hover {
    background-color: var(--bs-secondary-bg) !important;
    border-left: 4px solid var(--bs-primary) !important;
    padding-left: calc(1rem - 4px) !important;
    box-shadow: var(--bs-box-shadow) !important;
}

/* =========================
   ANIMATION KEYFRAMES
   ========================= */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

#fileSelected:not(.d-none) {
    animation: fadeIn 0.3s ease-out;
}

/* =========================
   BUTTON RESPONSIVE TEXT
   ========================= */
.action-btn .btn-text {
    display: inline;
}

/* =========================
   TEAM MEMBER AVATARS
   ========================= */
.avatar-sm {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.75rem;
}

.avatar-md {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.875rem;
}

.avatar-lg {
    width: 50px !important;
    height: 50px !important;
    font-size: 1rem;
}

/* =========================
   TIMELINE STYLING
   ========================= */
.timeline-item {
    position: relative;
    padding-left: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: -20px;
    width: 2px;
    background-color: var(--bs-border-color);
}

.timeline-item:last-child::before {
    display: none;
}

/* =========================
   TEAM STATS CARDS
   ========================= */
.team-stats-card {
    transition: transform 0.2s ease-in-out;
}

.team-stats-card:hover {
    transform: translateY(-2px);
}

/* =========================
   MEMBER LIST STYLING
   ========================= */
.member-list-item {
    transition: background-color 0.15s ease-in-out;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.member-list-item:hover {
    background-color: var(--bs-light) !important;
}

[data-bs-theme="dark"] .member-list-item:hover {
    background-color: var(--bs-dark) !important;
}

/* =========================
   TEAM ACTIONS
   ========================= */
.team-action-btn {
    transition: all 0.15s ease-in-out;
}

.team-action-btn:hover {
    transform: scale(1.02);
}

/* =========================
   BULK ACTIONS BAR
   ========================= */
.bulk-actions-bar {
    background-color: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
}

/* =========================
   INVITATION STATUS INDICATORS
   ========================= */
.invitation-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.invitation-status.pending {
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    border: 1px solid var(--bs-warning-border-subtle);
}

.invitation-status.accepted {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    border: 1px solid var(--bs-success-border-subtle);
}

.invitation-status.expired {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border: 1px solid var(--bs-danger-border-subtle);
}

/* =========================
   RESPONSIVE ADJUSTMENTS
   ========================= */
@media (max-width: 767.98px) {
    .timeline-item {
        padding-left: 1.5rem;
    }
    
    .timeline-item::before {
        left: 15px;
    }
    
    .avatar-md {
        width: 36px !important;
        height: 36px !important;
    }
    
    .member-list-item {
        padding: 0.5rem;
    }
}

/* =========================
   TEAM SETTINGS TABS
   ========================= */
.team-settings-nav .nav-link {
    color: var(--bs-body-color);
    border: 1px solid transparent;
    border-radius: 0.375rem;
    margin-bottom: 0.25rem;
}

.team-settings-nav .nav-link:hover {
    background-color: var(--bs-tertiary-bg);
}

.team-settings-nav .nav-link.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

/* =========================
   DARK MODE ADJUSTMENTS
   ========================= */
[data-bs-theme="dark"] .timeline-item::before {
    background-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .team-stats-card {
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .bulk-actions-bar {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}


/* =========================
   UPLOAD BUTTON PULSE
   ========================= */
@keyframes btn-pulse-glow {
    0%   { box-shadow: 0 0 0 0 rgba(0, 105, 148, 0.8); }
    60%  { box-shadow: 0 0 0 14px rgba(0, 105, 148, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 105, 148, 0); }
}

#uploadBtn.btn-pulse {
    animation: btn-pulse-glow 1.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    #uploadBtn.btn-pulse {
        animation: none;
        box-shadow: 0 0 0 4px rgba(0, 105, 148, 0.5);
    }
}

/* =========================
   UPLOAD PAGE FORMAT STRIP (COMPACT SIZING)
   ========================= */
.doc-format-strip,
.court-preset-bar {
    /* Fluid size: stays at 0.75rem on narrower viewports, grows toward normal
       body text (1rem) on wider/higher-res viewports so it doesn't read as
       tiny on screens that report a wider logical viewport than usual. */
    font-size: clamp(0.75rem, 0.45rem + 0.35vw, 1rem);
    /* Positioning context for the anon lock overlay below. */
    position: relative;
}

/* Anonymous visitors: document settings aren't stored anywhere yet (they live on the
   User model), so the strip is shown dimmed with the real controls disabled, and this
   overlay intercepts the click to explain why instead of letting a save attempt fail. */
.format-strip-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
    background: transparent;
}

.court-preset-bar {
    margin-top: -1rem;
    margin-bottom: 0.25rem;
}

@media (max-width: 991.98px) {
    .court-preset-bar {
        margin-top: -0.5rem;
    }
}

.doc-format-strip,
.court-preset-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.doc-format-strip::-webkit-scrollbar,
.court-preset-bar::-webkit-scrollbar {
    display: none;
}

.doc-format-strip > *,
.court-preset-bar > * {
    flex-shrink: 0;
}

/* Mobile: show a thin, brand-colored scrollbar on the format strip instead of hiding it entirely
   (the preset bar keeps its scrollbar fully hidden, per the shared rule above) */
@media (max-width: 991.98px) {
    .doc-format-strip {
        scrollbar-width: thin;
        scrollbar-color: var(--bs-primary) transparent;
    }

    .doc-format-strip::-webkit-scrollbar {
        display: block;
        height: 3px;
    }

    .doc-format-strip::-webkit-scrollbar-track {
        background: transparent;
    }

    .doc-format-strip::-webkit-scrollbar-thumb {
        background-color: var(--bs-primary);
        border-radius: 3px;
    }
}

/* em, not rem, below: sized relative to the fluid font-size set above so
   these scale together with it instead of staying pinned to a fixed size. */
.doc-format-strip .btn-group .btn,
.court-preset-bar .btn-group .btn {
    padding: 0.2em 0.6em;
    font-size: 0.933em;
}

.doc-format-strip .form-select-sm {
    padding: 0.2em 2.333em 0.2em 0.667em;
    font-size: 0.933em;
    min-height: calc(1.3em + 0.4em + 2px);
    background-position: right 0.533em center;
}

.doc-format-strip .form-check-input {
    width: 2em;
    height: 1.1em;
}

.doc-format-strip .form-check-label {
    font-size: 0.933em;
}

/* =========================
   FEATURE TOUR (SPOTLIGHT ONBOARDING)
   ========================= */
.feature-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.feature-tour-highlight {
    position: fixed;
    border-radius: 0.5rem;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
    pointer-events: none;
}

.feature-tour-tooltip {
    position: fixed;
    width: 280px;
    max-width: calc(100vw - 24px);
    background: var(--bs-primary);
    color: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
    transition: top 0.25s ease, left 0.25s ease;
}

.feature-tour-avatar {
    position: absolute;
    top: -62px;
    left: 14px;
    width: 72px;
    height: 72px;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
    pointer-events: none;
}

.feature-tour-title {
    color: #fff;
}

.feature-tour-tooltip p {
    color: rgba(255, 255, 255, 0.9);
}

.feature-tour-tooltip #featureTourSkip {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.feature-tour-tooltip #featureTourSkip:hover {
    color: #fff;
}

/* Speech-bubble style pointer connecting the tooltip to its target */
.feature-tour-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}

.feature-tour-tooltip.tour-below .feature-tour-arrow {
    top: -9px;
    border-bottom: 9px solid var(--bs-primary);
}

.feature-tour-tooltip.tour-above .feature-tour-arrow {
    bottom: -9px;
    border-top: 9px solid var(--bs-primary);
}

.feature-tour-dots {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.feature-tour-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    display: inline-block;
}

.feature-tour-dots span.active {
    background: #fff;
}