/* =========================================================================
   PSHS-CRC STEM Research Advisers' Portal
   Visual identity: "field research log" — index-card layout, stamped
   ratings, ledger-style tables. Evergreen + paper + amber, no template
   cream/terracotta defaults.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
    --ink:        #1D2A35;
    --paper:      #F7F5EE;
    --paper-2:    #EFEBDD;
    --evergreen:  #1B4332;
    --evergreen-d:#12302373;
    --evergreen-dark:#0F2E22;
    --sage:       #8FA998;
    --sage-line:  #CBD8CE;
    --gold:       #C08A2E;
    --gold-light: #F1E1BC;
    --rust:       #A6382C;
    --rust-light: #F4DAD5;
    --blue:       #2C5F8A;
    --blue-light: #D9E6F1;
    --radius: 3px;
    --shadow-card: 0 1px 0 rgba(15,46,34,0.06), 0 8px 20px -14px rgba(15,46,34,0.35);
}

*{ box-sizing:border-box; }

html,body{
    margin:0; padding:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    font-size:15px;
    line-height:1.5;
}

h1,h2,h3,h4{
    font-family:'Fraunces',serif;
    color:var(--evergreen-dark);
    margin:0 0 .4em 0;
    font-weight:600;
    letter-spacing:-0.01em;
}

a{ color:var(--evergreen); text-decoration:none; }
a:hover{ text-decoration:underline; }

code, .mono, .field-date, .stat-num, td.mono{
    font-family:'IBM Plex Mono', monospace;
}

/* ---------------------------------------------------------------------
   Top bar
   --------------------------------------------------------------------- */
.topbar{
    background:var(--evergreen-dark);
    border-bottom:3px solid var(--gold);
}
.topbar-inner{
    max-width:1180px;
    margin:0 auto;
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
}
.brand{ display:flex; flex-direction:column; line-height:1.15; }
.brand-title{
    font-family:'Fraunces',serif;
    color:#F7F5EE;
    font-size:17px;
    font-weight:600;
}
.brand-sub{
    color:var(--gold);
    font-size:11.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-family:'IBM Plex Mono',monospace;
}
.nav{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}
.nav a{
    color:#DCE7DF;
    font-size:13.5px;
    font-weight:500;
}
.nav a:hover{ color:#fff; text-decoration:none; }
.nav-user{
    color:var(--sage);
    font-size:12.5px;
    font-family:'IBM Plex Mono',monospace;
    border-left:1px solid #2C4C3D;
    padding-left:16px;
}
.nav-logout{
    background:var(--gold);
    color:var(--evergreen-dark) !important;
    padding:6px 12px;
    border-radius:var(--radius);
    font-weight:600 !important;
}
.nav-logout:hover{ background:#D6A24A; text-decoration:none !important; }

/* ---------------------------------------------------------------------
   Page wrap
   --------------------------------------------------------------------- */
.page-wrap{
    max-width:1180px;
    margin:0 auto;
    padding:32px 24px 60px;
}

.eyebrow{
    font-family:'IBM Plex Mono',monospace;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:11.5px;
    color:var(--gold);
    font-weight:600;
    margin-bottom:6px;
    display:block;
}

.page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:14px;
    border-bottom:2px solid var(--evergreen-dark);
    padding-bottom:16px;
    margin-bottom:28px;
}
.page-head p{ color:#4B5A52; margin:4px 0 0; max-width:60ch; }

/* ---------------------------------------------------------------------
   Alerts / flash
   --------------------------------------------------------------------- */
.alert{
    padding:12px 16px;
    border-radius:var(--radius);
    margin-bottom:22px;
    font-size:14px;
    border-left:4px solid;
}
.alert-success{ background:#E4EFE6; border-color:var(--evergreen); color:var(--evergreen-dark); }
.alert-error{ background:var(--rust-light); border-color:var(--rust); color:#6E2419; }
.alert-info{ background:var(--blue-light); border-color:var(--blue); color:#1D3E58; }

/* ---------------------------------------------------------------------
   Cards / index-card motif
   --------------------------------------------------------------------- */
.card{
    background:#FFFEFA;
    border:1px solid var(--sage-line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-card);
    padding:24px;
    margin-bottom:24px;
    position:relative;
}
.card::before{
    content:'';
    position:absolute;
    top:0; left:22px;
    width:1px; height:100%;
    background:repeating-linear-gradient(to bottom, transparent, transparent 3px);
}
.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
    margin-bottom:24px;
}
.stat-card{
    background:var(--evergreen-dark);
    color:#F2F0E6;
    border-radius:var(--radius);
    padding:18px 20px;
    border-top:3px solid var(--gold);
}
.stat-card .stat-num{ font-size:30px; font-weight:600; color:#fff; }
.stat-card .stat-label{
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--sage);
}

/* deadline strip */
.deadline-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:14px;
    margin-bottom:26px;
}
.deadline-tile{
    border:1px solid var(--sage-line);
    border-left:4px solid var(--gold);
    background:#fff;
    padding:14px 16px;
    border-radius:var(--radius);
}
.deadline-tile h4{ font-size:14px; margin-bottom:2px; }
.deadline-tile .due{
    font-family:'IBM Plex Mono',monospace;
    color:var(--rust);
    font-size:13px;
}
.deadline-tile .label{
    font-size:12px;
    color:#6C7A72;
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
form .form-row{ margin-bottom:18px; }
label{
    display:block;
    font-weight:600;
    font-size:13px;
    color:var(--evergreen-dark);
    margin-bottom:6px;
}
input[type=text], input[type=email], input[type=password],
input[type=date], input[type=file], select, textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid #C7CFC6;
    border-radius:var(--radius);
    background:#fff;
    font-family:'Inter',sans-serif;
    font-size:14px;
    color:var(--ink);
}
input:focus, select:focus, textarea:focus{
    outline:2px solid var(--gold);
    outline-offset:1px;
    border-color:var(--gold);
}
.hint{ font-size:12px; color:#6C7A72; margin-top:4px; }

.btn{
    display:inline-block;
    padding:10px 20px;
    border-radius:var(--radius);
    border:1px solid transparent;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    font-family:'Inter',sans-serif;
}
.btn-primary{ background:var(--evergreen); color:#fff; }
.btn-primary:hover{ background:var(--evergreen-dark); text-decoration:none; }
.btn-gold{ background:var(--gold); color:var(--evergreen-dark); }
.btn-gold:hover{ background:#D6A24A; text-decoration:none; }
.btn-outline{ background:transparent; border-color:var(--evergreen); color:var(--evergreen); }
.btn-outline:hover{ background:var(--evergreen); color:#fff; text-decoration:none; }
.btn-danger{ background:var(--rust); color:#fff; }
.btn-danger:hover{ background:#8A2C21; text-decoration:none; }
.btn-sm{ padding:6px 12px; font-size:12.5px; }

/* auth pages */
.auth-wrap{
    max-width:420px;
    margin:60px auto;
    background:#fff;
    border:1px solid var(--sage-line);
    border-top:4px solid var(--gold);
    border-radius:var(--radius);
    padding:34px 32px;
    box-shadow:var(--shadow-card);
}
.auth-wrap h1{ font-size:22px; }
.auth-switch{ margin-top:18px; font-size:13.5px; text-align:center; color:#4B5A52; }

/* ---------------------------------------------------------------------
   Tables (the "ledger")
   --------------------------------------------------------------------- */
.table-wrap{ overflow-x:auto; }
table{
    width:100%;
    border-collapse:collapse;
    font-size:13.5px;
    background:#fff;
}
thead th{
    text-align:left;
    background:var(--evergreen-dark);
    color:#EFEBDD;
    padding:10px 12px;
    font-weight:600;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.05em;
}
tbody td{
    padding:10px 12px;
    border-bottom:1px solid #E7E3D4;
    vertical-align:middle;
}
tbody tr:nth-child(even){ background:#FBFAF4; }
tbody tr:hover{ background:var(--gold-light); }

/* ---------------------------------------------------------------------
   Stamp-style rating badges (signature element)
   --------------------------------------------------------------------- */
.stamp{
    display:inline-block;
    font-family:'IBM Plex Mono',monospace;
    font-weight:600;
    font-size:11px;
    letter-spacing:.04em;
    padding:4px 9px;
    border:1.5px solid currentColor;
    border-radius:2px;
    transform:rotate(-2deg);
    text-transform:uppercase;
}
.badge-success{ color:var(--evergreen); background:#E4EFE6; }
.badge-info{ color:var(--blue); background:var(--blue-light); }
.badge-warning{ color:var(--gold); background:var(--gold-light); }
.badge-danger{ color:var(--rust); background:var(--rust-light); }
.badge-pending{ color:#6C7A72; background:#EEEEE6; }

/* status pill (simple, non-rotated) */
.pill{
    display:inline-block;
    font-size:11px;
    padding:3px 9px;
    border-radius:20px;
    font-weight:600;
}
.pill-active{ background:#E4EFE6; color:var(--evergreen); }
.pill-inactive{ background:#EEEEE6; color:#7A8079; }
.pill-released{ background:var(--gold-light); color:var(--gold); }

/* ---------------------------------------------------------------------
   Advisee rating dynamic rows (monthly evaluation)
   --------------------------------------------------------------------- */
.advisee-row{
    display:grid;
    grid-template-columns:1.4fr .7fr 1.6fr 1fr auto;
    gap:10px;
    align-items:end;
    padding:14px;
    background:var(--paper-2);
    border-radius:var(--radius);
    margin-bottom:10px;
    border-left:3px solid var(--sage);
}
.advisee-row .form-row{ margin-bottom:0; }
.remove-row-btn{
    background:transparent;
    border:1px solid var(--rust);
    color:var(--rust);
    border-radius:var(--radius);
    padding:9px 10px;
    cursor:pointer;
    font-size:12px;
}
.remove-row-btn:hover{ background:var(--rust-light); }

/* ---------------------------------------------------------------------
   Section dividers, quick links
   --------------------------------------------------------------------- */
.quick-links{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:16px;
    margin:24px 0;
}
.quick-link{
    display:block;
    padding:18px;
    background:#fff;
    border:1px solid var(--sage-line);
    border-radius:var(--radius);
    transition:border-color .15s;
}
.quick-link:hover{ border-color:var(--gold); text-decoration:none; }
.quick-link .num{
    font-family:'IBM Plex Mono',monospace;
    color:var(--gold);
    font-size:12px;
    letter-spacing:.08em;
}
.quick-link h3{ font-size:15px; margin:6px 0 4px; }
.quick-link p{ font-size:12.5px; color:#6C7A72; margin:0; }

.footer{
    text-align:center;
    padding:22px;
    font-size:12px;
    color:#7A8079;
    border-top:1px solid var(--sage-line);
}

.legend{
    font-size:12.5px;
    color:#4B5A52;
    background:var(--paper-2);
    border-radius:var(--radius);
    padding:12px 16px;
    margin-bottom:20px;
}
.legend strong{ color:var(--evergreen-dark); }

@media (max-width:720px){
    .advisee-row{ grid-template-columns:1fr; }
}