/* =============================================================
   Memory Tree Version 1
   Global Application Stylesheet
   =============================================================

   ARCHITECTURE:
   1. Custom Properties (Design Tokens) ← change visuals here
   2. Base & Reset
   3. Typography
   4. Layout
   5. Navigation
   6. Buttons
   7. Forms
   8. Flash Messages
   9. Cards
   10. Avatar
   11. People
   12. Relationships
   13. Groups
   14. Media & Gallery
   15. Events
   16. Timeline
   17. Search
   18. Dashboard
   19. Tables
   20. Login
   21. Utilities
   ============================================================= */


/* =============================================================
   1. CUSTOM PROPERTIES — Design Tokens
   Change visual appearance here. All styles below reference
   these variables — nothing is hardcoded.
   ============================================================= */

:root {

    /* ----------------------------------------------------------
       Brand Colors
    ---------------------------------------------------------- */
    --color-brand-primary:        #2c6fad;
    --color-brand-primary-dark:   #245d93;
    --color-brand-primary-light:  #e8f0fb;

    /* ----------------------------------------------------------
       UI Surface Colors
    ---------------------------------------------------------- */
    --color-bg-page:              #f4f6f8;
    --color-bg-card:              #ffffff;
    --color-bg-input:             #ffffff;
    --color-bg-header:            #1a1a2e;
    --color-bg-footer:            #1a1a2e;
    --color-bg-table-header:      #f0f4f8;
    --color-bg-hover:             #f8fafc;
    --color-bg-secondary-btn:     #e8edf2;
    --color-bg-tag:               #e8edf2;
    --color-bg-empty-state:       #ffffff;

    /* ----------------------------------------------------------
       Text Colors
    ---------------------------------------------------------- */
    --color-text-primary:         #222222;
    --color-text-heading:         #1a1a2e;
    --color-text-secondary:       #444444;
    --color-text-muted:           #666666;
    --color-text-faint:           #888888;
    --color-text-inverse:         #ffffff;
    --color-text-nav:             #ffffff;
    --color-text-footer:          #8899aa;
    --color-text-label:           #334155;
    --color-text-table-header:    #445566;
    --color-text-secondary-btn:   #334155;
    --color-text-tag:             #445566;

    /* ----------------------------------------------------------
       Border Colors
    ---------------------------------------------------------- */
    --color-border-default:       #e8edf2;
    --color-border-input:         #ccd5de;
    --color-border-input-focus:   #2c6fad;
    --color-border-section:       #dde3ea;
    --color-border-empty:         #ccd5de;
    --color-border-table:         #f0f2f4;
    --color-border-card-header:   #eeeeee;
    --color-border-form-actions:  #eeeeee;
    --color-border-divider:       #eeeeee;
    --color-border-timeline:      #dde3ea;
    --color-border-event-accent:  #2c6fad;

    /* ----------------------------------------------------------
       Semantic / Status Colors
    ---------------------------------------------------------- */
    --color-success-bg:           #edf7ed;
    --color-success-border:       #b7dfb9;
    --color-success-text:         #256029;

    --color-error-bg:             #fdecea;
    --color-error-border:         #f5c2c0;
    --color-error-text:           #b42318;

    --color-warning-bg:           #fff4e5;
    --color-warning-border:       #ffd8a8;
    --color-warning-text:         #9a6700;

    --color-info-bg:              #e8f4fd;
    --color-info-border:          #b6e0fe;
    --color-info-text:            #0c5460;

    --color-danger-btn:           #c0392b;
    --color-danger-btn-dark:      #a93226;

    /* ----------------------------------------------------------
       Typography
    ---------------------------------------------------------- */
    --font-family-base:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;
    --font-size-base:             16px;
    --font-size-sm:               0.85rem;
    --font-size-xs:               0.82rem;
    --font-size-nav:              0.88rem;
    --font-size-label:            0.9rem;
    --font-size-hint:             0.82rem;
    --font-size-badge:            0.78rem;
    --font-size-footer:           0.82rem;
    --line-height-base:           1.6;

    --font-size-h1:               1.8rem;
    --font-size-h2:               1.4rem;
    --font-size-h3:               1.15rem;
    --font-size-h4:               1rem;

    /* ----------------------------------------------------------
       Spacing
    ---------------------------------------------------------- */
    --space-xs:                   4px;
    --space-sm:                   8px;
    --space-md:                   16px;
    --space-lg:                   24px;
    --space-xl:                   32px;
    --space-2xl:                  40px;

    --padding-card:               20px;
    --padding-form-wrapper:       30px;
    --padding-main:               30px;
    --padding-header:             0 30px;
    --padding-section-header:     10px;
    --padding-input:              9px 12px;
    --padding-btn:                9px 18px;
    --padding-btn-small:          5px 12px;
    --padding-flash:              13px 16px;
    --padding-nav-link:           6px 10px;

    --gap-card-grid:              18px;
    --gap-people-grid:            18px;
    --gap-media-gallery:          14px;
    --gap-two-col:                24px;
    --gap-three-col:              20px;
    --gap-button-group:           10px;
    --gap-nav:                    4px;

    /* ----------------------------------------------------------
       Sizing
    ---------------------------------------------------------- */
    --max-width-content:          1100px;
    --max-width-form:             600px;
    --height-header:              60px;

    --avatar-size-large:          100px;
    --avatar-size-default:        60px;
    --avatar-size-small:          40px;
    --avatar-font-large:          2rem;
    --avatar-font-default:        1.3rem;
    --avatar-font-small:          0.95rem;

    --media-card-img-height:      140px;
    --media-card-min-width:       180px;
    --people-card-min-width:      240px;
    --card-grid-min-width:        260px;
    --stat-card-min-width:        140px;
    --dashboard-stats-min-width:  140px;

    --timeline-line-left:         8px;
    --timeline-line-width:        2px;
    --timeline-dot-size:          12px;
    --timeline-padding-left:      28px;
    --timeline-dot-offset:        -24px;

    /* ----------------------------------------------------------
       Borders & Radius
    ---------------------------------------------------------- */
    --radius-sm:                  4px;
    --radius-md:                  6px;
    --radius-lg:                  8px;
    --radius-xl:                  10px;
    --radius-pill:                20px;
    --radius-circle:              50%;

    --border-width-default:       1px;
    --border-width-event-accent:  4px;
    --border-width-upload:        2px;
    --border-style-upload:        dashed;

    /* ----------------------------------------------------------
       Shadows
    ---------------------------------------------------------- */
    --shadow-card:                0 1px 4px rgba(0,0,0,0.08);
    --shadow-card-hover:          0 3px 10px rgba(0,0,0,0.12);
    --shadow-header:              0 2px 6px rgba(0,0,0,0.2);
    --shadow-login:               0 4px 20px rgba(0,0,0,0.1);
    --shadow-media-detail:        0 2px 8px rgba(0,0,0,0.12);
    --shadow-input-focus:         0 0 0 3px rgba(44,111,173,0.12);
    --shadow-timeline-dot:        0 0 0 2px #2c6fad;

    /* ----------------------------------------------------------
       Transitions
    ---------------------------------------------------------- */
    --transition-default:         0.15s;
}


/* =============================================================
   2. BASE & RESET
   ============================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--color-bg-page);
    color: var(--color-text-primary);
    line-height: var(--line-height-base);
    min-height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-brand-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* =============================================================
   3. TYPOGRAPHY
   ============================================================= */

h1 { font-size: var(--font-size-h1); font-weight: 700; margin-bottom: 0.5rem; color: var(--color-text-heading); }
h2 { font-size: var(--font-size-h2); font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text-heading); }
h3 { font-size: var(--font-size-h3); font-weight: 600; margin-bottom: 0.4rem; color: var(--color-text-heading); }
h4 { font-size: var(--font-size-h4); font-weight: 600; margin-bottom: 0.3rem; color: var(--color-text-secondary); }

p {
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
}

small {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}


/* =============================================================
   4. LAYOUT
   ============================================================= */

.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    padding: var(--padding-main);
    max-width: var(--max-width-content);
    margin: 0 auto;
    width: 100%;
}

.page-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: var(--border-width-default) solid var(--color-border-section);
}

.page-header h1 { margin-bottom: var(--space-xs); }

.page-header p {
    color: var(--color-text-muted);
    margin: 0;
}

.section { margin-bottom: 36px; }

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    padding-bottom: var(--padding-section-header);
    border-bottom: var(--border-width-default) solid var(--color-border-card-header);
}

.section-header h2 { margin: 0; }

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-two-col);
}

.three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-three-col);
}

@media (max-width: 768px) {
    main { padding: var(--space-md); }
    .two-col { grid-template-columns: 1fr; }
    .three-col { grid-template-columns: 1fr; }
}


/* =============================================================
   5. NAVIGATION
   ============================================================= */

header {
    background-color: var(--color-bg-header);
    color: var(--color-text-inverse);
    padding: 0;
    box-shadow: var(--shadow-header);
}

.header-inner {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: var(--padding-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--height-header);
}

.header-brand {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-inverse);
    letter-spacing: 0.02em;
    text-decoration: none;
}

.header-brand:hover {
    text-decoration: none;
    color: #a8c8f0;
}

nav {
    display: flex;
    align-items: center;
    gap: var(--gap-nav);
    flex-wrap: wrap;
}

nav a {
    color: var(--color-text-nav);
    text-decoration: none;
    padding: var(--padding-nav-link);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-nav);
    transition: background-color var(--transition-default), color var(--transition-default);
}

nav a:hover {
    background-color: rgba(255,255,255,0.1);
    color: var(--color-text-inverse);
    text-decoration: none;
}

nav a.nav-active {
    background-color: rgba(255,255,255,0.15);
    color: var(--color-text-inverse);
}

nav a.nav-logout { color: #f0a8a8; }

nav a.nav-logout:hover {
    background-color: rgba(240,100,100,0.15);
    color: #ffcccc;
}

@media (max-width: 768px) {
    .header-inner {
        flex-direction: column;
        height: auto;
        padding: 12px 16px;
        gap: var(--space-sm);
    }
    nav { justify-content: center; }
}


/* =============================================================
   6. FOOTER
   ============================================================= */

footer {
    background-color: var(--color-bg-footer);
    color: var(--color-text-footer);
    padding: var(--space-md) 30px;
    text-align: center;
    font-size: var(--font-size-footer);
    margin-top: auto;
}


/* =============================================================
   7. BUTTONS
   ============================================================= */

.button,
button,
input[type="submit"] {
    display: inline-block;
    padding: var(--padding-btn);
    font-size: var(--font-size-label);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-default), box-shadow var(--transition-default);
    line-height: 1.4;
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
}

.button:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--color-brand-primary-dark);
    text-decoration: none;
    color: var(--color-text-inverse);
}

.button-secondary {
    background-color: var(--color-bg-secondary-btn);
    color: var(--color-text-secondary-btn);
}

.button-secondary:hover {
    background-color: #d8e0ea;
    color: var(--color-text-heading);
}

.button-danger {
    background-color: var(--color-danger-btn);
    color: var(--color-text-inverse);
}

.button-danger:hover {
    background-color: var(--color-danger-btn-dark);
    color: var(--color-text-inverse);
}

.button-small {
    padding: var(--padding-btn-small);
    font-size: var(--font-size-xs);
}

.button-group {
    display: flex;
    gap: var(--gap-button-group);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-md);
}


/* =============================================================
   8. FORMS
   ============================================================= */

.form-wrapper {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--padding-form-wrapper);
    box-shadow: var(--shadow-card);
    max-width: var(--max-width-form);
}

.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-label);
    color: var(--color-text-label);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--padding-input);
    border: var(--border-width-default) solid var(--color-border-input);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: var(--color-text-primary);
    background: var(--color-bg-input);
    transition: border-color var(--transition-default), box-shadow var(--transition-default);
    font-family: var(--font-family-base);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-border-input-focus);
    box-shadow: var(--shadow-input-focus);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.form-hint {
    font-size: var(--font-size-hint);
    color: var(--color-text-faint);
    margin-top: var(--space-xs);
}

.form-error {
    font-size: 0.83rem;
    color: var(--color-error-text);
    margin-top: 5px;
}

.form-input-error { border-color: var(--color-error-text) !important; }

.form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: var(--space-lg);
    padding-top: 20px;
    border-top: var(--border-width-default) solid var(--color-border-form-actions);
}


/* =============================================================
   9. FLASH MESSAGES
   ============================================================= */

.flash-message {
    padding: var(--padding-flash);
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
    border: var(--border-width-default) solid transparent;
    font-size: 0.92rem;
    line-height: var(--line-height-base);
}

.flash-success {
    background-color: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

.flash-error {
    background-color: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error-text);
}

.flash-warning {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

.flash-info {
    background-color: var(--color-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info-text);
}


/* =============================================================
   10. CARDS
   ============================================================= */

.card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--padding-card);
    box-shadow: var(--shadow-card);
    border: var(--border-width-default) solid var(--color-border-default);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: var(--border-width-default) solid var(--color-border-card-header);
}

.card-header h2,
.card-header h3 { margin: 0; }

.card + .card { margin-top: var(--space-md); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min-width), 1fr));
    gap: var(--gap-card-grid);
}

.empty-state {
    padding: 36px 20px;
    text-align: center;
    color: var(--color-text-faint);
    background: var(--color-bg-empty-state);
    border-radius: var(--radius-lg);
    border: var(--border-width-default) dashed var(--color-border-empty);
}

.empty-state p {
    margin-bottom: 14px;
    color: var(--color-text-faint);
}


/* =============================================================
   11. AVATAR
   ============================================================= */

.avatar {
    width: var(--avatar-size-default);
    height: var(--avatar-size-default);
    border-radius: var(--radius-circle);
    object-fit: cover;
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--avatar-font-default);
    font-weight: 700;
    flex-shrink: 0;
}

.avatar-large {
    width: var(--avatar-size-large);
    height: var(--avatar-size-large);
    font-size: var(--avatar-font-large);
}

.avatar-small {
    width: var(--avatar-size-small);
    height: var(--avatar-size-small);
    font-size: var(--avatar-font-small);
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-circle);
    object-fit: cover;
}

.person-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.person-row .avatar { flex-shrink: 0; }

.person-info { flex: 1; }

.person-info strong {
    display: block;
    font-size: 1rem;
    color: var(--color-text-heading);
}

.person-info small { color: var(--color-text-muted); }


/* =============================================================
   12. PEOPLE
   ============================================================= */

.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--people-card-min-width), 1fr));
    gap: var(--gap-people-grid);
}

.person-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-card);
    border: var(--border-width-default) solid var(--color-border-default);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    transition: box-shadow var(--transition-default);
}

.person-card:hover { box-shadow: var(--shadow-card-hover); }

.person-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.person-card-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text-heading);
}

.person-card-meta {
    font-size: 0.83rem;
    color: var(--color-text-muted);
}

.person-card-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.profile-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
    border: var(--border-width-default) solid var(--color-border-default);
    margin-bottom: var(--space-lg);
}

.profile-header-info { flex: 1; }

.profile-header-info h1 { margin-bottom: var(--space-sm); }

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.tag {
    background: var(--color-bg-tag);
    color: var(--color-text-tag);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 500;
}


/* =============================================================
   13. RELATIONSHIPS
   ============================================================= */

.relationship-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.relationship-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    border: var(--border-width-default) solid var(--color-border-default);
    box-shadow: var(--shadow-card);
}

.relationship-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.relationship-type-badge {
    background: var(--color-brand-primary-light);
    color: var(--color-brand-primary);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
}

.relationship-item-actions {
    display: flex;
    gap: var(--space-sm);
}


/* =============================================================
   14. GROUPS
   ============================================================= */

.group-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-card);
    border: var(--border-width-default) solid var(--color-border-default);
    transition: box-shadow var(--transition-default);
}

.group-card:hover { box-shadow: var(--shadow-card-hover); }

.group-card h3 { margin-bottom: var(--space-sm); }

.group-card p {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.member-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--color-bg-hover);
    border-radius: var(--radius-md);
    border: var(--border-width-default) solid var(--color-border-card-header);
}

.member-item-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}


/* =============================================================
   15. MEDIA & GALLERY
   ============================================================= */

.media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--media-card-min-width), 1fr));
    gap: var(--gap-media-gallery);
}

.media-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: var(--border-width-default) solid var(--color-border-default);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-default);
}

.media-card:hover { box-shadow: var(--shadow-card-hover); }

.media-card img {
    width: 100%;
    height: var(--media-card-img-height);
    object-fit: cover;
}

.media-card-body { padding: 10px 12px; }

.media-card-body p {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-detail-image {
    max-width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-media-detail);
    margin-bottom: var(--space-md);
}

.upload-area {
    border: var(--border-width-upload) var(--border-style-upload) var(--color-border-input);
    border-radius: var(--radius-lg);
    padding: 36px;
    text-align: center;
    background: var(--color-bg-hover);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}


/* =============================================================
   16. EVENTS
   ============================================================= */

.event-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.event-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-card);
    border: var(--border-width-default) solid var(--color-border-default);
    border-left: var(--border-width-event-accent) solid var(--color-border-event-accent);
    transition: box-shadow var(--transition-default);
}

.event-card:hover { box-shadow: var(--shadow-card-hover); }

.event-card h3 { margin-bottom: var(--space-xs); }

.event-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.event-meta span { margin-right: 14px; }

.participant-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.participant-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 12px;
    background: var(--color-bg-hover);
    border-radius: var(--radius-md);
    border: var(--border-width-default) solid var(--color-border-card-header);
}


/* =============================================================
   17. TIMELINE
   ============================================================= */

.timeline {
    position: relative;
    padding-left: var(--timeline-padding-left);
}

.timeline::before {
    content: '';
    position: absolute;
    left: var(--timeline-line-left);
    top: 0;
    bottom: 0;
    width: var(--timeline-line-width);
    background: var(--color-border-timeline);
}

.timeline-item {
    position: relative;
    margin-bottom: var(--space-lg);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: var(--timeline-dot-offset);
    top: 6px;
    width: var(--timeline-dot-size);
    height: var(--timeline-dot-size);
    border-radius: var(--radius-circle);
    background: var(--color-brand-primary);
    border: 2px solid var(--color-bg-card);
    box-shadow: var(--shadow-timeline-dot);
}

.timeline-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-card);
    border: var(--border-width-default) solid var(--color-border-default);
}

.timeline-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.timeline-card-header h3 {
    margin: 0;
    font-size: 0.98rem;
}

.timeline-date {
    font-size: 0.82rem;
    color: var(--color-text-faint);
    white-space: nowrap;
    margin-left: 12px;
}

.timeline-type-badge {
    display: inline-block;
    background: var(--color-bg-hover);
    color: #556;
    padding: 2px var(--space-sm);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.timeline-description {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    margin: 0;
}


/* =============================================================
   18. SEARCH
   ============================================================= */

.search-bar {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.search-bar input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: var(--border-width-default) solid var(--color-border-input);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-family: var(--font-family-base);
}

.search-bar input[type="text"]:focus {
    outline: none;
    border-color: var(--color-border-input-focus);
    box-shadow: var(--shadow-input-focus);
}

.search-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-faint);
    margin-bottom: 12px;
    margin-top: var(--space-lg);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    border: var(--border-width-default) solid var(--color-border-default);
    margin-bottom: var(--space-sm);
    transition: box-shadow var(--transition-default);
}

.search-result-item:hover { box-shadow: var(--shadow-card-hover); }

.search-result-info { flex: 1; }

.search-result-info strong {
    display: block;
    color: var(--color-text-heading);
}

.search-result-info small { color: var(--color-text-faint); }


/* =============================================================
   19. DASHBOARD
   ============================================================= */

.dashboard-search { margin-bottom: 28px; }

.dashboard-search .search-bar { margin: 0; }

.dashboard-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: 28px;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--dashboard-stats-min-width), 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
    text-align: center;
    box-shadow: var(--shadow-card);
    border: var(--border-width-default) solid var(--color-border-default);
}

.stat-card .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-brand-primary);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.stat-card .stat-label {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}


/* =============================================================
   20. TABLES
   ============================================================= */

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.data-table th {
    background: var(--color-bg-table-header);
    padding: 11px 14px;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-table-header);
    border-bottom: var(--border-width-default) solid var(--color-border-section);
}

.data-table td {
    padding: 11px 14px;
    border-bottom: var(--border-width-default) solid var(--color-border-table);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }

.data-table tr:hover td { background-color: var(--color-bg-hover); }


/* =============================================================
   21. LOGIN PAGE
   ============================================================= */

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-page);
    padding: var(--space-md);
}

.login-box {
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-login);
}

.login-box h1 {
    text-align: center;
    margin-bottom: var(--space-sm);
    font-size: 1.6rem;
}

.login-box .login-subtitle {
    text-align: center;
    color: var(--color-text-faint);
    margin-bottom: 28px;
    font-size: 0.9rem;
}


/* =============================================================
   22. UTILITIES
   ============================================================= */

.text-muted   { color: var(--color-text-muted); }
.text-danger  { color: var(--color-error-text); }
.text-success { color: var(--color-success-text); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: var(--space-sm); }
.mt-2  { margin-top: var(--space-md); }
.mt-3  { margin-top: var(--space-lg); }
.mt-4  { margin-top: var(--space-xl); }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--space-sm); }
.mb-2  { margin-bottom: var(--space-md); }
.mb-3  { margin-bottom: var(--space-lg); }
.mb-4  { margin-bottom: var(--space-xl); }

.d-flex       { display: flex; }
.align-center { align-items: center; }
.gap-1        { gap: var(--space-sm); }
.gap-2        { gap: var(--space-md); }
.flex-1       { flex: 1; }

.divider {
    border: none;
    border-top: var(--border-width-default) solid var(--color-border-divider);
    margin: var(--space-lg) 0;
}

.badge {
    display: inline-block;
    padding: 2px var(--space-sm);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-badge);
    font-weight: 600;
    background: var(--color-bg-secondary-btn);
    color: var(--color-text-tag);
}

.badge-blue   { background: var(--color-brand-primary-light); color: var(--color-brand-primary); }
.badge-green  { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-red    { background: var(--color-error-bg); color: var(--color-error-text); }
.badge-yellow { background: var(--color-warning-bg); color: var(--color-warning-text); }


/* =============================================================
   23. FIELD HINTS
   Floating tooltip triggered by the ⓘ icon next to labels.
   Hover to preview; click to pin open; click again or click
   outside to dismiss. Zero page-layout shift.
   ============================================================= */

.label-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: var(--space-sm);
}

.label-row label {
    margin-bottom: 0;
}

.hint-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-circle);
    background: var(--color-brand-primary-light);
    color: var(--color-brand-primary);
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    cursor: pointer;
    border: none;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    top: -2px;   /* superscript lift above the label baseline */
    transition: background-color var(--transition-default), color var(--transition-default);
    user-select: none;
}

.hint-trigger:hover {
    background: var(--color-brand-primary);
    color: var(--color-text-inverse);
}

/* Single shared floating tooltip — created once by JS */
#hint-tooltip {
    position: fixed;
    z-index: 9999;
    max-width: 280px;
    padding: 8px 11px;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    pointer-events: none;
    display: none;
    white-space: normal;
}

/* ── Multi-select lists ──────────────────────────────────────── */
select.multi-select {
    min-height: 110px;   /* show ~5 items without scrolling */
    padding: 4px;
}
select.multi-select option {
    padding: 4px 6px;
    border-radius: 2px;
}
select.multi-select option:checked {
    background: var(--color-brand-primary);
    color: var(--color-text-inverse);
}