/* Training Portal styling — structurally and visually matched to
   arservicepaws.org's paws.css: same color palette, same header/nav
   layout pattern (centered logo header, sidebar nav on desktop),
   same fonts, same button/alert/form visual language, same
   accessibility touches. All existing class names used throughout
   the app's PHP files are kept exactly as they were -- only the
   visual rules applied to them changed, so nothing else needed to
   be touched to bring this into alignment. */

:root {
    --bg-page: #5280C5;
    --page-text: #003366;
    --panel-bg: #F0F0F0;
    --header-bg: #000066;
    --muted: #AEC3E3;
    --accent: #3262A3;
    --white: #FFF;
    --card-bg: #EAEAEA;
    --form-bg: #f1ecdf;
    --error: #e66262;
    --error-text: #fff;
    --success: #9fd2a1;
    --success-text: #3d503d;
    --info-bg: #eaf2fb;
    --info-text: #2452a0;
    --flag-bg: #fff8e6;
    --radius: 4px;
    --gap: 1rem;
    --max-content-width: 1200px;
    --type-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --type-serif: Georgia, "Times New Roman", serif;
}

html { box-sizing: border-box; font-family: var(--type-ui); color: var(--page-text); background: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
    h1 { animation: none; }
    * { transition: none !important; animation: none !important; }
}

/* Skip-to-content -- accessibility, matches main site exactly */
.skip-to-content {
    position: absolute; top: -100%; left: 0;
    background: #003366; color: #fff; padding: 10px 20px;
    font-weight: bold; z-index: 9999; text-decoration: none; border-radius: 0 0 4px 0;
}
.skip-to-content:focus { top: 0; }

/* Impersonation banner -- portal-specific, no main-site equivalent,
   styled to sit comfortably alongside the shared palette */
.impersonation-banner {
    background: #e0b94a; color: #3a2e00; text-align: center;
    padding: 8px; font-weight: 600;
}
.impersonation-banner a { color: #3a2e00; text-decoration: underline; }

/* Container -- same pattern as main site's #wrapper */
#wrapper {
    background: var(--panel-bg);
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0;
}

/* Header -- centered logo, serif title, same treatment as main site */
.site-header {
    background-color: var(--header-bg);
    color: var(--white);
    font-family: var(--type-serif);
    padding: 1rem;
    text-align: center;
}
.site-header .brand { display: inline-block; text-decoration: none; }
.site-header .logo { height: 64px; width: auto; display: inline-block; }
.site-header h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
    margin: .25rem 0;
    text-shadow: 3px 3px 3px #ccc;
    color: var(--white);
    animation: fadein 5s ease-out forwards;
}
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }

/* Navigation -- stacked list, becomes a left sidebar on desktop,
   same structural idea as the main site (adapted since the portal's
   nav has many more, role-dependent items) */
.site-nav { text-align: center; }
.nav-list {
    display: flex; flex-direction: column; gap: .25rem;
    font-size: 1.05rem; list-style: none; margin: 0; padding: 0;
}
.nav-item { border-bottom: 1px solid var(--muted); padding: .5rem 0; }
.nav-item a { color: var(--header-bg); text-decoration: none; }
.nav-item a:hover, .nav-item a:focus { color: var(--accent); outline-offset: 3px; }

@media (min-width: 1024px) {
    @supports (display: grid) {
        #wrapper {
            display: grid;
            grid-template-columns: 200px 1fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas: "header header" "nav main" "footer footer";
            gap: var(--gap);
        }
        .site-header { grid-area: header; }
        .site-nav { grid-area: nav; align-self: start; text-align: left; }
        .page { grid-area: main; }
        .sitefooter { grid-area: footer; }
        .nav-list { font-weight: 600; padding-top: .5rem; }
    }
}

/* Main content -- bordered panel like the main site's <main> */
.page {
    background: var(--white);
    border: 1px solid var(--muted);
    max-width: 1000px;
    margin: 20px auto 60px;
    padding: 1rem 2rem;
    overflow: auto;
}
@media (min-width: 1024px) {
    .page { margin: 0; max-width: none; }
}

h1, h2, h3 { font-family: var(--type-serif); color: var(--header-bg); }
.page > h1:first-child { margin-top: 0; text-shadow: 2px 2px 2px #ccc; }

/* Cards -- the portal's equivalent of the main site's <section> */
.card {
    background: var(--card-bg);
    border: 1px solid var(--muted);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.card.narrow { max-width: 420px; margin-left: auto; margin-right: auto; }

/* Forms -- matched to the main site's .input-field/.form-container look */
label {
    display: block;
    color: #75726c;
    font-weight: 600;
    margin-top: 14px;
    margin-bottom: 4px;
    font-size: 0.92rem;
}
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], input[type=datetime-local],
textarea, select {
    width: 100%;
    padding: .6rem;
    border: 1px solid #e0dfdf;
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}
textarea { resize: vertical; }
.hint { font-size: 0.82rem; color: #6b7280; margin-top: 4px; }

/* Buttons -- same visual language as the main site's single
   .btn-submit style, split into primary/secondary/small variants
   since the portal genuinely needs differentiated prominence */
.btn {
    display: inline-block;
    padding: .6rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid #8c8880;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.btn:focus { outline: 3px solid rgba(0,0,0,.15); outline-offset: 2px; }
.btn-primary { background: var(--header-bg); border-color: var(--header-bg); color: #fff; margin-top: 18px; }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-secondary { background: #9e9a91; border-color: #8c8880; color: #fff; margin-top: 10px; }
.btn-secondary:hover { background: #8c8880; }
.btn-small { padding: .35rem .7rem; font-size: 0.82rem; background: var(--muted); border-color: var(--muted); color: var(--page-text); }
.inline-form { display: inline-block; margin-right: 6px; }

/* Alerts -- colors matched exactly to the main site's
   .errorMessage/.successMessage; .alert-info is a portal-only
   addition (the main site has no equivalent) using the accent hue */
.alert {
    padding: .5rem .75rem;
    border-radius: var(--radius);
    margin: 14px 0;
    font-size: 0.95rem;
}
.alert-error { background: var(--error); border: 1px solid #AA4502; color: var(--error-text); }
.alert-success { background: var(--success); border: 1px solid #91bf93; color: var(--success-text); }
.alert-info { background: var(--info-bg); color: var(--info-text); border: 1px solid #c8ddf5; }

.muted { color: #6b7280; font-size: 0.9rem; }

/* Tables -- bordered like the main site's table styling */
.totals-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.totals-table th, .totals-table td {
    text-align: left;
    padding: .5rem;
    border: 1px solid #000033;
    font-size: 0.94rem;
}
.totals-table th { background: var(--muted); color: var(--header-bg); font-weight: 600; }

.big-total { font-size: 2.4rem; font-weight: 800; color: var(--header-bg); margin: 6px 0 0; font-family: var(--type-serif); }

.category-block {
    border: 1px solid var(--muted);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-top: 14px;
    background: var(--panel-bg);
}
.category-block legend { font-weight: 700; padding: 0 6px; color: var(--header-bg); }

.command-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-top: 10px; }
.command-row { display: flex; align-items: center; gap: 6px; font-weight: normal; }

.log-card { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--muted); }
.log-card-header { margin-bottom: 8px; }
.log-card.flagged { border-left: 4px solid #e0b94a; background: var(--flag-bg); padding-left: 12px; }
.card.flagged { border-left: 4px solid #e0b94a; background: var(--flag-bg); }

.inactive-row { opacity: 0.55; }

.sitefooter {
    background: var(--muted);
    text-align: center;
    font-size: .85rem;
    font-style: italic;
    padding: 1rem;
}
.sitefooter a { color: var(--header-bg); }

details summary { cursor: pointer; color: var(--header-bg); font-weight: 600; margin-top: 10px; }
.flag-form { margin-top: 10px; }

@media (max-width: 600px) {
    .site-header .logo { height: 48px; }
}