/**
 * File Path: assets/css/mbs-admin-settings.css
 * Settings page shared styles — card/grid/field-cell system and shared primitives; always enqueued on every settings tab.
 * @package MyBookShowroom
 * @since   1.0.0
 */

/* ------------------------------------------------ */
/* SHARED SETTINGS PAGE PRIMITIVES                  */
/* Card system, field grid, field cell, actions row */
/* ------------------------------------------------ */

/* ----- Tab subtitle line ----- */
/* Short descriptive text rendered immediately under the tab's h2. */
.mbs-settings-subtitle {
    margin: -12px 0 24px 0;
    color: #646970;
    font-size: 14px;
    line-height: 1.5;
    max-width: 720px;
}

/* ----- Top save button (UX-01) ----- */
/* Floats a duplicate Save button to the upper-right of every tab that has
   a save flow, so it is visible without scrolling. The existing bottom
   button is unchanged. */
.mbs-save-top {
    float: right;
    margin: 0 0 12px 12px;
}
.mbs-save-top p.submit {
    margin: 0;
    padding: 0;
}
.mbs-save-top input[type="submit"] {
    margin: 0;
}

/* ----- Generalized card container ----- */
/* Shared card chrome. Used by General, Formatting, Appearance (via
   mbs-appearance-section alias), Authors, Series, and Collections tabs. */
.mbs-settings-card {
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    padding: 16px 24px 20px;
    margin-bottom: 20px;
}

.mbs-settings-card > h3 {
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f1;
    font-size: 15px;
    font-weight: 600;
}

/* First paragraph inside a card should not carry default top margin. */
.mbs-settings-card > p:first-of-type {
    margin-top: 4px;
}

/* ----- 2-column field grid ----- */
/* Used for paired fields (e.g. Currency + Timezone on the General tab,
   Archive Title + Date Format on the Formatting tab). Stacks to one
   column below ~900px. */
.mbs-settings-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
    margin: 0;
}

@media (max-width: 900px) {
    .mbs-settings-field-grid {
        grid-template-columns: 1fr;
    }
}

/* ----- Field cell ----- */
/* A single labeled field: label stacked above the input(s), optional
   .description helper text below. */
.mbs-settings-field-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mbs-settings-field-cell > label {
    font-size: 13px;
    font-weight: 600;
    color: #2c3338;
    line-height: 1.3;
}

.mbs-settings-field-cell > select,
.mbs-settings-field-cell > input[type="text"],
.mbs-settings-field-cell > input[type="number"],
.mbs-settings-field-cell > input[type="url"],
.mbs-settings-field-cell > textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* Field cell helper text — normal weight, italic "feature in dev" sub-note. */
.mbs-settings-field-cell > .description {
    margin: 0;
    color: #646970;
    font-size: 12px;
    line-height: 1.5;
    font-style: normal;
}

.mbs-settings-field-cell > .description em {
    color: #8c8f94;
    font-style: italic;
    font-weight: 400;
}


/* ----- Actions row (Save Changes button container) ----- */
.mbs-settings-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 8px 0 0 0;
    padding: 0;
}

.mbs-settings-actions #submit {
    margin: 0;
}

/* ==========================================================================
   A-Z Letter Groups + List Toolbar
   Shared by the Authors and Series settings tabs.
   ========================================================================== */

/* ── Toolbar: search input + Expand/Collapse buttons ──────────────────── */
.mbs-list-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 14px;
    flex-wrap: wrap;
}

.mbs-list-filter-input {
    flex: 1 1 200px;
    max-width: 320px;
    padding: 5px 10px;
    border: 1px solid #8c8f94;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.5;
}

.mbs-list-filter-input:focus {
    border-color: var(--mbs-status-info);
    box-shadow: 0 0 0 1px var(--mbs-status-info);
    outline: none;
}

.mbs-list-toolbar-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

/* F-SORT-2: Sort preference toggle button group */
.mbs-sort-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mbs-sort-toggle-label {
    font-size: 13px;
    color: #50575e;
    white-space: nowrap;
}

.mbs-sort-toggle .button-primary {
    background: var(--mbs-status-info);
    border-color: var(--mbs-status-info);
    color: #fff;
}

/* ── Letter group <details> wrapper ───────────────────────────────────── */
.mbs-letter-group {
    margin-bottom: 6px;
}

.mbs-letter-group-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: #f0f0f1;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

/* Remove browser default disclosure triangle */
.mbs-letter-group-summary::-webkit-details-marker {
    display: none;
}

.mbs-letter-group-label {
    font-size: 14px;
    font-weight: 700;
    min-width: 20px;
    color: #1d2327;
}

.mbs-letter-group-count {
    font-size: 12px;
    color: #646970;
}

/* CSS border chevron — matches the per-card chevron style */
.mbs-letter-group-summary::after,
.mbs-author-card-summary::after,
.mbs-series-card-summary::after,
.mbs-collection-card-summary::after,
.mbs-entity-card-summary::after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid #646970;
    border-bottom: 2px solid #646970;
    transform: rotate(45deg);
    margin-left: auto;
    transition: transform 0.2s ease;
}

.mbs-letter-group[open] > .mbs-letter-group-summary::after,
.mbs-author-card[open] > .mbs-author-card-summary::after,
.mbs-series-card[open] > .mbs-series-card-summary::after,
.mbs-collection-card[open] > .mbs-collection-card-summary::after,
.mbs-entity-card[open] > .mbs-entity-card-summary::after {
    transform: rotate(225deg);
}

.mbs-letter-group-body {
    padding: 6px 0 2px;
}

/* ── "No results" message ───────────────────────────────────────────────── */
/* Shown by mbs-admin-filter.js when no author / series / collection card   */
/* matches the current search query. Hidden via the HTML `hidden` attribute. */
.mbs-filter-no-results {
    padding: 12px 0;
    color: #646970;
    font-style: italic;
    font-size: 13px;
}

/* ── Filter hint text (Authors + Series tabs) ───────────────────────────── */
/* Moved from mbs-admin-settings-authors.css (F-002): rule is shared by     */
/* Authors and Series tabs, so it belongs in the always-loaded base file.   */
.mbs-list-filter-hint {
    margin: 4px 0 0;
    color: #646970;
    font-size: 12px;
}



/* ==========================================================================
   Help Tip — mbs_help_tip() tooltip component (UI-HELP-001)
   ========================================================================== */

.mbs-help-tip {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 1;
    cursor: default;
}

.mbs-help-tip .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: #a7aaad;
    transition: color .15s;
    vertical-align: middle;
}

.mbs-help-tip:hover .dashicons,
.mbs-help-tip:focus-within .dashicons,
.mbs-help-tip__btn[aria-expanded="true"] .dashicons {
    color: var(--mbs-status-info);
}

.mbs-help-tip__btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.mbs-help-tip__btn:focus {
    outline: 2px solid var(--mbs-status-info);
    outline-offset: 2px;
    border-radius: 2px;
}

.mbs-help-tip__content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 300px;
    background: #1d2327;
    color: #f0f0f1;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    padding: 9px 12px;
    border-radius: 4px;
    z-index: 9999;
    white-space: normal;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    pointer-events: none;
}

.mbs-help-tip__content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1d2327;
}

/* Wide variant — for longer tooltip bodies (3+ sentences). */
.mbs-help-tip--wide .mbs-help-tip__content {
    max-width: 420px;
}

/* Label + help-tip inline pairing.
 * Prevents the tip from dropping to its own line in flex-column / table-cell contexts. */
.mbs-label-tip-pair {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── UX-NAV-001: Catalog Sub-Navigation ─────────────────────────────────────
 * Persistent pill nav at the top of Authors, Series, Collections, Universes.
 * Rendered by MBS_Tab_Catalog_Subnav::render(). Placed here (global settings
 * stylesheet) so rules are available on all entity tabs without per-file cache
 * invalidation concerns.
 * ───────────────────────────────────────────────────────────────────────── */

.mbs-catalog-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 20px;
	padding: 10px 12px;
	background: var(--mbs-teal-pale);
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.mbs-catalog-subnav__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 14px;
	border-radius: 3px;
	border: 1px solid var(--mbs-teal);
	background: transparent;
	color: var(--mbs-teal);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 500;
	transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.mbs-catalog-subnav__item:hover,
.mbs-catalog-subnav__item:focus {
	background: var(--mbs-teal);
	color: #fff;
	border-color: var(--mbs-teal-dark);
	outline: none;
}

.mbs-catalog-subnav__item--active {
	background: var(--mbs-navy);
	color: #fff;
	border-color: var(--mbs-navy);
	cursor: default;
	pointer-events: none;
}

.mbs-catalog-subnav__item--active:hover,
.mbs-catalog-subnav__item--active:focus {
	background: var(--mbs-navy);
	color: #fff;
}


/* UX-NAV-002 -- Catalog hub layout (tab=catalog, no entity active) */
.mbs-catalog-hub {
    padding-top: 12px;
}

.mbs-catalog-hub__intro {
    color: var(--mbs-slate);
    font-size: 13px;
    margin-bottom: 8px;
}


/* ── Display-mode radio group (Series / Universes tabs) ─────────────────────
   .mbs-display-mode-radio  = one label wrapper per option
   .mbs-disabled             = option locked (Reading Order feature off)
   span.description          = inline hint shown only on disabled options
   ────────────────────────────────────────────────────────────────────────── */
.mbs-display-mode-radio {
    display:     grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
    gap:         0 8px;
    padding:     8px 10px;
    border:      1px solid transparent;
    border-radius: 4px;
    cursor:      pointer;
    font-size:   13px;
    color:       #2c3338;
    transition:  background 0.1s, border-color 0.1s;
    max-width:   540px;
    margin-bottom: 2px;
    line-height: 1.5;
}

.mbs-display-mode-radio:hover {
    background:    #f6f7f7;
    border-color:  #c3c4c7;
}

/* Radio dot sits in column 1; text + hint both sit in column 2 */
.mbs-display-mode-radio > input[type="radio"] {
    margin:    3px 0 0;
    grid-column: 1;
    grid-row:  1;
    cursor:    pointer;
}

/* Label text: column 2, row 1 */
.mbs-display-mode-radio > input[type="radio"] ~ * {
    grid-column: 2;
}

/* Hint line: sits on row 2 under the label text */
.mbs-display-mode-radio > span.description {
    display:     block;
    grid-column: 2;
    font-size:   11px;
    color:       #787c82;
    line-height: 1.4;
    margin-top:  2px;
    padding-left: 0;
}

/* Disabled state */
.mbs-display-mode-radio.mbs-disabled {
    cursor:  default;
    opacity: 0.65;
}

.mbs-display-mode-radio.mbs-disabled:hover {
    background:   transparent;
    border-color: transparent;
}

.mbs-display-mode-radio.mbs-disabled > input[type="radio"] {
    cursor: not-allowed;
}

/* Active / checked state highlight */
.mbs-display-mode-radio:has(input[type="radio"]:checked) {
    background:   #f0f8f7;
    border-color: #007b7b;
}

/* Group wrapper: add a little top breathing room */
.mbs-display-mode-radio-group {
    display:       flex;
    flex-direction: column;
    gap:           2px;
    margin:        10px 0 14px;
}
