/* ==========================================================================
   Main Stylesheet — Research Journal Platform
   Mobile-first, CSS custom properties, BEM naming.
   ========================================================================== */

/* ── Design Tokens ─────────────────────────────────────── */
:root {
    --color-primary: #1a73e8;
    --color-primary-dark: #1557b0;
    --color-primary-light: #e8f0fe;
    --color-primary-contrast: #ffffff;

    --color-success: #0f9d58;
    --color-success-light: #e6f4ea;
    --color-warning: #f4b400;
    --color-warning-light: #fef7e0;
    --color-danger: #d93025;
    --color-danger-light: #fce8e6;
    --color-info: #1967d2;
    --color-info-light: #e8f0fe;

    --color-text: #202124;
    --color-text-secondary: #5f6368;
    --color-text-muted: #80868b;
    --color-bg: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #f1f3f4;
    --color-border: #dadce0;
    --color-border-light: #e8eaed;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.75;

    --spacing-xs: 0.25rem;      /* 4px */
    --spacing-sm: 0.5rem;       /* 8px */
    --spacing-md: 1rem;         /* 16px */
    --spacing-lg: 1.5rem;       /* 24px */
    --spacing-xl: 2rem;         /* 32px */
    --spacing-2xl: 3rem;        /* 48px */
    --spacing-3xl: 4rem;        /* 64px */

    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);

    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    --container-max: 1200px;
    --sidebar-width: 260px;

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background: var(--color-bg-secondary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--color-primary-dark); }
h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-tight); color: var(--color-text); }
p { margin-bottom: var(--spacing-md); }

/* ── Skip Link (accessibility) ──────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--spacing-md);
    background: var(--color-primary);
    color: #fff;
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: 10000;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
}
.skip-link:focus {
    top: 0;
}

/* ── Container ──────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ── Grid ────────────────────────────────────────────────── */
.grid {
    display: flex;
    flex-wrap: wrap;
    margin: calc(var(--spacing-md) * -0.5);
}
.grid__col {
    flex: 1 1 100%;
    padding: calc(var(--spacing-md) * 0.5);
}
@media (min-width: 768px) {
    .grid__col--1-2 { flex: 0 0 50%; max-width: 50%; }
    .grid__col--1-3 { flex: 0 0 33.333%; max-width: 33.333%; }
    .grid__col--2-3 { flex: 0 0 66.667%; max-width: 66.667%; }
    .grid__col--1-4 { flex: 0 0 25%; max-width: 25%; }
    .grid__col--3-4 { flex: 0 0 75%; max-width: 75%; }
}

/* ── Site Header ──────────────────────────────────────────── */
.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-md) 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}
.site-header__logo {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text) !important;
    text-decoration: none !important;
    line-height: 0;
}
.site-header__logo-img {
    height: 64px;
    width: auto;
    max-width: 100%;
}
@media (max-width: 480px) {
    .site-header__logo-img { height: 44px; }
}
.site-header__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
}
.site-header__user {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

/* ── Site Main ──────────────────────────────────────────── */
.site-main {
    flex: 1;
    padding: var(--spacing-xl) 0;
}

/* ── Site Footer ──────────────────────────────────────────── */
.site-footer {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-lg) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.625rem 1.25rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--primary {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--secondary {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn--secondary:hover { background: var(--color-bg-tertiary); }
.btn--danger {
    background: var(--color-danger);
    color: #fff;
}
.btn--danger:hover { background: #c5221f; }
.btn--link {
    background: none;
    border: none;
    color: var(--color-primary);
    padding: 0;
    font-size: inherit;
    cursor: pointer;
}
.btn--link:hover { color: var(--color-primary-dark); text-decoration: underline; }
.btn--sm { padding: 0.375rem 0.75rem; font-size: var(--font-size-xs); }
.btn--lg { padding: 0.75rem 1.5rem; font-size: var(--font-size-base); }
.btn--block { width: 100%; }
.btn:disabled, .btn--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Forms ────────────────────────────────────────────────── */
.form__group {
    margin-bottom: var(--spacing-lg);
}
.form__group--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}
.form__label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
}
.form__required { color: var(--color-danger); }
.form__input {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
}
.form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.form__input--error {
    border-color: var(--color-danger);
}
.form__input--error:focus {
    box-shadow: 0 0 0 3px var(--color-danger-light);
}
.form__error {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}
.form__hint {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.form__checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.form__link { font-size: var(--font-size-sm); }
select.form__input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%235f6368'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; }
textarea.form__input { min-height: 120px; resize: vertical; }

/* ── Flash Messages ──────────────────────────────────────── */
.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    border: 1px solid transparent;
}
.flash--success { background: var(--color-success-light); color: #155724; border-color: #c3e6cb; }
.flash--error   { background: var(--color-danger-light);  color: #721c24; border-color: #f5c6cb; }
.flash--warning { background: var(--color-warning-light); color: #856404; border-color: #ffeeba; }
.flash--info    { background: var(--color-info-light);    color: #0c5460; border-color: #bee5eb; }
.flash__close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0 0 0 var(--spacing-md);
}
.flash__close:hover { opacity: 1; }

/* ── Toast Notifications ─────────────────────────────────── */
.toast-container {
    position: fixed;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 400px;
    width: calc(100% - var(--spacing-xl));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-slide-in 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
    border: 1px solid transparent;
    cursor: default;
}
.toast--dismissing {
    animation: toast-slide-out 0.25s ease-in forwards;
}

.toast__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.toast__body {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}

.toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    padding: 0;
    margin-top: -2px;
    color: inherit;
    transition: opacity var(--transition-fast);
}
.toast__close:hover { opacity: 1; }

/* Success */
.toast--success {
    background: #e6f4ea;
    color: #155724;
    border-color: #c3e6cb;
}
.toast--success .toast__icon {
    background: var(--color-success);
    color: #fff;
}

/* Error */
.toast--error {
    background: #fce8e6;
    color: #721c24;
    border-color: #f5c6cb;
}
.toast--error .toast__icon {
    background: var(--color-danger);
    color: #fff;
}

/* Warning */
.toast--warning {
    background: var(--color-warning-light);
    color: #856404;
    border-color: #ffeeba;
}
.toast--warning .toast__icon {
    background: var(--color-warning);
    color: #fff;
}

/* Info */
.toast--info {
    background: var(--color-info-light);
    color: #0c5460;
    border-color: #bee5eb;
}
.toast--info .toast__icon {
    background: var(--color-info);
    color: #fff;
}

@keyframes toast-slide-in {
    from {
        transform: translateX(calc(100% + var(--spacing-md)));
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(calc(100% + var(--spacing-md)));
        opacity: 0;
    }
}

@media (max-width: 575px) {
    .toast-container {
        left: var(--spacing-md);
        right: var(--spacing-md);
        max-width: none;
    }
    @keyframes toast-slide-in {
        from { transform: translateY(-100%); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }
    @keyframes toast-slide-out {
        from { transform: translateY(0); opacity: 1; }
        to   { transform: translateY(-100%); opacity: 0; }
    }
}

/* ── Auth Pages ──────────────────────────────────────────── */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: var(--spacing-xl) 0;
}
.auth-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-2xl);
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow-md);
}
.auth-card--wide { max-width: 640px; }
.auth-card__title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}
.auth-card__subtitle {
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--spacing-xl);
}
.auth-card__footer {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
}

/* ── Tables ───────────────────────────────────────────────── */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.table th {
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}
.table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}
.table tbody tr:hover { background: var(--color-bg-tertiary); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}
.card__header { margin-bottom: var(--spacing-md); }
.card__body   { }
.card__footer {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

/* ── Status Badges ───────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge--pending  { background: #fff3cd; color: #856404; }
.badge--success  { background: #d4edda; color: #155724; }
.badge--danger   { background: #f8d7da; color: #721c24; }
.badge--info     { background: #d1ecf1; color: #0c5460; }
.badge--warning  { background: #fff3cd; color: #856404; }
.badge--neutral  { background: #e8eaed; color: #5f6368; }

/* ── Utilities ───────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--color-text-secondary); }
.text-danger  { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-sm      { font-size: var(--font-size-sm); }
.text-xs      { font-size: var(--font-size-xs); }
.font-medium  { font-weight: var(--font-weight-medium); }
.font-semibold{ font-weight: var(--font-weight-semibold); }
.mt-0 { margin-top: 0; }
.mt-md{ margin-top: var(--spacing-md); }
.mt-lg{ margin-top: var(--spacing-lg); }
.mb-0 { margin-bottom: 0; }
.mb-md{ margin-bottom: var(--spacing-md); }
.mb-lg{ margin-bottom: var(--spacing-lg); }
.flex { display: flex; }
.flex--between { justify-content: space-between; }
.flex--center { align-items: center; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.hidden { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 575px) {
    .auth-card { padding: var(--spacing-lg); }
    .site-header__nav { gap: var(--spacing-sm); flex-wrap: wrap; }
}