/* ============================================================
   sidebar-overrides.css
   Sidebar interaction styles.

   Motion tokens (--sidebar-dur, --sidebar-ease, etc.) are
   defined in page-transitions.css and shared across both files.
   Do NOT redefine them here — that was the source of drift.
   ============================================================ */

/* ── Account panel links ──────────────────────────────────── */
.sidebar-account-panel-icon {
    color: #94a3b8 !important;
    transition: color .2s ease;
}

.sidebar-account-profile-link,
.sidebar-account-profile-link:focus-visible {
    background-color: transparent !important;
    color:            #e2e8f0     !important;
    box-shadow:       none        !important;
    outline:          none        !important;
}

.sidebar-account-profile-link:hover {
    background-color: transparent !important;
    color:            #93c5fd     !important;
    box-shadow:       none        !important;
    outline:          none        !important;
}

.sidebar-account-profile-link.sidebar-account-link-active {
    background-color: transparent !important;
    color:            #93c5fd     !important;
    box-shadow:       none        !important;
    outline:          none        !important;
}

.sidebar-account-profile-link .sidebar-account-panel-icon,
.sidebar-account-profile-link:focus-visible .sidebar-account-panel-icon {
    color: #94a3b8 !important;
}

.sidebar-account-profile-link:hover .sidebar-account-panel-icon,
.sidebar-account-profile-link.sidebar-account-link-active .sidebar-account-panel-icon {
    color: #93c5fd !important;
}

.sidebar-logout-link { color: #e2e8f0 !important; }

.sidebar-logout-link:hover { color: #dc2626 !important; }

.sidebar-logout-link .sidebar-account-panel-icon { color: #94a3b8 !important; }

.sidebar-logout-link:hover .sidebar-account-panel-icon { color: #dc2626 !important; }

/* ── Sidebar element transitions ──────────────────────────── */
/* Use the shared tokens; these elements transition their
   cosmetic properties independently from the layout shift.   */
#app-sidebar,
#app-sidebar .sidebar-header,
#app-sidebar .sidebar-footer,
#app-sidebar .sidebar-nav a,
.sidebar-account-panel,
.sidebar-logo {
    transition:
        background-color .2s ease,
        color            .2s ease,
        border-color     .2s ease,
        box-shadow       .2s ease;
}

/* ── Main content: resting + sidebar-locked states ─────────
   These are defined in page-transitions.css.
   The rules here exist ONLY as a fallback in case that file
   hasn't loaded yet — they are intentionally less specific
   so page-transitions.css wins when present.                 */
#main-content,
.main-content {
    transition: margin-left .32s ease;
}

html.sidebar-transitioning #main-content,
html.sidebar-transitioning .main-content {
    transition:
        margin-left var(--sidebar-dur, 600ms) var(--sidebar-ease, cubic-bezier(.2,.9,.3,1)) !important;
    will-change:              margin-left, transform !important;
    -webkit-backface-visibility: hidden              !important;
    backface-visibility:         hidden              !important;
}

/* ── Icon circle utilities ────────────────────────────────── */
.icon-circle-sm {
    width: 2rem; height: 2rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.icon-circle-md {
    width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.icon-circle-sm i,
.icon-circle-md i { display: inline-block; }

/* Hover lift for icon circles inside .group */
.group .icon-circle-md {
    transition: transform .18s var(--sidebar-ease, cubic-bezier(.2,.9,.3,1)),
                background-color .12s ease;
}
.group:hover .icon-circle-md { transform: translateY(-3px); }

/* ── Summer palette card utilities ───────────────────────── */
.card-tropical-fruit  { background: rgba(214,  0, 68,.08); border-color: rgba(214,  0, 68,.24); }
.card-papaya-fizz     { background: rgba(247, 55, 98,.08); border-color: rgba(247, 55, 98,.24); }
.card-electric-guava  { background: rgba(255, 88,112,.08); border-color: rgba(255, 88,112,.24); }
.card-tropic-pop      { background: rgba(255,171,186,.28); border-color: rgba(237, 92,131,.48); }
.card-aqua-snap       { background: rgba( 12,180,142,.08); border-color: rgba( 12,180,142,.24); }
.card-lemon-twirl     { background: rgba(199,232,146,.26); border-color: rgba(121,178, 92,.48); }
.card-wild-mango      { background: rgba( 31, 84, 58,.08); border-color: rgba( 31, 84, 58,.24); }
.card-berry-breeze    { background: rgba( 17, 66, 49,.10); border-color: rgba( 17, 66, 49,.26); }

/* Hover state: lift + subtle deepen — timing uses shared ease */
.card-tropical-fruit:hover, .card-papaya-fizz:hover,
.card-electric-guava:hover, .card-tropic-pop:hover,
.card-aqua-snap:hover,      .card-lemon-twirl:hover,
.card-wild-mango:hover,     .card-berry-breeze:hover {
    box-shadow: 0 6px 20px rgba(2,6,23,.06);
    transform:  translateY(-4px);
    transition: transform .22s var(--sidebar-ease, cubic-bezier(.2,.9,.3,1)),
                box-shadow .22s ease,
                background-color .18s ease,
                border-color .18s ease;
}
.card-tropic-pop:hover  { background: rgba(255,171,186,.38); border-color: rgba(237,92,131,.62); }
.card-lemon-twirl:hover { background: rgba(199,232,146,.36); border-color: rgba(121,178,92,.62); }

/* ── Icon color variants ──────────────────────────────────── */
.icon-rose          { background: #fff1f2; } .icon-rose i          { color: #fb7185; }
.icon-emerald       { background: #ecfdf5; } .icon-emerald i       { color: #059669; }
.icon-yellow        { background: #fffbeb; } .icon-yellow i        { color: #f59e0b; }
.icon-cyan          { background: #ecfeff; } .icon-cyan i          { color: #06b6d4; }
.icon-pink          { background: #fff1f6; } .icon-pink i          { color: #db2777; }
.icon-sky           { background: #f0f9ff; } .icon-sky i           { color: #0284c7; }
.icon-lime          { background: #f7fee7; } .icon-lime i          { color: #84cc16; }
.icon-amber         { background: #fffbeb; } .icon-amber i         { color: #f59e0b; }
.icon-indigo        { background: #eef2ff; } .icon-indigo i        { color: #4f46e5; }
.icon-tropical      { background: rgba(214,  0, 68,.16); } .icon-tropical i      { color: rgb(214,  0, 68); }
.icon-papaya        { background: rgba(247, 55, 98,.16); } .icon-papaya i        { color: rgb(247, 55, 98); }
.icon-electric-guava{ background: rgba(255, 88,112,.16); } .icon-electric-guava i{ color: rgb(255, 88,112); }
.icon-tropic-pop    { background: rgba(255,171,186,.50); } .icon-tropic-pop i    { color: rgb(219, 64,112); }
.icon-aqua          { background: rgba( 12,180,142,.16); } .icon-aqua i          { color: rgb( 12,180,142); }
.icon-lemon         { background: rgba(199,232,146,.48); } .icon-lemon i         { color: rgb( 74,138, 54); }
.icon-wild-mango    { background: rgba( 31, 84, 58,.16); } .icon-wild-mango i    { color: rgb( 31, 84, 58); }
.icon-berry         { background: rgba( 17, 66, 49,.18); } .icon-berry i         { color: rgb( 17, 66, 49); }

/* ── Summary cards ────────────────────────────────────────── */
.summary-card-total       { background-color: #faf5ff !important; background-image: none !important; border-color: #e9d5ff !important; }
.summary-card-in-progress { background-color: #fffbeb !important; background-image: none !important; border-color: #fde68a !important; }
.summary-card-completed   { background-color: #f0fdf4 !important; background-image: none !important; border-color: #86efac !important; }

/* ── Action icons (table row buttons) ─────────────────────── */
.action-buttons {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .5rem;
}

.action-icon {
    background-color: transparent !important;
    border:  none !important;
    width:   2.25rem;
    height:  2.25rem;
    padding: 0 !important;
    font-size: 1rem;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: .375rem !important;
    line-height: 1;
    transition:
        color            .12s ease,
        background-color .12s ease,
        transform        .16s var(--sidebar-ease, cubic-bezier(.2,.9,.3,1)),
        box-shadow       .16s ease;
    will-change: transform, background-color, box-shadow;
}
.action-icon i { width: 1em; height: 1em; display: block; }

.action-icon:hover {
    background-color: rgba(148,163,184,.12) !important;
    transform:  translateY(-2px) scale(1.05);
    box-shadow: 0 8px 18px rgba(15,23,42,.08);
}
.action-icon:active {
    transform:  translateY(-1px) scale(.98);
    box-shadow: 0 4px 10px rgba(15,23,42,.06);
}

.action-placeholder { color: #94a3b8; display: inline-flex; align-items: center; justify-content: center; }

/* ── Standard table ───────────────────────────────────────── */
.standard-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: .75rem;
    transition: background-color .12s ease;
}
.standard-table tbody tr:hover { background-color: rgba(248,250,252,.7); }

.standard-table thead th {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    padding: .75rem 1rem;
}

/* ── File-selector button ─────────────────────────────────── */
::file-selector-button:hover {
    filter: none !important;
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}