/* ==========================================================================
   Base CSS - Global styles for Reflekt application
   ========================================================================== */

/* CSS Custom Properties */
:root {
    /* Brand palette — reconciled to the indigo the app actually renders in.
       (Was documented as #4f46e5/#7c3aed; the UI has long shipped #6366f1/#8b5cf6,
       so the token now matches reality and everything can reference it.) */
    --primary-color: #6366f1;      /* Indigo */
    --secondary-color: #8b5cf6;    /* Violet */

    /* Type families — system sans for UI/body,
       mono for dates / counts / labels (echoes the Consolas editor). */
    --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:  ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

    /* Type scale (px in comments) */
    --fs-xs:   0.75rem;   /* 12 */
    --fs-sm:   0.875rem;  /* 14 */
    --fs-base: 1rem;      /* 16 */
    --fs-md:   1.125rem;  /* 18 */
    --fs-lg:   1.375rem;  /* 22 */
    --fs-xl:   1.75rem;   /* 28 */
    --fs-2xl:  2.25rem;   /* 36 */
    --fs-3xl:  3rem;      /* 48 */

    /* Line heights */
    --lh-tight:  1.15;
    --lh-snug:   1.35;
    --lh-normal: 1.6;
}

/* ==========================================================================
   Accessibility baseline (global)
   ========================================================================== */

/* Visible keyboard focus, app-wide. `:focus-visible` only matches keyboard /
   programmatic focus, so mouse users never see it. The `:not(:focus-visible)`
   rule removes the default UA outline on mouse/touch focus without killing the
   keyboard indicator — the correct modern replacement for `outline: none`. */
:focus:not(:focus-visible) {
    outline: none;
}
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Respect users who ask their OS for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Typography — "Ledger of Days" type system
   ========================================================================== */

h1, h2, .h1, .h2 {
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

/* Type-role utilities */
.font-mono  { font-family: var(--font-mono) !important; }
.text-eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* Layout */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
}

.main-content {
    flex: 1;
}

/* ==========================================================================
   Mood & Sentiment
   ========================================================================== */

.mood-emoji {
    font-size: 1.5rem;
}

.entry-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
}

/* Sentiment colors */
.sentiment-positive { color: #22c55e; }
.sentiment-negative { color: #ef4444; }
.sentiment-neutral { color: #6b7280; }

/* Mood badge colors */
.badge-mood-ecstatic { background-color: #8b5cf6 !important; color: white; }
.badge-mood-happy { background-color: #22c55e !important; color: white; }
.badge-mood-neutral { background-color: #6b7280 !important; color: white; }
.badge-mood-sad { background-color: #3b82f6 !important; color: white; }
.badge-mood-angry { background-color: #ef4444 !important; color: white; }

/* ==========================================================================
   Opacity utilities (extends Bootstrap's .opacity-25/50/75/100)
   ========================================================================== */

.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

/* ==========================================================================
   POV Blocks
   ========================================================================== */

/* POV blocks - received from friends (light blue) */
.alert-pov {
    background-color: #e0f2fe;
    border: 1px solid #7dd3fc;
    border-left: 4px solid #0ea5e9;
    border-radius: 0.5rem;
    color: #0c4a6e;
}

/* POV blocks must clear floated images above them */
.admonition.admonition-pov,
.admonition.admonition-pov-author,
div.admonition-pov,
div.admonition-pov-author {
    clear: both !important;
    overflow: hidden !important;
    display: block !important;
}

.admonition-pov .admonition-title {
    color: #0369a1;
    font-weight: 600;
}

.admonition-pov .admonition-content {
    color: #0c4a6e;
}

/* POV blocks - sent to friends (light purple) */
.alert-pov-author {
    background-color: #f3e8ff;
    border: 1px solid #d8b4fe;
    border-left: 4px solid #a855f7;
    border-radius: 0.5rem;
    color: #581c87;
}

.admonition-pov-author .admonition-title {
    color: var(--secondary-color);
    font-weight: 600;
}

.admonition-pov-author .admonition-content {
    color: #581c87;
}

/* Images inside POV blocks */
.admonition-pov .admonition-content,
.admonition-pov-author .admonition-content {
    display: flow-root;  /* Creates block formatting context to contain floats */
    position: relative;
    z-index: 1;
}

.admonition-pov .entry-image,
.admonition-pov-author .entry-image {
    margin: 0.5rem 0;
    position: relative;
    z-index: 2;
}

.admonition-pov .entry-image-left,
.admonition-pov-author .entry-image-left {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}

.admonition-pov .entry-image-right,
.admonition-pov-author .entry-image-right {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}

.admonition-pov .entry-image img,
.admonition-pov-author .entry-image img {
    border-radius: 6px;
}

/* ==========================================================================
   Tracker Blocks (Goals & Habits)
   ========================================================================== */

.tracker-block {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.tracker-block a {
    text-decoration: none;
}

.tracker-block a:hover {
    text-decoration: underline;
}

.tracker-goal {
    background-color: #dcfce7;
    border: 1px solid #86efac;
    color: #166534;
}

.tracker-goal a {
    color: #166534;
    font-weight: 500;
}

.tracker-habit {
    background-color: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.tracker-habit a {
    color: #92400e;
    font-weight: 500;
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */

.toast-container {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1050;
    max-width: 300px;
}

.toast-alert {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-bottom: 0.5rem;
    animation: slideIn 0.3s ease-out;
}

.toast-alert.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.toast-alert.alert-error,
.toast-alert.alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.toast-alert.alert-warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.toast-alert.alert-info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.toast-alert .btn-close {
    padding: 0.25rem;
    font-size: 0.7rem;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

.toast-alert.hiding {
    animation: slideOut 0.3s ease-in forwards;
}

/* ==========================================================================
   Mobile Navigation
   ========================================================================== */

@media (max-width: 991.98px) {
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #1f2937;
        padding: 1rem;
        overflow-y: auto;
        z-index: 1050;
    }

    .navbar-collapse.show .navbar-nav,
    .navbar-collapse.collapsing .navbar-nav {
        flex-direction: column !important;
    }

    .navbar-collapse.show .nav-item,
    .navbar-collapse.collapsing .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .navbar-collapse.show .nav-link,
    .navbar-collapse.collapsing .nav-link {
        padding: 0.75rem 0.5rem;
        font-size: 1rem;
    }

    .navbar-collapse.show .dropdown-menu {
        position: static !important;
        background: transparent;
        border: none;
        padding-left: 1rem;
        box-shadow: none;
    }

    .navbar-collapse.show .dropdown-item {
        color: rgba(255,255,255,0.8);
        padding: 0.5rem;
    }

    .navbar-collapse.show .dropdown-item:hover {
        background: rgba(255,255,255,0.1);
        color: white;
    }

    .navbar-collapse.show .dropdown-divider {
        border-color: rgba(255,255,255,0.1);
    }

    .navbar-collapse.show .ms-auto {
        margin-left: 0 !important;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
}

/* ==========================================================================
   Feedback FAB Button

   The button's own geometry lives in layouts/global.css, which positions the
   .feedback-fab-container and has the responsive sizing. A duplicate
   position/size block used to sit here; because base.css loads AFTER
   global.css it beat those media queries, so the FAB never shrank or moved on
   mobile and sat 8px off from the New Entry FAB stacked above it.
   ========================================================================== */

#feedbackModal .btn-group .btn {
    flex: 1;
    font-size: 0.875rem;
    padding: 0.5rem;
}

/* ==========================================================================
   Entry Images
   ========================================================================== */

.entry-image {
    margin: 1rem 0;
}

.entry-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.entry-image figcaption {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.5rem;
    text-align: center;
}

.entry-image-left {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.entry-image-right {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.entry-image-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Clear floats after images */
.entry-content::after {
    content: "";
    display: table;
    clear: both;
}