/* admin/style.css — shared styling for the admin dashboard */

:root {
    --rotary-blue:       #17458F;
    --rotary-blue-dark:  #0B2C63;
    --rotary-blue-soft:  #EAF0FA;
    --rotary-gold:       #F7A81B;
    --ink:               #13213A;
    --ink-soft:          #475569;
    --muted:             #667085;
    --line:              #D9E1EC;
    --soft-bg:           #F5F8FC;
    --danger:            #C81E1E;
    --success:           #16794A;
    --radius:            14px;
    --shadow:            0 12px 28px rgba(11, 44, 99, 0.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    background: var(--soft-bg);
    color: var(--ink);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ----- topbar ----- */
.topbar {
    background: var(--rotary-blue);
    color: #FFFFFF;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
}
.topbar .brand { font-weight: 800; font-size: 16px; letter-spacing: 0.3px; }
.topbar .brand a { color: #FFFFFF; text-decoration: none; }
.topbar .user { font-size: 13px; opacity: 0.92; display: flex; gap: 18px; align-items: center; }
.topbar .user a { color: #FFFFFF; text-decoration: none; opacity: 0.85; }
.topbar .user a:hover { opacity: 1; text-decoration: underline; }

/* ----- container ----- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 20px;
}

h1 {
    font-size: 24px;
    color: var(--rotary-blue);
    font-weight: 800;
    margin: 0 0 4px;
}
.subtitle { color: var(--ink-soft); font-size: 14px; margin: 0 0 24px; }

h2 {
    font-size: 16px;
    color: var(--rotary-blue);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 28px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
h2::after {
    content: "";
    flex: 0 0 60px;
    height: 3px;
    background: var(--rotary-gold);
    border-radius: 2px;
}

/* ----- flash ----- */
.flash {
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    border-left: 5px solid var(--success);
    background: #ECFDF5;
    color: #064E3B;
    font-weight: 600;
    font-size: 14px;
}
.flash.error { border-left-color: var(--danger); background: #FEF2F2; color: #7F1D1D; }
.flash.info  { border-left-color: var(--rotary-blue); background: var(--rotary-blue-soft); color: var(--rotary-blue-dark); }

/* ----- cards (file import) ----- */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}
.card {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.card .card-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.card .card-title { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0; }
.card .card-source { font-size: 12px; color: var(--muted); margin: 4px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.card .card-status {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--soft-bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}
.card .card-status.ready { background: #DCFCE7; color: #065F46; border-color: #BBF7D0; }
.card .card-status.empty { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.card .card-stats { display: flex; gap: 14px; font-size: 13px; color: var(--ink-soft); }
.card .card-stat { display: flex; flex-direction: column; }
.card .card-stat strong { font-size: 18px; color: var(--rotary-blue); font-weight: 800; }
.card .card-stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

.upload-form { margin-top: 6px; }
.upload-form input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1.5px dashed var(--line);
    border-radius: 10px;
    background: var(--soft-bg);
    font-size: 13px;
    cursor: pointer;
}
.upload-form input[type="file"]:hover { border-color: var(--rotary-blue); background: #FFFFFF; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--rotary-blue);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s ease, transform .1s ease;
}
.btn:hover { background: var(--rotary-blue-dark); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn.btn-gold { background: var(--rotary-gold); color: #1A1A1A; }
.btn.btn-gold:hover { background: #D88D08; }
.btn.btn-ghost { background: transparent; color: var(--rotary-blue); border: 1.5px solid var(--rotary-blue); }
.btn.btn-ghost:hover { background: var(--rotary-blue-soft); }
.btn.btn-danger { background: var(--danger); }
.btn.btn-danger:hover { background: #991B1B; }
.btn.btn-small { padding: 7px 12px; font-size: 12px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.coming-soon { font-size: 12px; color: var(--muted); padding: 8px 0; font-style: italic; }

/* ----- login ----- */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #FFFFFF, var(--rotary-blue-soft));
}
.login-card {
    background: #FFFFFF;
    border-radius: var(--radius);
    padding: 32px 30px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 50px rgba(11,44,99,.16);
    border: 1px solid var(--line);
}
.login-card .logo { text-align: center; margin-bottom: 18px; }
.login-card .logo span { font-size: 18px; font-weight: 800; color: var(--rotary-blue); letter-spacing: 0.4px; }
.login-card h1 { text-align: center; font-size: 18px; margin-bottom: 6px; }
.login-card .subtitle { text-align: center; margin-bottom: 22px; }

.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink); }
.field input {
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: var(--soft-bg);
    color: var(--ink);
    transition: border-color .12s ease, background .12s ease;
}
.field input:focus { outline: none; border-color: var(--rotary-blue); background: #FFFFFF; }

/* ----- preview ----- */
.preview-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.preview-stat {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    text-align: center;
}
.preview-stat .big { font-size: 28px; font-weight: 800; color: var(--rotary-blue); display: block; line-height: 1; margin-bottom: 6px; }
.preview-stat .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.preview-stat.added .big   { color: var(--success); }
.preview-stat.updated .big { color: var(--rotary-gold); }
.preview-stat.removed .big { color: var(--danger); }
.preview-stat.unchanged .big { color: var(--muted); }

.preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #FFFFFF;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.preview-table th, .preview-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.preview-table th { background: var(--rotary-blue-soft); color: var(--rotary-blue); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.preview-table tr:last-child td { border-bottom: none; }

/* ----- history table ----- */
.history { margin-top: 30px; }
.history-table {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    font-size: 13px;
}
.history-table th, .history-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.history-table th { background: var(--rotary-blue-soft); color: var(--rotary-blue); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.history-table tr:last-child td { border-bottom: none; }
.history-empty { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 13px; }

@media (max-width: 700px) {
    .container { padding: 18px 14px; }
    .cards { grid-template-columns: 1fr; }
}