/* Native portal presentation. */

/* ---------- leaf text & sizing utilities ---------- */
.text-danger    { color: #b3261e !important; }
.text-success   { color: #1e8e3e !important; }
.text-secondary { color: var(--bp-muted, #5f7681) !important; }
.text-muted     { color: var(--bp-muted, #5f7681) !important; }
.text-center    { text-align: center !important; }
.text-start     { text-align: left !important; }
.text-end       { text-align: right !important; }
.text-nowrap    { white-space: nowrap !important; }
.text-uppercase { text-transform: uppercase !important; }
.w-100          { width: 100% !important; }
.h-100          { height: 100% !important; }

/* ---------- 12-column grid (only breakpoints in use) ---------- */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}
.row > [class^="col"], .row > [class*=" col"] {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
.col { flex: 1 0 0%; }
[class*="col-lg-"], [class*="col-md-"], [class*="col-sm-"] { width: 100%; }
@media (min-width: 768px) {
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.3333%; }
    .col-md-6  { width: 50%; }
    .col-md-8  { width: 66.6667%; }
    .col-md-9  { width: 75%; }
    .col-md-12 { width: 100%; }
}
@media (min-width: 992px) {
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.3333%; }
    .col-lg-6 { width: 50%; }
    .col-lg-8 { width: 66.6667%; }
    .col-lg-9 { width: 75%; }
}

/* ---------- buttons ---------- */
.btn {
    display: inline-block;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: filter .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:disabled { opacity: .6; cursor: default; }
.btn-lg { padding: 0.6rem 1.1rem; font-size: 1rem; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.875rem; border-radius: 6px; }
.btn-primary { background: var(--bp-wine-600, #003FAA); color: #fff; box-shadow: 0 2px 6px rgba(0,63,170,.28); }
.btn-primary:hover { filter: brightness(1.07); color: #fff; }
.btn-danger { background: #b3261e; color: #fff; }
.btn-danger:hover { filter: brightness(1.07); color: #fff; }
.btn-secondary { background: #5f7681; color: #fff; }
.btn-outline-primary { border-color: var(--bp-wine-600, #003FAA); color: var(--bp-wine-600, #003FAA); background: #fff; }
.btn-outline-primary:hover { background: var(--bp-blush-50, #f4f8fe); }
.btn-link { background: none; border: none; color: var(--bp-wine-600, #003FAA); text-decoration: underline; padding: 0.3rem 0.2rem; }
.btn-link:hover { color: var(--bp-plum-700, #2a4488); }

/* ---------- forms ---------- */
.form-label { display: inline-block; margin-bottom: 0.35rem; color: var(--bp-ink, #1c2b30); font-size: 0.9rem; }
.form-control, .form-select {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--bp-ink, #1c2b30);
    background-color: #fff;
    border: 1px solid var(--bp-line, #dbe7ea);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
}
.form-select {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235f7681' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px 12px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--bp-wine-600, #003FAA);
    box-shadow: 0 0 0 3px rgba(0,63,170,.14);
    outline: none;
}
.form-control::placeholder { color: var(--bp-muted, #5f7681); opacity: .55; }
.form-control-sm, .form-select-sm { padding: 0.3rem 0.55rem; font-size: 0.875rem; border-radius: 6px; }
.form-check { display: flex; align-items: center; gap: 0.45rem; min-height: 1.4rem; }
.form-check-input {
    width: 1.05rem; height: 1.05rem;
    accent-color: var(--bp-wine-600, #003FAA);
    border: 1px solid var(--bp-line, #dbe7ea);
    border-radius: 4px;
    cursor: pointer;
}

/* floating labels (Login/Register/Manage) */
.form-floating { position: relative; }
.form-floating > .form-control, .form-floating > .form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    padding: 1rem 0.75rem;
}
.form-floating > label {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    color: var(--bp-muted, #5f7681);
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}
/* keep the floating label as the visible placeholder; hide the real
   placeholder until the field is focused (Bootstrap form-floating behaviour) */
.form-floating > .form-control:not(:focus)::placeholder { color: transparent; }
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) { padding-top: 1.625rem; padding-bottom: 0.375rem; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label { opacity: .65; transform: scale(.85) translateY(-0.5rem) translateX(0.15rem); }

/* input groups (SpBook prototype form) */
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; width: 1%; }
.input-group-sm > .form-control, .input-group-sm > .input-group-text { padding: 0.3rem 0.55rem; font-size: 0.875rem; }
.input-group-text {
    display: flex; align-items: center;
    padding: 0.55rem 0.75rem;
    background: var(--bp-blush-50, #f4f8fe);
    border: 1px solid var(--bp-line, #dbe7ea);
    color: var(--bp-muted, #5f7681);
    white-space: nowrap;
}
.input-group > :first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:first-child) { margin-left: -1px; }

/* ---------- alerts ---------- */
.alert { position: relative; padding: 0.85rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 8px; }
.alert-danger  { color: #842029; background: #f8d7da; border-color: #f1aeb5; }
.alert-warning { color: #664d03; background: #fff3cd; border-color: #ffe69c; }
.alert-info    { color: #055160; background: #cff4fc; border-color: #9eeaf9; }
.alert-success { color: #0f5132; background: #d1e7dd; border-color: #a3cfbb; }

/* ---------- cards ---------- */
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bp-line, #dbe7ea); border-radius: 12px; }
.card-body { flex: 1 1 auto; padding: 1.25rem; }
.card-header { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--bp-line, #dbe7ea); font-weight: 500; }
.card-title { margin-bottom: 0.5rem; font-weight: 500; }
.card-footer { padding: 0.85rem 1.25rem; border-top: 1px solid var(--bp-line, #dbe7ea); }

/* ---------- list groups ---------- */
.list-group { display: flex; flex-direction: column; border-radius: 8px; }
.list-group-item { padding: 0.65rem 1rem; background: #fff; border: 1px solid var(--bp-line, #dbe7ea); }
.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-item:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.list-group-item:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

/* ---------- tables (SpBook prototype + Manage) ---------- */
.table-responsive { overflow-x: auto; }
.table { width: 100%; margin-bottom: 1rem; color: var(--bp-ink, #1c2b30); border-collapse: collapse; }
.table > thead { vertical-align: bottom; }
.table th, .table td { padding: 0.5rem 0.6rem; text-align: left; }
.table-sm th, .table-sm td { padding: 0.3rem 0.45rem; }
.table-bordered, .table-bordered th, .table-bordered td { border: 1px solid var(--bp-line, #dbe7ea); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--bp-blush-50, #f4f8fe); }

/* ---------- nav pills (Account/Manage sidebar) ---------- */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-pills { flex-direction: column; gap: 0.15rem; }
.nav-item { }
.nav-link {
    display: block;
    padding: 0.5rem 0.85rem;
    color: var(--bp-wine-600, #003FAA);
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
}
.nav-link:hover { background: var(--bp-blush-50, #f4f8fe); }
.nav-pills .nav-link.active { background: var(--bp-wine-600, #003FAA); color: #fff; }