/* Modern sitewide header + footer chrome (all customer-facing pages via layouts/app.blade.php). */

:root {
    --sp-header-h: 102px;
    --sp-brand: #010049;
    --sp-brand-dark: #02006e;
}

.demo-banner {
    height: 30px;
    box-sizing: border-box;
    background: #fff3cd;
    color: #7a5b00;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 7px 16px;
    border-bottom: 1px solid #f5deb3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Faint tiled "DEMO MODE" watermark behind all page content, so it stays
   visible even after scrolling past the top banner (e.g. in screenshots).
   !important on just background-image/repeat so it survives any later
   `body { background: <color> }` shorthand without touching that color. */
body {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='140'><text x='0' y='90' font-family='Arial, sans-serif' font-size='24' font-weight='700' fill='%23010049' fill-opacity='0.05' transform='rotate(-22 130 70)'>DEMO MODE</text></svg>") !important;
    background-repeat: repeat !important;
}

.sp-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--sp-header-h);
    background: #fff;
    z-index: 99999;
    border-bottom: 1px solid #eef0f5;
    box-shadow: 0 1px 0 rgba(16, 24, 64, 0.02);
    transition: box-shadow .2s ease;
}
.sp-header.sticky { box-shadow: 0 4px 18px rgba(16, 24, 64, 0.1); }

.sp-header-inner {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 32px;
}

.sp-logo { display: inline-flex; align-items: center; }
.sp-logo-img { max-height: 42px; width: auto; display: block; }

.sp-header-actions { display: flex; align-items: center; gap: 10px; }

.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    padding: 9px 20px;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    transition: .15s;
}
.sp-btn-brand { background: var(--sp-brand); color: #fff; }
.sp-btn-brand:hover { background: var(--sp-brand-dark); color: #fff; text-decoration: none; }
.sp-btn-outline { background: #fff; color: var(--sp-brand); border: 1px solid var(--sp-brand); }
.sp-btn-outline:hover { background: #f1f2fb; color: var(--sp-brand); text-decoration: none; }
.sp-btn-block { width: 100%; }

.sp-user-chip { display: flex; align-items: center; gap: 12px; }
.sp-user-name { font-weight: 700; font-size: 13.5px; color: #1f2430; }
.sp-user-role { color: #7a8095; font-weight: 600; }
.sp-header-link { font-size: 13px; color: #7a8095; text-decoration: none; font-weight: 600; }
.sp-header-link:hover { color: var(--sp-brand); text-decoration: none; }

.sp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sp-brand);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.sp-avatar-lg { width: 42px; height: 42px; font-size: 14px; }

.sp-signin { position: relative; }
.sp-signin .dropdown-menu {
    border: none;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(16, 24, 64, 0.16);
    padding: 18px;
    width: 260px;
    margin-top: 14px;
}
.sp-signin .dropdown-menu:before { display: none; }
.sp-signin .form-group { margin-bottom: 12px; }
.sp-signin .form-control { border-radius: 8px; border: 1px solid #dcdfe6; padding: 9px 12px; height: auto; font-size: 13.5px; box-shadow: none; }
.sp-signin .form-control:focus { border-color: var(--sp-brand); box-shadow: 0 0 0 3px rgba(1, 0, 73, .08); outline: none; }
.sp-signin .help-block { color: #d9534f; font-size: 12px; display: block; margin-top: -6px; margin-bottom: 10px; }
.sp-signin #forgot_pw { display: inline-block; font-size: 12.5px; color: #2a78d6; margin-bottom: 12px; }
.sp-signin-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

@media (max-width: 767px) {
    .sp-header-inner { padding-left: 12px; padding-right: 12px; }
    .sp-user-name, .sp-header-link { display: none; }
}

/* Footer */
.sp-footer {
    margin-top: auto;
    background: linear-gradient(135deg, var(--sp-brand) 0%, var(--sp-brand-dark) 100%);
    color: #cfd3f0;
    padding: 32px 0 22px;
    position: sticky;
    bottom: 0;
    z-index: 15;
}
.sp-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 32px;
}
.sp-footer-title { color: #fff; font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.sp-footer-address { font-size: 12.5px; line-height: 1.7; color: #cfd3f0; }
.sp-footer-copy { font-size: 12.5px; color: #9fa3d6; align-self: center; }

/* The legacy "back to top" button would now permanently overlap the
   always-visible sticky footer (whose height varies with content wrap), and
   its purpose is moot anyway since the header is fixed/always reachable. */
#toTop { display: none !important; }

@media (max-width: 640px) {
    .sp-footer-inner { flex-direction: column; }
    .sp-footer-copy { align-self: flex-start; }
}