/* =============================================================================
   SANAD skin v2 — SIGN-IN pages (admin login + portal auth pages)
   Portal-style frame: a white header bar with the logo and the support address, a plain
   left-aligned form with no card, and a grey footer bar. The side panel is hidden.
   ============================================================================= */

:root {
    --auth-teal: var(--sk-navy);
    --auth-teal-dark: var(--sk-navy-ink);
    --auth-teal-900: var(--sk-navy-ink);
    --auth-ink: var(--sk-text);
    --auth-muted: var(--sk-muted);
    --auth-canvas: var(--sk-surface);
    --auth-line: var(--sk-line);
}

body.auth-split-body { background: #F3F5F8; color: var(--sk-text); font-family: var(--sk-font); font-size: 14px; }
body.auth-split-body * { font-family: inherit; }
body.auth-split-body i[class*="fa-"] { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands"; }

/* ---- Page frame: header bar, plain form, footer bar (approved 2026-11-03) ---- */
.auth-aside { display: none !important; }
.auth-card { animation: none !important; }
body.auth-split-body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: #F3F5F8; }
.auth-split { flex: 1 1 auto; min-height: 0 !important; justify-content: center; }
.skin-auth-head {
    height: 72px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 0 max(28px, env(safe-area-inset-right, 0px)) 0 max(28px, env(safe-area-inset-left, 0px));
    border-bottom: 0; background: var(--sk-navy);
}
.skin-auth-head img { height: 54px; width: auto; display: block; }
.skin-auth-head .wm { font-weight: 600; font-size: 16px; color: #fff; }
.skin-auth-head .h { font-size: 13px; color: rgba(255,255,255,.75); }
.skin-auth-head .h a { color: #fff; font-weight: 500; text-decoration: none; }
.skin-auth-head .h a:hover { text-decoration: underline; }

/* ---- Form panel ------------------------------------------------------------ */
.auth-main { background: transparent; flex: 1 1 auto; align-items: center !important; padding-block: 40px !important; }
.auth-card { width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--sk-line); border-radius: 6px; box-shadow: none; padding: 40px 40px 32px; }
.auth-card.auth-card--wide { max-width: 600px; }
.auth-card .card { border: 1px solid var(--sk-line); box-shadow: none; border-radius: var(--sk-r); }
.auth-card-head { margin-bottom: 24px; }
.auth-card-head h1 { font-size: 28px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--sk-text) !important; }
.auth-card-head p { font-size: 14px; color: var(--sk-muted) !important; }
.auth-card label, .auth-card .form-label { font-size: 13px; font-weight: 500; color: var(--sk-text); text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
.auth-card .form-control, .auth-card .form-select {
    min-height: 40px; padding: 8px 12px !important; font-size: 14px;
    border: 1px solid var(--sk-line-3); border-radius: var(--sk-r) !important; background: #fff; box-shadow: none;
}
.auth-split-body .form-control:focus, .auth-split-body .form-select:focus {
    border-color: var(--sk-focus) !important; box-shadow: 0 0 0 3px rgba(46, 107, 198, .15) !important;
}
.auth-card .input-group-text { background: var(--sk-subtle); border-color: var(--sk-line-3); color: var(--sk-text-2); }
.auth-split-body .btn-primary, .auth-card .btn-primary {
    min-height: 40px; padding: 8px 16px !important;
    background: var(--sk-navy) !important; border-color: var(--sk-navy) !important; color: #fff !important;
    border-radius: var(--sk-r) !important; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
    box-shadow: none !important;
}
.auth-split-body .btn-primary:hover, .auth-split-body .btn-primary:focus { background: var(--sk-navy-ink) !important; border-color: var(--sk-navy-ink) !important; }
.auth-split-body .btn-link, .auth-split-body .text-primary { color: var(--sk-navy) !important; }
.auth-split-body .form-check-input:checked { background-color: var(--sk-navy); border-color: var(--sk-navy); }
.auth-foot-links { font-size: 13px; color: var(--sk-muted); }
div.auth-foot-links { text-align: center !important; margin-top: 22px !important; padding-top: 18px; border-top: 1px solid var(--sk-line); }
.auth-foot-links a { color: var(--sk-navy); font-weight: 500; }
.auth-steps .dot { border-radius: 50%; background: var(--sk-line-2); color: var(--sk-text-2); font-size: 12px; }
.auth-steps .dot.active { background: var(--sk-navy); color: #fff; }
.auth-card .ro { background: var(--sk-subtle); }
.auth-topbrand { display: none !important; }
.auth-topbrand img.lockup { height: 64px; width: auto; margin: 0 auto; }
.auth-card-head { text-align: center; margin-bottom: 28px; }
.auth-topbrand .mark { border-radius: var(--sk-r); background: var(--sk-navy); }
.auth-topbrand .wm { color: var(--sk-text); font-weight: 600; }
.alert { border-radius: var(--sk-r); font-size: 13px; }


@media (max-width: 560px) {
    .auth-main { padding: 24px 16px; }
    .auth-card { padding: 26px 20px 22px; }
}

/* ---- Footer bar ---------------------------------------------------------------- */
.skin-auth-foot {
    flex: 0 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px;
    padding: 14px max(28px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(28px, env(safe-area-inset-left, 0px));
    border-top: 0; background: var(--sk-navy); font-size: 12px; color: rgba(255,255,255,.75);
}
.skin-auth-foot a { color: #fff; text-decoration: none; }
.skin-auth-foot a:hover { text-decoration: underline; }
@media (max-width: 560px) {
    .skin-auth-head { height: 56px; } .skin-auth-head img { height: 32px; } .skin-auth-head .h { display: none; }
    .skin-auth-foot { justify-content: center; text-align: center; }
    .auth-card { padding: 28px 20px 24px; }
}

/* Larger form controls on the sign-in pages */
.auth-card .form-control, .auth-card .form-select { min-height: 48px; font-size: 15px; }
.auth-card label, .auth-card .form-label { font-size: 14px; }
.auth-card-head p { font-size: 15px; }
.auth-split-body .btn-primary, .auth-card .btn-primary { min-height: 48px; font-size: 15px; }
.auth-card .input-group-text { min-width: 46px; justify-content: center; }