/* ============================================
   TIMEWISE - CSP Utility Classes
   ============================================
   These classes replace common inline style patterns
   to improve CSP compliance while preserving design.
   ============================================ */

/* ----- Icon Spacing ----- */
.icon-mr-4  { margin-right: 4px; }
.icon-mr-6  { margin-right: 6px; }
.icon-mr-8  { margin-right: 8px; }
.icon-ml-4  { margin-left: 4px; }
.icon-ml-6  { margin-left: 6px; }
.icon-ml-8  { margin-left: 8px; }
.icon-mt-6  { margin-top: 6px; }
.icon-mt-8  { margin-top: 8px; }

/* ----- Icon Colors ----- */
.icon-primary { color: var(--primary-color); }
.icon-white   { color: #fff; }
.icon-danger  { color: var(--danger-color); }

/* ----- Icon Opacity ----- */
.icon-opacity-60 { opacity: 0.6; }
.icon-opacity-80 { opacity: 0.8; }

/* ----- Section Headers ----- */
.section-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-header h2 .icon-mr-8 {
    color: var(--primary-color);
}

/* ----- Hero Text ----- */
.hero-subtitle {
    color: rgba(255,255,255,0.75);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quote-icon {
    opacity: 0.6;
    margin-right: 8px;
}

.quote-author {
    opacity: 0.8;
    font-size: 0.9em;
}

/* ----- Priority Badge Icon ----- */
.priority-badge .icon-mr-6 {
    color: var(--primary-color);
}

/* ----- Task Meta Icons ----- */
.task-meta .icon-mr-4 {
    margin-right: 4px;
}
.task-meta .icon-ml-4 {
    margin-left: 4px;
}
.task-meta .icon-mr-6 {
    margin-right: 6px;
}

/* ----- Deadline Card Icons ----- */
.deadline-card .icon-mr-4 {
    margin-right: 4px;
}
.deadline-card .icon-ml-4 {
    margin-left: 4px;
}

/* ----- Activity Item Icons ----- */
.activity-item small .icon-mr-4 {
    margin-right: 4px;
}

/* ----- Focus Card Icons ----- */
.focus-card .icon-mr-6 {
    margin-right: 6px;
}
.focus-card .icon-ml-8 {
    margin-left: 8px;
}
.focus-card .icon-mr-4 {
    margin-right: 4px;
}

/* ----- View All Links ----- */
.view-all-link .icon-ml-4 {
    margin-left: 4px;
}

/* ----- Settings Header Icons ----- */
.settings-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-section h2 .icon-mr-8 {
    color: var(--primary-color);
}
.settings-section .icon-mr-6 {
    color: var(--primary-color);
}

/* ----- Form Label Icons ----- */
.form-label .icon-mr-6 {
    color: var(--primary-color);
}

/* ----- Danger Zone ----- */
.danger-zone-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.danger-zone-header h3 .icon-mr-8 {
    color: var(--danger-color);
}

/* ----- Task Detail Icons ----- */
.task-detail-item .icon-mr-6 {
    margin-right: 6px;
}
.task-detail-item .icon-ml-8 {
    margin-left: 8px;
}
.task-detail-item .icon-mr-4 {
    margin-right: 4px;
}

/* ----- Notification Item Icons ----- */
.notification-item small .icon-mr-4 {
    margin-right: 4px;
}

/* ----- Profile Flash Messages ----- */
.flash-message {
    margin-bottom: 1.25rem;
}

/* ----- Progress Bar ----- */
.progress-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}

/* ----- Profile input padding ----- */
.input-padded {
    padding: 0.5rem;
}

/* ----- Productivity Bar ----- */
.productivity-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
}
.productivity-fill {
    height: 100%;
    transition: width 0.3s ease;
}

/* ----- Timer Display ----- */
.timer-display-danger {
    font-size: 2rem;
    color: var(--danger-color);
}

/* ----- Danger Box ----- */
.danger-box {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--bg-subtle);
    border-radius: var(--border-radius);
}

/* ----- Inline Form ----- */
.form-inline {
    display: inline;
}

/* ----- Auth Page Title ----- */
.auth-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.auth-title .icon-mr-8 {
    margin-right: 8px;
}

/* ----- Auth Input Icon ----- */
.input-icon {
    margin-right: 6px;
}

/* ----- Text muted with color ----- */
.text-muted-custom {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* ----- Margin utilities ----- */
.mb-075 { margin-bottom: 0.75rem; }
.mt-1   { margin-top: 1rem; }
.mt-125 { margin-top: 1.25rem; }

/* ----- Padding utilities ----- */
.p-05 { padding: 0.5rem; }

/* ----- Inline Form ----- */
.form-inline {
    display: inline;
}

/* ----- Hide on mobile ----- */
.hide-mobile {
    display: none !important;
}

/* ----- Danger Box ----- */
.danger-box {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--bg-subtle);
    border-radius: var(--border-radius);
}

/* ----- Timer Display Danger ----- */
.timer-display-danger {
    font-size: 2rem;
    color: var(--danger-color);
}

/* ----- Text muted with padding ----- */
.text-muted-padded {
    padding: 1rem 0;
}

/* ----- Calendar Page Icons ----- */
.calendar-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.calendar-header h2 .icon-mr-8 {
    color: var(--primary-color);
}

.calendar-task-item .icon-mr-6 {
    margin-right: 6px;
    color: var(--primary-color);
}

/* ----- Task Priority Colors (for dynamic JS) ----- */
.task-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* ----- Responsive helpers ----- */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* ----- Accessibility ----- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ----- Margin left auto ----- */
.ml-auto { margin-left: auto; }

/* ----- Avatar styles ----- */
.avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.avatar-fallback.avatar-hidden {
    display: none;
}

/* ----- Accent swatch dynamic ----- */
.accent-swatch-dynamic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s;
}

.accent-swatch-dynamic:hover {
    border-color: var(--primary-color);
}

/* ----- Focus visible for keyboard navigation ----- */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ----- Transition utilities ----- */
.transition-theme {
    transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
}