@CHARSET "UTF-8";

/* ─────────────────────────────────────────────────────────────────────────────
   Colloquiam — Design System Redesign
   Principles: content-first · Inter typography · #428ECC blue · 8px grid
   ───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Design tokens ───────────────────────────────────────── */
:root {
    /* Brand */
    --blue:           #428ECC;
    --blue-dark:      #2e72ad;
    --blue-light:     #eaf3fb;
    --yellow:         #FECA38;
    --yellow-dark:    #e0b025;

    /* Neutrals */
    --white:          #ffffff;
    --gray-50:        #f8f9fa;
    --gray-100:       #f1f3f5;
    --gray-200:       #e9ecef;
    --gray-400:       #ced4da;
    --gray-600:       #6c757d;
    --gray-800:       #343a40;
    --ink:            #1a1a2e;

    /* Content-type colors — unified with brand */
    --collection:     #428ECC;
    --project:        #428ECC;
    --file:           #FECA38;
    --highlight:      #FECA38;
    --text-secondary: #6c757d;

    /* Shadows */
    --shadow-card:       0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 4px 16px rgba(66,142,204,0.14), 0 2px 8px rgba(0,0,0,0.06);

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

}

/* ── Base typography ─────────────────────────────────────── */

body,
.navbar,
.form-control,
.btn,
.card,
.nav-link,
input,
select,
textarea {
    font-family: 'Inter', 'Open Sans', system-ui, sans-serif !important;
}

/* ── Navbar ──────────────────────────────────────────────── */

.navbar,
.navbar-sciepedia-search,
.navbar-sciepedia-tabs {
    background-color: var(--white) !important;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.navbar .nav-link,
.navbar .navbar-brand {
    color: var(--gray-800) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--highlight) !important;
}

.sciepedia-header-menu > li > a {
    background-color: var(--white);
    color: var(--gray-800);
    border-bottom: 2px solid var(--white);
    font-size: 15px;
    font-weight: 500;
}

.sciepedia-tabs-menu > li > a {
    border-bottom: 2px solid transparent;
    color: var(--gray-600);
    font-weight: 500;
    font-size: 14px;
}

.sciepedia-tabs-menu > li > a:hover {
    background-color: var(--blue-light);
    color: var(--blue);
    border-bottom: 2px solid var(--blue);
}

.sciepedia-tabs-menu > li > a:focus,
.sciepedia-tabs-menu > li.active > a {
    background-color: transparent;
    border-bottom: 2px solid var(--blue);
    color: var(--blue);
    font-weight: 600;
}

/* ── Navbar action buttons ───────────────────────────────── */

.btn-sciepedia-yellow,
.navbar a.btn-sciepedia-microsite {
    background-color: var(--blue);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    border-radius: var(--radius-sm);
    padding: 6px 16px;
    border: none;
}

.btn-sciepedia-yellow:hover,
.btn-sciepedia-yellow:focus,
.navbar-nav > li > a.btn-sciepedia-microsite:hover,
.navbar-nav > li > a.btn-sciepedia-microsite:focus {
    background-color: var(--blue-dark);
    color: var(--white);
}

/* ── Links ───────────────────────────────────────────────── */

a, a:hover, a:focus {
    color: var(--blue);
}

/* ── Page backgrounds ────────────────────────────────────── */

.sciepedia-profile-base,
.sciepedia-search-base,
.sciepedia-paper-base,
.sciepedia-items-home {
    background: var(--white);
    background-color: var(--gray-50);
    padding-top: 24px;
}

.sciepedia-search-base {
    padding-top: 48px;
}

/* ── Search bar ──────────────────────────────────────────── */

#library-search,
form#search_form .form-control,
form#toolbar_search_box .form-control {
    font-size: 15px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    border: 1.5px solid var(--gray-200) !important;
    border-left: none !important;
    background: var(--white);
    padding: 10px 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#library-search:focus,
form#search_form .form-control:focus,
form#toolbar_search_box .form-control:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(66,142,204,0.12) !important;
    outline: none;
}

.input-group .input-group-text {
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    border: 1.5px solid var(--gray-200) !important;
    border-right: none !important;
    background: var(--white);
    color: var(--gray-600);
}

/* ── Bootstrap 5 nav-underline (tabs) ───────────────────── */

.nav-underline .nav-link.active {
    color: var(--blue) !important;
    border-bottom-color: var(--blue) !important;
    font-weight: 600;
}

.nav-underline .nav-link {
    color: var(--gray-600);
    font-size: 16px;
    font-weight: 500;
    padding-left: 0;
    padding-right: 0;
    margin-right: 24px;
}

.nav-underline .nav-link:hover {
    color: var(--blue);
    border-bottom-color: var(--blue-light);
}

/* ── Category sidebar ────────────────────────────────────── */

/* Styles are defined inline in default_categories.php */

.selected_category {
    font-weight: 600;
    color: var(--blue);
}

/* ── Sidebar layout ──────────────────────────────────────── */

.col-md-3.bg-body-secondary {
    background-color: transparent !important;
    padding-left: 24px;
}

/* ── Cards — shared base ─────────────────────────────────── */

.card {
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    background: var(--white);
}

.card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* ── Cards — congress / journal (collection) ─────────────── */

/* Copy of custom_tb5 */
.card-collection {
    border-left: none !important;
    overflow: hidden;
    padding-left: 0 !important;
}
.card-collection h5 {
    margin-left: 0 !important;
}

.card-collection.card > .card-body {
  padding-left: 1rem;
}

.card-collection.card > .card-body h5 {
  margin-left: 0;
}

.card-collection.card > .card-footer.card-stats {
  margin: 0;
}

/* End of copy from custom_tb5*/

.card-collection {
    border-left: none !important;
    overflow: hidden;
}

.card-collection .card-body {
    padding: 20px 20px 12px;
}

.card-collection .card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
    margin-bottom: 8px;
}

.card-collection .card-title a {
    color: var(--ink);
    text-decoration: none;
}

.card-collection .card-title a:hover {
    color: var(--blue);
}

.card-collection .card-title i {
    color: var(--blue);
    margin-right: 6px;
    font-size: 0.9em;
}

.card-collection .card-text {
    font-size: 0.84rem;
    color: var(--gray-600);
    line-height: 1.55;
    margin-bottom: 0;
}

.card-collection .card-footer.card-stats {
    background: transparent;
    border-top: 1px solid var(--gray-100);
    padding: 10px 20px;
}

/* ── Cards — document / article ──────────────────────────── */

.card-document {
    border-left: none !important;
}

.card-document .card-body {
    padding: 20px 20px 16px;
}

.card-document .card-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
    margin-bottom: 8px;
}

.card-document .card-title a {
    color: var(--ink);
    text-decoration: none;
}

.card-document .card-title a:hover {
    color: var(--blue);
}

.card-document .card-title i {
    color: var(--blue);
    margin-right: 6px;
    font-size: 0.9em;
}

.card-document .card-authors {
    font-size: 0.8rem;
    color: var(--gray-600);
    font-style: normal;
    font-weight: 400;
}

.card-document .card-citation {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

.card-document .card-text {
    font-size: 0.84rem;
    color: var(--gray-600);
    line-height: 1.55;
}

/* ── Card — pill image ───────────────────────────────────── */

.card-img-top.card-pill-image {
    width: 100%;
    height: 160px;
    max-height: 160px;
    object-fit: cover;
    display: block;
}

.card-img-top.card-pill-image.card-pill-default {
    object-fit: contain;
    padding: 24px;
    background-color: var(--gray-50);
}

/* ── Card — date badge (overlay on image) ────────────────── */

.card-img-wrapper {
    position: relative;
    overflow: hidden;
}

.card-date-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--yellow);
    color: var(--gray-800);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

/* ── Stats footer ────────────────────────────────────────── */

.card-stats {
    display: flex;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.card-stats i {
    margin-right: 3px;
}

/* ── Misc components ─────────────────────────────────────── */

.sciepedia-background-yellow {
    background-color: var(--blue);
}

.sciepedia-background-yellow:hover,
.sciepedia-background-yellow:focus {
    background-color: var(--blue-dark);
}

#status_submit {
    background-color: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

#status_submit:hover,
#status_submit:focus {
    background-color: var(--blue-dark);
    border-color: var(--blue-dark);
    color: var(--white);
}

.panel-sciepedia-lateral .panel-heading h3,
.panel-sciepedia-info .panel-heading h3,
.panel-sciepedia-lateral .panel-body h3.panel-title {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--blue);
}

.progress-bar-sciepedia-profile {
    background-color: var(--blue);
    background-image: none;
    box-shadow: none;
    border-radius: 2px;
    font-weight: bold;
}

/* ── Layout helpers ──────────────────────────────────────── */

.container > .row > .col-md-4.col-sm-12,
.container > .row > .col-lg-4.col-sm-12 {
    border-left: none;
}

.categ-lvl-1 {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--gray-600);
}

.categ-lvl-2 { margin-left: 16px; }
.categ-lvl-3 { margin-left: 40px; }

.pull-left { padding-right: 10px; }

.line_truncate { white-space: normal; }

.line_truncate.ms-no-close {
    text-indent: -25px;
    padding-left: 25px;
}

/* ── How-to-submit modal ─────────────────────────────────── */

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 4px;
    background: var(--blue-light);
    border: 2px solid var(--blue);
    color: var(--blue);
    text-align: center;
    font: bold 18px 'Inter', Arial, sans-serif;
    line-height: 26px;
    display: inline-block;
}

h4.item-list {
    font-weight: 500;
    font-size: 1rem;
}

.row.nobottom {
    margin-bottom: 12px;
    align-items: center;
}

/* ── Carousel ────────────────────────────────────────────── */

#publishCarousel .carousel-inner {
    padding-bottom: 3rem;
}

/* Institution sidebar — member initials pill */
.sidebar-user-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #FECA38;
    color: #3a3a3a;
    font-size: 10px;
    font-weight: bold;
    margin-right: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}

.sidebar-userlist p {
    font-size: 0.875rem;
    line-height: 1.6;
}

#publishCarousel .carousel-control-prev,
#publishCarousel .carousel-control-next {
    width: 8%;
    align-items: flex-end;
    padding-bottom: 0.5rem;
}

/* ── Maps ────────────────────────────────────────────────── */

div#map { height: 250px; }

/* ── Wiki editor tweaks ──────────────────────────────────── */

.oo-ui-buttonElement-button {
    margin-top: -4px;
    margin-left: 20px;
}

h1#firstHeading.page-header { margin: 0; }

div.panel-body > div#content { clear: right; }

.categories + .tooltip > .tooltip-inner { text-align: left; }

form#search_form { margin-top: 13px; margin-bottom: 10px; }

form#toolbar_search_box { margin-top: 10px; }

/* Flip card (legacy) */
.front {
    background-color: rgba(66,142,204,0.08);
    color: var(--ink);
    width: 220px; height: 220px;
    margin: 0 auto;
    font-size: 20px; font-weight: bold;
    padding: 20px;
    border-radius: var(--radius-sm);
}

.back {
    background-color: var(--blue);
    color: var(--white);
    width: 220px; height: 220px;
    margin: 0 auto;
    padding: 20px;
    font-size: 14px;
    border-radius: var(--radius-sm);
}


/* ── Document header sidebar — white card style (MW document page) ── */

/* Override BS5 bg-body-secondary on both header sidebar sections */
.sidebar-userlist.bg-body-secondary,
.sciepedia-header-actions.bg-body-secondary {
    background-color: var(--white) !important;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-card);
}

/* Standalone author section: fully rounded */
.sidebar-userlist.bg-body-secondary {
    border-radius: var(--radius-md);
}

/* When the actions panel follows the author section, merge them into one card */
.sidebar-userlist.bg-body-secondary:has(+ .sciepedia-header-actions.bg-body-secondary) {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: none;
    box-shadow: none;
    margin-bottom: 0;
}

.sidebar-userlist.bg-body-secondary + .sciepedia-header-actions.bg-body-secondary {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border-top: 1px solid var(--gray-100);
    box-shadow: var(--shadow-card);
    margin-top: 0 !important;
}

/* Initials pill — use colloquiam blue */
.sidebar-userlist a span {
    background-color: var(--blue) !important;
}

/* Header action links — colloquiam blue */
.sciepedia-header-action {
    color: var(--blue) !important;
}

/* Description hover layer */
.description-hover {
    cursor: default;
}
.description-hover-show {
    background-color: #FBFBFB;
    color: #333;
    padding: 10px 20px;
    margin-right: 25px;
    border: 1px solid #CCC;
    font-size: 12px;
    box-shadow: 2px 2px 2px rgb(170,170,170);
}
.description-hover-show:hover {
    display: block;
}

/* ── Document view page ─────────────────────────────────── */

/* Headblock — article header (full_view entity) */
.document-headblock {
    padding: 24px 0 16px;
}

.document-headblock-meta {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 8px;
    line-height: 1.5;
}

.document-headblock-meta a {
    color: var(--blue);
    font-weight: 500;
    text-decoration: none;
}

.document-headblock-meta a:hover {
    text-decoration: underline;
}

h1.document-headblock-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 10px;
}

.document-headblock-authors {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
}

.document-headblock-authors a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
}

.document-headblock-authors a:hover {
    text-decoration: underline;
}

/* Headblock — action buttons (GET PDF / GET EPUB) */
.document-headblock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.document-btn-download {
    background-color: var(--blue) !important;
    color: var(--white) !important;
    border: none !important;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.document-btn-download:hover,
.document-btn-download:focus {
    background-color: var(--blue-dark) !important;
    color: var(--white) !important;
}

.document-btn-generate {
    background-color: var(--white) !important;
    color: var(--blue) !important;
    border: 1.5px solid var(--blue) !important;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s, color 0.2s;
}

.document-btn-generate:hover,
.document-btn-generate:focus {
    background-color: var(--blue) !important;
    color: var(--white) !important;
}

.document-btn-generate-alt {
    background-color: var(--white) !important;
    color: var(--gray-600) !important;
    border: 1.5px solid var(--gray-400) !important;
    font-weight: 500;
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s, color 0.2s;
}

.document-btn-generate-alt:hover,
.document-btn-generate-alt:focus {
    background-color: var(--gray-100) !important;
    color: var(--blue) !important;
    border-color: var(--blue) !important;
}

/* Tabs row in headblock_twocolumn layout */
.container > .row.mt-4.mb-2.bg-body-secondary {
    background-color: var(--white) !important;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 0 12px;
}

/* Document detail card — content area */
.document-detail-card {
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-card);
    background: var(--white);
    margin-top: 16px;
}

.document-detail-card > .card-body {
    padding: 28px 32px;
}

.document-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--blue);
    margin-bottom: 12px;
}

.document-section-title i {
    font-size: 0.8em;
}

.document-abstract {
    font-size: 0.92rem;
    color: var(--gray-800);
    line-height: 1.7;
}

.document-abstract p {
    margin-bottom: 12px;
}

.document-tags .elgg-tag {
    display: inline-block;
    background-color: var(--blue-light);
    color: var(--blue);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    margin: 0 6px 6px 0;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.document-tags .elgg-tag:hover {
    background-color: var(--blue);
    color: var(--white);
    text-decoration: none;
}

.document-categories {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.document-categories li {
    font-size: 0.88rem;
    color: var(--gray-800);
    padding: 4px 0 4px 16px;
    position: relative;
}

.document-categories li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--blue);
}

.document-custom-field {
    font-size: 0.92rem;
    color: var(--gray-800);
    line-height: 1.65;
}

.document-detail-card hr {
    border-color: var(--gray-100);
    opacity: 1;
}

/* Sidebar — article info card (in document view) */
.container > .row > .col-md-3.bg-body-secondary .card {
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-card);
}

.container > .row > .col-md-3.bg-body-secondary .card .card-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--blue);
    margin-bottom: 10px;
}

.container > .row > .col-md-3.bg-body-secondary .card .card-body p {
    font-size: 0.85rem;
    color: var(--gray-800);
    line-height: 1.6;
}

.container > .row > .col-md-3.bg-body-secondary .card hr {
    border-color: var(--gray-100);
    opacity: 1;
}

/* Legacy panel fallback — in case any page still uses .panel */
.panel {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    margin-bottom: 16px;
}

.panel .panel-body {
    padding: 24px;
}

.panel .panel-heading {
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    padding: 12px 24px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ── Login page — Facebook-style split layout ───────────── */

/* Reset Elgg page shell for the login split layout */
.login-split-page ~ #push,
.login-split-page ~ #footer,
#wrap:has(.login-split-page) + #footer {
    display: none !important;
}

#wrap:has(.login-split-page) {
    overflow: hidden;
    padding: 0;
    margin: 0;
}

body:has(.login-split-page) {
    overflow: hidden;
}

body:has(.login-split-page) .container,
body:has(.login-split-page) .elgg-page-body,
body:has(.login-split-page) .elgg-inner,
body:has(.login-split-page) .elgg-layout,
body:has(.login-split-page) .col-md-12 {
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide search bar and Sign in button on login page */
body:has(.login-split-page) .navbar form[role="search"],
body:has(.login-split-page) .navbar a[href="/login"],
body:has(.login-split-page) .navbar .btn-primary {
    display: none !important;
}

.login-split-page {
    position: relative;
    display: flex;
    height: calc(100vh - 52px);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Left panel — gradient */
.login-gradient-panel {
    flex: 1 1 55%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #2e3a6e 20%, #2e72ad 40%, #428ECC 60%, #6bbdff 78%, #FECA38 100%);
}

.login-gradient-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 48px;
    max-width: 480px;
}

.login-gradient-logo {
    max-width: 420px;
    width: 100%;
    height: auto;
    margin-bottom: 56px;
}

.login-gradient-title {
    font-family: 'Inter', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.login-gradient-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
}

/* Right panel — form */
.login-form-panel {
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white, #ffffff);
    padding: 48px 32px;
}

.login-form-wrapper {
    width: 100%;
    max-width: 400px;
}

.login-form-title {
    font-family: 'Inter', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ink, #1a1a2e);
    margin-bottom: 8px;
}

.login-form-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: var(--gray-600, #6c757d);
    margin-bottom: 40px;
}

.login-form-box {
    margin-bottom: 20px;
}

.login-form-box .form-control {
    height: 48px;
    font-size: 15px;
    border: 1.5px solid var(--gray-200, #e9ecef);
    border-radius: var(--radius-sm, 6px);
    padding: 10px 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-form-box .form-control:focus {
    border-color: var(--blue, #428ECC);
    box-shadow: 0 0 0 3px rgba(66,142,204,0.15);
    outline: none;
}

.login-form-box .btn-primary {
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    background-color: var(--blue, #428ECC);
    border-color: var(--blue, #428ECC);
    transition: background-color 0.2s;
}

.login-form-box .btn-primary:hover {
    background-color: var(--blue-dark, #2e72ad);
    border-color: var(--blue-dark, #2e72ad);
}

.login-form-box .rememberme-style label {
    font-size: 0.88rem;
    color: var(--gray-600, #6c757d);
}

.login-panel-register {
    font-size: 0.9rem;
    color: var(--gray-600, #6c757d);
    margin-bottom: 12px;
}

.login-panel-register a {
    color: var(--blue, #428ECC);
    font-weight: 600;
    text-decoration: none;
}

.login-panel-register a:hover {
    text-decoration: underline;
}

.login-form-forgot {
    font-size: 0.88rem;
    color: var(--gray-600, #6c757d);
}

.login-form-forgot a {
    color: var(--blue, #428ECC);
    font-weight: 500;
}

/* Responsive — stack on small screens */
@media (max-width: 768px) {
    .login-split-page {
        flex-direction: column;
    }

    .login-gradient-panel {
        flex: 0 0 auto;
        min-height: 240px;
        padding: 32px 24px;
    }

    .login-gradient-title {
        font-size: 1.75rem;
    }

    .login-gradient-logo {
        max-width: 160px;
        margin-bottom: 16px;
    }

    .login-form-panel {
        flex: 1 1 auto;
        padding: 32px 24px;
    }
}