/* tarbiya submission overrides for author-facing submit flow */

/* admin/css/app.css styles the bare `header` element with a fixed 60px height
   and a white background, which collapses the site masthead and makes the page
   content overlap it. Undo that for the public-facing headers on this page. */
body header.site-header,
body header.page-header {
    height: auto;
    background: none;
}

body header.site-header {
    background: var(--header-grad);
    background-image: var(--header-sheen), var(--header-grad);
}

body header.site-header h1,
body header.page-header h1 {
    line-height: 1.25;
}

/* admin/css/app.css (Foundation) loads after tarbiya.css on this shell.
   `button { line-height: 1 }` (app.css:614) shrinks <button class="nav-link
   dropdown-toggle"> so the caret sits above the Arabic ink box.
   `ul { margin-left: 1.25rem }` (app.css:1542) shifts .navbar-nav. */
.navbar-custom .nav-link,
.navbar-custom button.nav-link {
    line-height: 1.65;
    font-family: var(--font-body);
}

.navbar-custom .navbar-nav {
    margin-left: 0;
    margin-right: 0;
    list-style: none;
}

.navbar-custom .navbar-nav-auth {
    gap: .15rem;
}

.submission-shell {
    max-width: 100%;
}

.submission-page-header {
    margin-bottom: 1.5rem;
}

.submission-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .55rem;
    align-items: center;
    margin-top: .85rem;
    font-size: .88rem;
    color: var(--text-muted, #4E5661);
}

.submission-breadcrumbs a {
    color: var(--brand-link, #1F457F);
    text-decoration: none;
    font-weight: 600;
}

.submission-breadcrumbs a:hover {
    text-decoration: underline;
}

.submission-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .submission-layout {
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
        align-items: start;
        gap: 1.5rem;
    }
}

.submission-side-card,
.submission-panel {
    background: #fff;
    border: 1px solid var(--rule, #D8D0C2);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(22, 36, 71, .06);
}

.submission-side-card {
    padding: 1.1rem 1.15rem 1.2rem;
    margin-bottom: 1rem;
}

.submission-side-title {
    font-family: var(--font-body, Manrope, sans-serif) !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand-700, #35578A) !important;
    margin: 0 0 .9rem !important;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--rule, #D8D0C2);
}

[dir="rtl"] .submission-side-title {
    letter-spacing: 0;
    text-transform: none;
}

.submission-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.submission-steps li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .92rem;
    color: var(--text-muted, #4E5661);
    font-weight: 600;
}

.submission-steps li.is-active {
    color: var(--brand-900, #1A335F);
}

.step-index {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-muted, #EBE4D9);
    border: 1px solid var(--rule, #D8D0C2);
    font-size: .78rem;
    font-weight: 800;
    color: var(--brand-900, #1A335F);
    flex: 0 0 auto;
}

.submission-steps li.is-active .step-index {
    background: var(--brand-900, #1A335F);
    border-color: var(--brand-900, #1A335F);
    color: #fff;
}

.submission-side-note p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--text-muted, #4E5661);
}

.submission-panel {
    padding: 1.25rem 1.2rem 1.4rem;
}

@media (min-width: 768px) {
    .submission-panel {
        padding: 1.5rem 1.6rem 1.7rem;
    }
}

.submission-intro {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.submission-section {
    border-top: 1px solid var(--rule, #D8D0C2);
    padding-top: 1.15rem;
    margin-top: 1.15rem;
}

.submission-section:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.submission-section h2 {
    font-size: 1.15rem !important;
    margin: 0 0 .75rem !important;
    color: var(--brand-900, #1A335F) !important;
}

.submission-section-body {
    font-size: .98rem;
    line-height: 1.7;
    color: var(--text, #1A2030);
}

.submission-section-body p:last-child {
    margin-bottom: .75rem;
}

.submission-check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-top: 1rem;
    padding: .85rem 1rem;
    background: var(--surface-muted, #EBE4D9);
    border: 1px solid var(--rule, #D8D0C2);
    border-radius: 10px;
    font-weight: 600;
    color: var(--brand-900, #1A335F);
    cursor: pointer;
}

.submission-check input[type="checkbox"] {
    margin-top: .2rem;
    transform: scale(1.1);
}

.submission-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .7rem;
    margin-top: 1.5rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--rule, #D8D0C2);
}

.submission-actions .btn {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

/* Soften Foundation leftovers when loaded for form widgets */
.submission-shell .box,
.submission-shell .title-area,
.submission-shell .content {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.submission-shell label {
    font-weight: 600;
    color: var(--brand-900, #1A335F);
}

.submission-shell .form-error,
.submission-shell .error,
.submission-shell .bs-callout {
    border-radius: 10px;
}

.submission-shell .bs-callout {
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--rule, #D8D0C2);
    background: #fff;
}

.submission-shell .card {
    border: 0;
    box-shadow: none;
    margin-bottom: .75rem;
}

/* Make foundation buttons less conflicting if any remain */
.submission-shell button.success.button {
    display: none;
}

.submission-shell .help-block {
    margin: .45rem 0 0;
    font-size: .85rem;
    line-height: 1.7;
    color: var(--text-muted, #4E5661);
}

/* --- Shared step-page pieces ---------------------------------------------- */

.submission-steps li.is-done .step-index {
    background: var(--brand-100, #DCE5F2);
    border-color: var(--brand-300, #A9BEDD);
}

.submission-steps a {
    color: var(--brand-link, #1F457F);
    text-decoration: none;
}

.submission-steps a:hover {
    text-decoration: underline;
}

.submission-field {
    margin-bottom: 1rem;
}

.submission-field > label,
.submission-shell .submission-section-body label {
    display: block;
    margin-bottom: .3rem;
}

.submission-shell input[type="text"],
.submission-shell input[type="email"],
.submission-shell input[type="password"],
.submission-shell input[type="search"],
.submission-shell input[type="url"],
.submission-shell input[type="number"],
.submission-shell input[type="date"],
.submission-shell input[type="file"],
.submission-shell select,
.submission-shell textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--rule, #D8D0C2);
    border-radius: 8px;
    background: #fff;
    color: var(--text, #1A2030);
    font: inherit;
}

.submission-shell input:focus,
.submission-shell select:focus,
.submission-shell textarea:focus {
    outline: none;
    border-color: var(--brand-700, #35578A);
    box-shadow: 0 0 0 3px rgba(53, 87, 138, .14);
}

.submission-shell .submission-check input[type="checkbox"],
.submission-shell input[type="radio"] {
    width: auto;
}

.submission-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
}

.submission-inline-form label {
    flex: 0 0 100%;
    margin-bottom: 0;
}

.submission-inline-form input {
    flex: 1 1 16rem;
    width: auto;
}

.submission-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: .9rem;
    font-size: .92rem;
}

.submission-table th,
.submission-table td {
    border-bottom: 1px solid var(--rule, #D8D0C2);
    padding: .6rem .5rem;
    text-align: inherit;
    vertical-align: top;
}

.submission-table th {
    color: var(--brand-900, #1A335F);
    font-weight: 700;
}

.btn-icon {
    background: none;
    border: 0;
    padding: .2rem .35rem;
    color: var(--text-muted, #4E5661);
    cursor: pointer;
}

.btn-icon:hover {
    color: #B3261E;
}

.submission-agreements {
    list-style: none;
    margin: 0;
    padding: 0;
}

.submission-agreements li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
}

.submission-agreements .fa-check-circle {
    color: #146B52;
}

.submission-shell .modal-content {
    border: 1px solid var(--rule, #D8D0C2);
    border-radius: 12px;
}

/* --- Keywords (tag-it) ----------------------------------------------------- */

/* tag-it replaces the original input with its own list UI. Our generic input
   styling was re-boxing both the hidden original and tag-it's inner input,
   which produced two stacked boxes. */
.submission-shell input#id_keywords,
.submission-shell .tagit-hidden-field {
    display: none;
}

.submission-shell ul.tagit {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .45rem .6rem;
    border: 1px solid var(--rule, #D8D0C2);
    border-radius: 8px;
    background: #fff;
}

.submission-shell ul.tagit li {
    margin: 0;
    padding: 0;
    float: none;
}

.submission-shell ul.tagit li.tagit-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .55rem;
    border: 1px solid var(--rule, #D8D0C2);
    border-radius: 4px;
    background: var(--surface-muted, #EBE4D9);
    color: var(--brand-900, #1A335F);
    font-size: .85rem;
    line-height: 1.5;
}

/* tag-it ships both a text "×" and a jQuery-UI sprite icon for the remove
   control, and positions the anchor absolutely. Keep the text one only and
   let it sit inline with the label. */
.submission-shell ul.tagit li.tagit-choice .tagit-close {
    position: static;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 1;
    text-decoration: none;
    color: var(--text-muted, #4E5661);
}

.submission-shell ul.tagit li.tagit-choice .tagit-close:hover {
    color: #B3261E;
}

.submission-shell ul.tagit li.tagit-choice .tagit-close .ui-icon {
    display: none;
}

.submission-shell ul.tagit li.tagit-choice .tagit-close .text-icon {
    display: inline;
    font-size: 1rem;
}

.submission-shell ul.tagit li.tagit-choice .tagit-label {
    padding: 0;
}

.submission-shell ul.tagit li.tagit-new {
    flex: 1 1 8rem;
}

.submission-shell ul.tagit input[type="text"] {
    width: 100%;
    border: 0;
    padding: .15rem 0;
    background: transparent;
    box-shadow: none;
}

.submission-shell ul.tagit input[type="text"]:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}

/* --- Affiliation / organization screens (nitty-gritty shell) --------------- */

.submission-panel-title {
    font-size: 1.15rem !important;
    margin: 0 0 1rem !important;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--rule, #D8D0C2);
    color: var(--brand-900, #1A335F) !important;
}

.submission-side-body {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--text, #1A2030);
}

.submission-side-body dt,
.submission-details dt {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-muted, #4E5661);
    margin-top: .7rem;
}

.submission-side-body dd,
.submission-details dd {
    margin: 0;
    color: var(--text, #1A2030);
}

.submission-details {
    display: grid;
    gap: .1rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin: 0 0 1rem;
}

/* Foundation input groups used by the organization search box */
.submission-shell .input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .5rem;
}

.submission-shell .input-group-label {
    flex: 0 0 100%;
    margin-bottom: 0;
}

.submission-shell .input-group-field {
    flex: 1 1 16rem;
    width: auto;
}

.submission-shell .input-group-button .button,
.submission-shell .button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border: 1px solid var(--rule, #D8D0C2);
    border-radius: 8px;
    background: #fff;
    color: var(--brand-900, #1A335F);
    /* longhands only — do not use font shorthand: it was inheriting
       font-size:0 from Foundation .button-group (app.css) and zeroing labels */
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.submission-shell .button:hover {
    border-color: var(--brand-700, #35578A);
}

.submission-shell .button.success,
.submission-shell .success.button {
    background: var(--brand-900, #1A335F);
    border-color: var(--brand-900, #1A335F);
    color: #fff;
}

.submission-shell .callout {
    padding: .9rem 1rem;
    margin-bottom: .8rem;
    border: 1px solid var(--rule, #D8D0C2);
    border-radius: 10px;
    background: #fff;
}

.submission-shell .callout h3 {
    font-size: 1.02rem !important;
    margin: 0 0 .5rem !important;
    color: var(--brand-900, #1A335F) !important;
}

.submission-shell .flex.space-between {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
}

/* --- Account screens (log in, register, password reset) -------------------- */

.auth-shell {
    max-width: 34rem;
    margin: 0 auto;
}

.auth-shell-wide {
    max-width: 52rem;
}

.auth-page-header {
    text-align: center;
    margin-bottom: 1.25rem;
}

.auth-card {
    display: block;
}

.auth-card > div,
.auth-card > p {
    margin-bottom: .9rem;
}

.auth-card label {
    display: block;
    margin-bottom: .3rem;
}

/* Upstream account templates use Foundation's expanded buttons. */
.auth-card .button.expanded,
.auth-card button.expanded,
.auth-card .button.secondary.expanded {
    width: 100%;
    justify-content: center;
    margin-top: .3rem;
}

.auth-card button[type="submit"],
.auth-card .button.secondary {
    background: var(--brand-900, #1A335F);
    border-color: var(--brand-900, #1A335F);
    color: #fff;
}

.auth-card .orcid-button {
    background: #A6CE39;
    border-color: #A6CE39;
    color: #fff;
}

.auth-card .orcid-button img {
    width: 1.1rem;
    height: 1.1rem;
}

.auth-card .text-center,
.auth-card p.text-center {
    text-align: center;
}

.auth-card .help-text {
    margin: .35rem 0 0;
    font-size: .85rem;
    color: var(--text-muted, #4E5661);
}

.auth-card .error {
    color: #B3261E;
    font-size: .88rem;
    margin: .25rem 0;
}

/* Registration groups several fields per row upstream via flex utilities. */
.auth-shell-wide .flex.wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}

.auth-shell-wide .flex.wrap > div {
    flex: 1 1 12rem;
    min-width: 0;
}

.login-notice {
    margin-bottom: 1rem;
}

.login-notice .card {
    padding: .9rem 1rem;
    border: 1px solid var(--rule, #D8D0C2);
    border-radius: 10px;
    background: var(--surface-muted, #EBE4D9);
}

/* --- Foundation input-groups (organization search) ------------------------- */

/* app.css lays these out with display:table / table-cell. Mixing that with our
   flex container left the label as a full-width bar and pushed the button
   outside the card, so restate every part as a flex item. */
.submission-shell .input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .5rem;
    width: 100%;
    margin-bottom: 1rem;
}

.submission-shell .input-group-label {
    display: block;
    flex: 0 0 100%;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-900, #1A335F);
    text-align: inherit;
    white-space: normal;
    font-weight: 600;
}

.submission-shell .input-group-field {
    display: block;
    flex: 1 1 16rem;
    width: auto;
    height: auto;
    border-radius: 8px;
}

.submission-shell .input-group-button {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    padding: 0;
    align-items: stretch;
}

.submission-shell .input-group-button .button,
.submission-shell .input-group-button button,
.submission-shell .input-group-button a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: auto;
    font-size: inherit;
    white-space: nowrap;
}

/* Foundation squares off the inner corners for its table layout. */
.submission-shell .input-group > :first-child,
.submission-shell .input-group > :last-child > * {
    border-radius: 8px;
}

/* --- Profile page ---------------------------------------------------------- */

.submission-shell .submission-label {
    display: block;
    margin-bottom: .3rem;
    font-weight: 600;
    color: var(--brand-900, #1A335F);
}

.submission-grid {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 1rem;
}

.auth-shell .submission-panel {
    margin-bottom: 1.25rem;
}

/* The profile form ships Foundation/admin utility classes; keep their rows
   readable inside the theme without pulling in the admin stylesheet. */
.submission-shell .flex.wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}

.submission-shell .grid.auto {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Profile form: Janeway's field groups use admin utility classes that the
   theme does not load, which left the bio/signature boxes tiny and unequal. */
.profile-shell .flex.wrap,
.profile-shell .flex.landscape-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.profile-shell .flex.wrap > div,
.profile-shell .max-w-24 {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: none;
}

.profile-shell .max-w-24 {
    flex: 1 1 24rem;
}

.profile-shell textarea {
    width: 100%;
    min-height: 9rem;
    resize: vertical;
}

.profile-shell h3.fs-3 {
    font-size: 1.05rem !important;
    color: var(--brand-900, #1A335F) !important;
    margin: 1.2rem 0 .6rem !important;
}

.profile-shell hr {
    border: 0;
    border-top: 1px solid var(--rule, #D8D0C2);
    margin: 1.2rem 0;
}

.auth-page-header.submission-panel {
    margin-bottom: 1.25rem;
}

/* --- Horizontal step bar (B1) --------------------------------------------- */

.submission-layout--stacked {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .submission-layout--stacked {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.submission-steps-bar {
    width: 100%;
}

.submission-steps--bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .55rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--rule, #D8D0C2);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(22, 36, 71, .06);
    overflow-x: auto;
}

.submission-steps--bar li {
    flex: 1 1 auto;
    min-width: 7.5rem;
    padding: .35rem .45rem;
}

.submission-steps--bar li.is-active {
    color: var(--brand-900, #1A335F);
    font-weight: 800;
}

.submission-side-note {
    margin-top: 1rem;
    margin-bottom: 0;
}

.submission-actions--split {
    justify-content: space-between;
    align-items: center;
}

.submission-actions--split > form {
    margin: 0;
}

.submission-actions--split .btn {
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    box-sizing: border-box;
}

/* Modal header × — B1.6: icon control (no button chrome); hit area via padding */
.submission-shell .modal-header .btn-modal-close {
    margin: 0;
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    /* 0.7rem vertical + 1.1rem horizontal → >=44x44 hit, no visible chrome */
    /* horizontal pad so hit width >=44 with narrow × glyph */
    padding: 0.7rem 1.1rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: inherit;
}

/* Upload triggers stay secondary beside primary Save/Continue */
.submission-section-body > .btn.btn-background[data-toggle="modal"] {
    background: #fff;
    border: 1px solid var(--rule, #D8D0C2);
    color: var(--brand-900, #1A335F);
    font-weight: 600;
}

.submission-section-body > .btn.btn-background[data-toggle="modal"]:hover {
    border-color: var(--brand-700, #35578A);
    background: var(--surface-muted, #EBE4D9);
}


/* --- B1.5: Cause A — keep Foundation button-group font-size reset effective ---
   (font: inherit removed above; .button-group .button { font-size: 0.9rem } applies) */

/* --- B1.5: Cause B — secondary .btn-background sized like primary actions ---
   Do not edit tarbiya.css .btn-background (site-wide). Override only inside
   .submission-shell so public-site buttons cannot match. Values reused from
   .submission-actions--split .btn (min-height/padding/line-height/font-size). */
.submission-shell .btn.btn-background {
    min-height: 2.5rem;
    /* B1.6: kill tarbiya.css .btn-background { min-width: 7rem } — primary
       already uses min-width: 0 under .submission-actions--split .btn */
    min-width: 0;
    width: auto;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    /* keep secondary fill from .btn-background — do not adopt primary gradient */
}

/* header × icon control — restate after .btn.btn-background so it wins */
.submission-shell .modal-header .btn-modal-close {
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    /* horizontal pad so hit width >=44 with narrow × glyph */
    padding: 0.7rem 1.1rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: inherit;
}

/* --- B1.5: field errors (foundationform small.error) must read as errors ---
   Colour #B3261E already used for destructive cues in this file; on #fff ≈ 6.4:1. */
.submission-shell small.error {
    display: block;
    margin-top: .35rem;
    color: #B3261E;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.5;
}

.submission-shell small.error::before {
    font-family: FontAwesome;
    content: "\f071";
    display: inline-block;
    margin-inline-end: .4rem;
}

.submission-shell .row.error input,
.submission-shell .row.error textarea,
.submission-shell .row.error select {
    border-color: #B3261E;
}