/*
 * ku-dashboard-accordion.css
 *
 * World Host Dashboard — collapsible section accordion.
 *
 * Depends on three CSS classes added to the Elementor template:
 *   .ku-dashboard-section  — each of the three section containers
 *   .ku-dashboard-cards    — the cards grid container inside each section
 *   .ku-dashboard-card     — each individual card widget
 *
 * JS (inline in core.php) adds:
 *   .ku-section-open       — the currently expanded section
 *   .ku-section-collapsed  — every other section
 *   .ku-accordion-toggle   — the +/- button appended to each section element
 *   .ku-section-summary    — the bullet list of card names
 *   data-ku-section="0|1|2" — index used for per-section color rules
 *
 * Section colors:
 *   0 — World Experience:       #657C91 (slate blue)  / white text
 *   1 — Access & Notifications: #A8B691 (light green) / white text
 *   2 — Other Features:         #EDC993 (light gold)  / #122B46 text
 *
 * Updated: 2026-06-06 — added global notice box styles
 */


/* ==========================================================================
   Section background colors and text
   (set after JS assigns data-ku-section attributes)
   ========================================================================== */

[data-ku-section="0"] { background-color: #657C91 !important; }
[data-ku-section="1"] { background-color: #A8B691 !important; }
[data-ku-section="2"] { background-color: #EDC993 !important; }

/* Heading title color per section */
[data-ku-section="0"] .elementor-heading-title,
[data-ku-section="1"] .elementor-heading-title {
    color: #ffffff !important;
}

[data-ku-section="2"] .elementor-heading-title {
    color: #122B46 !important;
}

/* Push heading text away from top-right corner where toggle button sits */
.ku-dashboard-section .elementor-widget-heading {
    padding-right: 44px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}


/* ==========================================================================
   Dashboard container — stretches to fill page width
   Class added by JS to the parent of .ku-dashboard-section elements
   ========================================================================== */

.ku-dashboard-container {
    flex: 1 1 auto !important;
    width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   Section layout — open vs. collapsed widths
   ========================================================================== */

.ku-dashboard-section {
    position: relative !important;
    transition: flex-basis 0.3s ease, max-width 0.3s ease;
    height: auto !important;
    min-height: 0 !important;
    padding-right: 12px !important; /* ensure toggle button is not clipped */
}

/* Expanded section takes all remaining flex space */
.ku-dashboard-section.ku-section-open {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
}

/* Collapsed section is a fixed narrow strip */
.ku-dashboard-section.ku-section-collapsed {
    flex: 0 0 180px !important;
    max-width: 180px !important;
    width: 180px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}


/* ==========================================================================
   Cards grid — visible only when section is open
   ========================================================================== */

.ku-dashboard-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 10px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    width: 100% !important;
    align-items: start !important; /* each card sizes to its own content */
    border-radius: 9px !important;
}

/* Override Elementor's inline width on each grid item */
.ku-dashboard-cards > * {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Hide the entire cards container when collapsed */
.ku-dashboard-section.ku-section-collapsed .ku-dashboard-cards {
    display: none !important;
}

/* Card — no fixed aspect ratio; height is determined by content */
.ku-dashboard-card {
    background: #ffffff !important;
    border: 1px solid rgba(18, 43, 70, 0.2) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 2px !important;
    gap: 4px !important;
    text-decoration: none !important;
    width: 100% !important;
}

/* Elementor's inner container wrapper — reset padding/gap so our card controls spacing */
.ku-dashboard-card > .e-con-inner {
    padding: 0 !important;
    margin: 0 !important;
    gap: 4px !important;
    width: 100% !important;
    align-items: center !important;
}

/* Image fills the full card width; height scales naturally (700x700 = square) */
.ku-dashboard-card .elementor-widget-image {
    width: 100% !important;
    flex-shrink: 0 !important;
}

.ku-dashboard-card .elementor-widget-image .elementor-widget-container {
    width: 100% !important;
}

.ku-dashboard-card .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 7px !important;
}

/* Strip Elementor's default widget margins so card spacing is even */
.ku-dashboard-card .elementor-widget {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Text label — one line, bold, 2px breathing room at bottom */
.ku-dashboard-card .elementor-widget-text-editor {
    width: 100% !important;
    flex-shrink: 0 !important;
    padding: 0 2px 2px 2px !important;
    text-align: center !important;
}

/* Target every element inside the text editor — catches inline styles Elementor may inject */
.ku-dashboard-card .elementor-widget-text-editor,
.ku-dashboard-card .elementor-widget-text-editor *,
.ku-dashboard-card .elementor-text-editor,
.ku-dashboard-card .elementor-text-editor * {
    margin: 0 !important;
    color: #122B46 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1.2 !important;
}


/* ==========================================================================
   Summary bullet list — visible only when section is collapsed
   ========================================================================== */

.ku-section-summary {
    display: none;
    list-style: disc;
    padding: 0 0 8px 18px;
    margin: -6px 0 0 0;
    font-size: 15px;
    line-height: 1.9;
}

.ku-dashboard-section.ku-section-collapsed .ku-section-summary {
    display: block;
}

/* Text color by section */
[data-ku-section="0"] .ku-section-summary,
[data-ku-section="1"] .ku-section-summary {
    color: #ffffff;
}

[data-ku-section="2"] .ku-section-summary {
    color: #122B46;
}


/* ==========================================================================
   Toggle button (+/-)
   Appended to .ku-dashboard-section directly, so top/right are relative to
   the section container (which has position: relative).
   ========================================================================== */

button.ku-accordion-toggle,
.ku-accordion-toggle {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 21px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
    transition: background 0.2s ease;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

button.ku-accordion-toggle:hover,
.ku-accordion-toggle:hover {
    background: rgba(255, 255, 255, 0.45) !important;
}

/* Other Features section (gold bg) uses dark button */
[data-ku-section="2"] button.ku-accordion-toggle,
[data-ku-section="2"] .ku-accordion-toggle {
    border-color: #122B46 !important;
    color: #122B46 !important;
    background: rgba(18, 43, 70, 0.1) !important;
}

[data-ku-section="2"] button.ku-accordion-toggle:hover,
[data-ku-section="2"] .ku-accordion-toggle:hover {
    background: rgba(18, 43, 70, 0.2) !important;
}


/* ==========================================================================
   Notice / message boxes
   Used by dashboard tools to display status feedback (save confirmations,
   warnings, info messages). Base class + modifier classes.
   ========================================================================== */

/**
 * Base notice — neutral/info style.
 * Rounded icon block on left (slate-blue), pale background, dark navy text.
 * Color modifiers override block color and background.
 */
.ku-dashboard-notice {
    position: relative;
    display: block;
    padding: .625rem .875rem .625rem 3.5rem;
    margin: .75rem 0;
    border: 1px solid #657C91;
    background: #f0f3f6;
    color: #122B46 !important;
    font-size: 14px;
    font-style: normal !important;
    font-weight: 600;
    border-radius: 9px;
    line-height: 1.5;
    min-height: 2.75rem;
    overflow: hidden;
}

.ku-dashboard-notice::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px 0 0 9px;
    background: #657C91;
    color: #ffffff;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
}

/** Success — sage green icon block, light sage background. */
.ku-dashboard-notice.ku-dashboard-notice-success {
    border-color: #A8B691 !important;
    background: #E9EDE3 !important;
}
.ku-dashboard-notice.ku-dashboard-notice-success::before {
    content: "\2713";
    background: #A8B691 !important;
}

/** Warning — gold icon block, pale gold background. */
.ku-dashboard-notice.ku-dashboard-notice-warning {
    border-color: #DD9933 !important;
    background: #FAEFDA !important;
}
.ku-dashboard-notice.ku-dashboard-notice-warning::before {
    content: "!";
    background: #DD9933 !important;
}

/** Error — deep red icon block, pale red background. */
.ku-dashboard-notice.ku-dashboard-notice-error {
    border-color: #841516 !important;
    background: #F4E4E2 !important;
}
.ku-dashboard-notice.ku-dashboard-notice-error::before {
    content: "\2715";
    background: #841516 !important;
}


/* ==========================================================================
   Global badge utilities
   Used across dashboard tools for status indicators.
   Base class + color modifier.
   ========================================================================== */

/**
 * Base badge — pill shape, white text.
 * Always pair with a color modifier: ku-badge-green, ku-badge-gold, ku-badge-red.
 */
.ku-badge {
    display: inline-block;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    border: 1px solid transparent;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff !important;
    vertical-align: middle;
    white-space: nowrap;
}

/** Green badge — sage green, for available/enabled/active states. */
.ku-badge.ku-badge-green {
    border-color: #6A8E22 !important;
    background: #A8B691 !important;
}

/** Gold badge — for warning/incomplete/pending states. */
.ku-badge.ku-badge-gold {
    border-color: #DD9933 !important;
    background: #DD9933 !important;
}

/** Red badge — for disabled/error/locked states. */
.ku-badge.ku-badge-red {
    border-color: #841516 !important;
    background: #841516 !important;
}

/** Outline badge — white with navy border/text, for "open to everyone" /
 *  unrestricted states, as distinct from the three status colors above. */
.ku-badge.ku-badge-outline {
    border-color: #122B46 !important;
    background: #ffffff !important;
    color: #122B46 !important;
}

/* label .ku-badge override removed 07-04-2026 - base .ku-badge is now
   13px / 2px 6px !important sitewide, so checkbox-adjacent badges and
   standalone badges (Role Definitions table, Visibility's Enabled column,
   etc.) are always the same size. See coding-rules.md badge-sizing note. */


/* ==========================================================================
   Dashboard accordion form inputs
   ========================================================================== */

.ku-dashboard-accordion-content input[type="radio"] {
    accent-color: #122B46 !important;
}

/* Design Settings checkboxes (World Home tab / World menu bar background /
   Section Title text opt-ins) - added 2026-08-14. Matches the navy accent
   and 16x16 sizing already used for checkboxes elsewhere in the system
   (see ku-getting-started.css). Were unstyled bare checkboxes before this -
   that's also why they were hard to click precisely. */
.ku-dashboard-accordion-content input[type="checkbox"] {
    accent-color: #122B46 !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 6px 0 0 !important;
    cursor: pointer;
}


/* ==========================================================================
   Mobile — stack sections vertically, always show cards
   ========================================================================== */

@media (max-width: 767px) {

    .ku-dashboard-container {
        align-self: auto !important;
        height: auto !important;
    }

    .ku-dashboard-section.ku-section-open,
    .ku-dashboard-section.ku-section-collapsed {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        align-self: flex-start !important;
        margin-bottom: 2px !important;
    }

    /* Sections collapse and expand on mobile the same as desktop.
       The summary bullet list shows when collapsed so the Host can
       see what is in the section without expanding it. */
}


/* World Setup form fields */
#ku-setup-description {
    width:        calc(100% - 10px);
    box-sizing:   border-box;
}


/* Dashboard intro message — "Select a card below to review or update this World's settings." */
#ku-dashboard-intro-text {
    margin:      4px 0 10px;
    padding:     0 0 0 13px;
    font-size:   16px;
    color:       #122B46;
}

/* Setup Tool — bottom action row (Save Settings + World Home button).
   Added 07-10-2026. */
.ku-setup-actions-row {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}



/* ==========================================================================
   Shared Dashboard Table Base
   Added 07-11-2026 for the Member Status tool - the first tool built to
   use one real shared table look instead of copy-pasting the same header/
   cell rules into each tool's own CSS file (which is what every earlier
   table-based tool did - see World Roles and Asset Visibility tables).
   Any tool's <table class="ku-dashboard-table"> gets this look automatically,
   unscoped - no wrapper class needed. Column widths and anything else that
   genuinely differs per tool still belong in that tool's own CSS file, not
   here. Retrofitting older tools onto this base is separate, future work -
   intentionally not done as part of this change.
   ========================================================================== */

table.ku-dashboard-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

table.ku-dashboard-table thead th {
	background: #122B46;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
	line-height: 1.4;
	vertical-align: middle;
}

table.ku-dashboard-table tbody td {
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.4;
	vertical-align: top;
}

table.ku-dashboard-table tbody td strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 0;
	line-height: 1.1;
	color: #122B46;
}

@media (max-width: 768px) {
	table.ku-dashboard-table thead th,
	table.ku-dashboard-table tbody td {
		padding: 8px;
		font-size: 14px;
	}
}

/* Shared scrollbar wrapper for any horizontally-scrolling table. Same
   rules already duplicated in ku-world-roles.css and
   ku-dashboard-visibility-tools.css - written once here for any new tool
   to use going forward. Existing tools keep their own copies for now. */
.ku-dashboard-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	scrollbar-width: auto;
	scrollbar-color: #EDC993 #f3f3f3;
}

.ku-dashboard-table-wrapper::-webkit-scrollbar {
	height: 14px;
}

.ku-dashboard-table-wrapper::-webkit-scrollbar-track {
	background: #f3f3f3;
	border-radius: 8px;
}

.ku-dashboard-table-wrapper::-webkit-scrollbar-thumb {
	background: #EDC993;
	border-radius: 8px;
	border: 2px solid #f3f3f3;
}

.ku-dashboard-table-wrapper::-webkit-scrollbar-thumb:hover {
	background: #D9B97F;
}


/* ==========================================================================
   Shared Dashboard Confirmation Modal
   Added 07-11-2026. Any button with class="ku-dashboard-confirm-btn" and a
   data-ku-confirm-message="..." attribute gets this platform-style dialog
   instead of the browser's native confirm(). See ku-dashboard-accordion.js
   for the behavior - that file already loads on every Dashboard tool page,
   so this modal is available everywhere with no extra enqueue needed.
   First user: Meetings dashboard's Delete Event button.
   ========================================================================== */

.ku-dashboard-confirm-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(18, 43, 70, 0.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
}

.ku-dashboard-confirm-modal-inner {
	background: #ffffff;
	border-radius: 10px;
	padding: 20px;
	max-width: 400px;
	width: 90%;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.ku-dashboard-confirm-modal-message {
	margin: 0 0 18px 0;
	font-size: 14px;
	line-height: 1.4;
	color: #122B46;
}

.ku-dashboard-confirm-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.ku-dashboard-confirm-modal-footer .button {
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 6px 14px !important;
	height: auto !important;
	min-height: 0 !important;
	border-radius: 6px !important;
	box-shadow: none !important;
}

.ku-dashboard-confirm-ok {
	background: #841516 !important;
	border: 1px solid #841516 !important;
	color: #ffffff !important;
}

.ku-dashboard-confirm-ok:hover,
.ku-dashboard-confirm-ok:focus {
	background: #650f10 !important;
	border-color: #650f10 !important;
}


/* ==========================================================================
   Shared Dashboard Link Style
   ──────────────────────────────────────────────────────────────────────────
   The one gold/bold/underline link style used across every Dashboard tool
   (Subscribers, Calendar & Meetings, World Roles, Role Notifications, World
   Setup, and the tools they pull content from). Previously this exact style
   was copy-pasted as an inline style="..." attribute in a dozen+ places
   across the plugin, and one copy (.ku-manage-world-roles-link in
   ku-world-meetings.css) was missing !important and silently lost to
   BuddyBoss's own link styling, showing as plain light-blue with no
   underline. Consolidated here 07-11-2026 so there is exactly one place
   that defines this look. Use class="ku-dashboard-link" on any dashboard
   tool link that should use this style - do not reintroduce inline styles.
   ========================================================================== */
.ku-dashboard-link {
	color: #DD9933 !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}


/* ==========================================================================
   Passports Dashboard - Direct Link to Request Access
   Share-link block above the Passport accordions on the Subscribers
   (Passports) dashboard tool. Indented and outlined so it reads as a
   separate item, not one of the Passport Links rows. Added 07-27-2026,
   revised same day per Dianne's layout feedback.
   ========================================================================== */
.ku-share-link-block {
	margin: 16px 0 16px 20px;
	padding: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.ku-share-link-heading {
	margin: 0 0 12px;
}
.ku-share-link-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}
.ku-share-link-text {
	flex: 1 1 320px;
	margin: 0;
}
.ku-share-link-field {
	flex: 1 1 280px;
	max-width: 380px;
}
.ku-share-link-field label {
	display: block;
	font-weight: 600;
	font-size: 0.9em;
	margin-bottom: 4px;
}
.ku-share-link-field-row {
	display: flex;
	gap: 8px;
}
.ku-share-link-input {
	flex: 1 1 auto;
	width: auto;
}

/* World Setup dashboard - Admit Subscribers link, World Roles return
 * link, and World Name/Description/Type/Privacy fields. Moved out of
 * inline style= attributes in class-ku-world-dashboard-router.php on
 * 08-10-2026 - this file is confirmed to load unconditionally on the
 * World Setup dashboard page regardless of which ku_tool panel is
 * showing, unlike the tool-specific stylesheets (ku-admit-subscriber.css,
 * ku-world-roles.css), which are only switched on as a side effect of
 * other code and were not safe to assume were loaded here.
 */

.ku-subscriber-roles-link-wrap {
	margin-bottom: 16px;
}

.ku-role-return-link-wrap {
	margin: 0 0 1rem;
}

.ku-role-return-link {
	font-size: 14px;
}

.ku-setup-field-wrap {
	margin-bottom: 6px;
}

.ku-setup-field-wrap-spaced {
	margin-top: 14px;
	margin-bottom: 6px;
}

.ku-setup-field-wrap-top {
	margin-top: 16px;
}

.ku-setup-field-label {
	display: block;
	font-weight: 600 !important;
	font-size: calc( 1em + 1px );
	margin-bottom: 4px;
}

.ku-setup-field-input {
	width: 100%;
	max-width: 480px;
}

.ku-setup-field-select {
	max-width: 320px;
}

.ku-setup-privacy-heading {
	margin-bottom: 10px;
	font-weight: 600 !important;
	font-size: calc( 1em + 1px );
}

.ku-setup-privacy-option-wrap {
	margin-bottom: 8px;
}

.ku-setup-privacy-option-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

.ku-setup-privacy-radio {
	margin-top: 3px;
}

.ku-setup-privacy-option-desc {
	font-size: 13px;
	color: #555;
}