/* ============================================
   Global Typography Rules
   ============================================
   Disable hyphenation and word-breaking site-wide.
   We prefer text to wrap naturally rather than break mid-word.
*/
*,
*::before,
*::after {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Specifically target status messages and common UI elements */
.messages,
.messages--status,
.messages--warning,
.messages--error,
.drupal-message,
.gin-messages-wrapper,
.form-item__description,
.description,
.help-block,
label,
button,
.button,
.btn {
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
}

/* Cahoot Logo Block - Site-wide branding */
.cahoot-logo-block {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}

.cahoot-logo-link {
    display: block;
    line-height: 0;
}

.cahoot-logo-image {
    height: 40px;
    width: auto;
    display: block;
}

/* Cahoot Logo in breadcrumbs (both Gin and Olivero) */
.cahoot-breadcrumb-logo {
    height: 32px;
    width: auto;
    vertical-align: middle;
}

.cahoot-logo-brand {
    display: inline-flex;
    align-items: center;
    cursor: default;
}

.cahoot-logo-item {
    margin-right: 8px;
}

/* Olivero theme breadcrumb adjustments */
.breadcrumb .cahoot-logo-item {
    display: flex;
    align-items: center;
}

.breadcrumb .cahoot-breadcrumb-logo {
    height: 28px;
}

/* Cahoot Logo in Breadcrumb area - positioned at far left */
.cahoot-breadcrumb-with-logo {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cahoot-breadcrumb-logo-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.cahoot-breadcrumb-logo-img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    display: block;
}

/* Cahoot Main Navigation in Toolbar */
.cahoot-main-nav-toolbar {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

/* Remove back arrow from Dashboard breadcrumb link for non-admin users.
   The arrow (backtosite icon) implies "back to previous page" which is misleading -
   Dashboard is a fixed destination, not browser-like history navigation.
   Uses body class added via cahoot_preprocess_html(). */
body.cahoot-non-admin-toolbar .gin-breadcrumb__item:first-of-type .gin-breadcrumb__link::before {
    display: none;
}

/* Remove the left padding that was reserved for the back arrow icon */
body.cahoot-non-admin-toolbar .gin-breadcrumb__item:first-of-type .gin-breadcrumb__link {
    padding-inline-start: 0;
}

/* Breadcrumb separators: Use chevrons instead of pipes for better UX.
   Chevrons indicate hierarchy/navigation direction more clearly. */
body.cahoot-non-admin-toolbar .gin-breadcrumb__item + .gin-breadcrumb__item::before {
    content: "›";
    border: none;
    width: auto;
    height: auto;
    padding: 0 0.5em;
    margin: 0;
    font-size: var(--gin-font-size-s, 14px);
    color: var(--gin-color-text-light, #5c5c5c);
    opacity: 0.6;
}

/* Override the first-item separator (which had a pipe style) */
body.cahoot-non-admin-toolbar .gin-breadcrumb__item:first-of-type + .gin-breadcrumb__item::before {
    content: "›";
    border: none;
    width: auto;
    height: auto;
    padding: 0 0.5em;
    margin: 0;
}

/* ============================================
   Non-Admin Toolbar Layout Fixes
   ============================================
   For users with toolbar access but not admin permissions.
   The administration toolbar item's tray content is replaced via PHP
   (cahoot_toolbar_alter) with our custom navigation items.
*/

/* ============================================
   Cahoot Toolbar Icons for Vertical Sidebar
   ============================================
   Uses Gin's --icon CSS variable pattern for toolbar icons.
   Icons are SVG data URIs for consistent rendering.
*/

/* Dashboard icon (home/grid) */
.toolbar-icon-dashboard::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

/* Content icon (document) */
.toolbar-icon-content::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E");
}

/* View My Pages icon (globe) */
.toolbar-icon-view_my_pages::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

/* Help icon (question mark in circle) */
.toolbar-icon-help::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* Switch Group icon (arrows) */
.toolbar-icon-switch_group::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 1 21 5 17 9'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpolyline points='7 23 3 19 7 15'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
}

/* Add Content icon (plus in circle) */
.toolbar-icon-add_content::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
}

/* Manage Content icon (folder/list) */
.toolbar-icon-manage_content::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* ============================================
   Cahoot Vertical Sidebar Menu Styling
   ============================================
   Styles custom menu items for non-admin users in Gin's vertical sidebar.
   IMPORTANT: Scoped to non-admin users to avoid breaking Gin's default admin icons.
*/

@media (min-width: 61em) {
  /* Style menu items in the sidebar - ONLY for non-admin users */
  body.cahoot-non-admin-toolbar .toolbar-menu-administration > .toolbar-menu > li {
    display: block;
    margin: 0;
    border: none;
  }

  /* Style links to match Gin's admin menu items */
  body.cahoot-non-admin-toolbar .toolbar-menu-administration > .toolbar-menu > li > a {
    display: flex;
    align-items: center;
    height: 48px;
    padding-inline-start: calc(var(--gin-toolbar-width-collapsed, 64px) - var(--gin-spacing-m, 16px));
    padding-inline-end: 0;
    margin-block: 0 1px;
    margin-inline: var(--gin-spacing-xs, 8px);
    font-size: var(--gin-font-size, 14px);
    font-weight: 475;
    color: var(--gin-color-text, #1b1b1b);
    text-decoration: none;
    border-radius: var(--gin-border-m, 8px);
    overflow: hidden;
    white-space: nowrap;
    width: calc(var(--gin-toolbar-x-offset, 64px) - var(--gin-spacing-m, 16px));
    transition: width var(--gin-transition, 0.2s ease);
  }

  /* Expand links when sidebar is open */
  body.cahoot-non-admin-toolbar [data-toolbar-menu="open"] .toolbar-menu-administration > .toolbar-menu > li > a {
    width: calc(var(--gin-toolbar-width, 256px) - var(--gin-spacing-m, 16px) - var(--gin-spacing-xs, 8px) * 2);
  }

  /* Hover state */
  body.cahoot-non-admin-toolbar .toolbar-menu-administration > .toolbar-menu > li > a:hover {
    color: var(--cahoot-blue, #2F99C9);
    background-color: transparent;
  }

  /* Icon positioning - use Gin's ::before pseudo-element pattern */
  body.cahoot-non-admin-toolbar .toolbar-menu-administration > .toolbar-menu > li > a.toolbar-icon::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: var(--gin-icon-size-toolbar, 22px);
    height: var(--gin-icon-size-toolbar, 22px);
    margin-inline-end: var(--gin-spacing-s, 12px);
    background-color: var(--gin-color-text-light, #5c5c5c);
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  /* Icon color on hover */
  body.cahoot-non-admin-toolbar .toolbar-menu-administration > .toolbar-menu > li > a.toolbar-icon:hover::before {
    background-color: var(--cahoot-blue, #2F99C9);
  }

  /* Hide child items initially - they're flattened */
  body.cahoot-non-admin-toolbar .toolbar-menu-administration > .toolbar-menu > li.toolbar-menu__item--child {
    padding-inline-start: var(--gin-spacing-l, 24px);
  }

  body.cahoot-non-admin-toolbar .toolbar-menu-administration > .toolbar-menu > li.toolbar-menu__item--child > a {
    padding-inline-start: calc(var(--gin-toolbar-width-collapsed, 64px) - var(--gin-spacing-m, 16px) + var(--gin-spacing-l, 24px));
    font-weight: normal;
  }
}

.cahoot-toolbar-nav {
    display: flex;
    align-items: center;
}

.cahoot-toolbar-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.cahoot-toolbar-menu__item {
    margin: 0;
    padding: 0;
}

/* Match Gin secondary toolbar link style */
.cahoot-toolbar-menu__link {
    display: block;
    padding: 0 var(--gin-spacing-xs, 8px);
    color: var(--gin-color-text-light, #5c5c5c);
    text-decoration: none;
    font-family: var(--gin-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
    font-size: var(--gin-font-size-xs, 13px);
    font-weight: var(--gin-font-weight-normal, 400);
    line-height: 2;
    white-space: nowrap;
    border-radius: var(--gin-border-xxs, 2px);
}

.cahoot-toolbar-menu__link:hover {
    color: var(--cahoot-blue-hover, #2788b5);
    text-decoration: none;
}

.cahoot-toolbar-menu__link:focus {
    outline: 2px solid var(--gin-color-focus, #fff);
    outline-offset: -2px;
}

/* ============================================
   Cahoot Navigation Toolbar Tabs
   ============================================
   Consistent spacing for main navigation toolbar items.
*/

/* Even spacing for nav tabs */
.toolbar .cahoot-nav-tab {
    margin-right: 0;
}

/* Consistent padding on toolbar item links */
.toolbar .cahoot-nav-item {
    padding: 0 var(--gin-spacing-s, 12px);
}

/* Add margin after the last nav item to separate from user menu */
.toolbar .cahoot-nav-tab-last {
    margin-right: var(--gin-spacing-xl, 32px);
}

/* ============================================
   Main Navigation Menu - Dropdown Support
   ============================================
   Styles the Main Navigation block to show nested menus
   as dropdowns on hover, matching Gin toolbar styling.
*/

/* Main nav block in Gin header region - horizontal layout */
#block-gin-mainnavigation > ul.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* Top-level menu items */
#block-gin-mainnavigation > ul.menu > li.menu-item {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Top-level links - match Gin secondary toolbar style */
#block-gin-mainnavigation > ul.menu > li.menu-item > a,
#block-gin-mainnavigation > ul.menu > li.menu-item > span {
    display: block;
    padding: 0 var(--gin-spacing-xs, 8px);
    color: var(--gin-color-text-light, #5c5c5c);
    text-decoration: none;
    font-family: var(--gin-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
    font-size: var(--gin-font-size-xs, 13px);
    font-weight: var(--gin-font-weight-normal, 400);
    line-height: 2;
    white-space: nowrap;
    cursor: pointer;
    border-radius: var(--gin-border-xxs, 2px);
}

#block-gin-mainnavigation > ul.menu > li.menu-item > a:hover,
#block-gin-mainnavigation > ul.menu > li.menu-item > span:hover {
    color: var(--cahoot-blue-hover, #2788b5);
}

/* Nested menu (dropdown) - hidden by default */
#block-gin-mainnavigation > ul.menu > li.menu-item > ul.menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 200px;
    width: max-content; /* Allow dropdown to expand to fit content */
    max-width: 400px; /* Reasonable max width to prevent extremely wide dropdowns */
    background: var(--gin-bg-layer3, #fff);
    border-radius: 0 0 var(--gin-border-l, 8px) var(--gin-border-l, 8px);
    box-shadow: var(--gin-shadow-l2, 0 4px 12px rgba(0, 0, 0, 0.15));
    padding: var(--gin-spacing-xs, 8px);
    list-style: none;
    margin: 0;
}

/* Show dropdown on hover */
#block-gin-mainnavigation > ul.menu > li.menu-item:hover > ul.menu,
#block-gin-mainnavigation > ul.menu > li.menu-item:focus-within > ul.menu {
    display: block;
}

/* Dropdown menu items */
#block-gin-mainnavigation > ul.menu > li.menu-item > ul.menu > li.menu-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Dropdown links - styled like toolbar dropdown */
#block-gin-mainnavigation > ul.menu > li.menu-item > ul.menu > li.menu-item > a {
    display: block;
    padding: var(--gin-spacing-s, 8px) var(--gin-spacing-m, 12px);
    color: var(--cahoot-blue, #2F99C9);
    text-decoration: none;
    font-size: var(--gin-font-size-xs, 13px);
    font-weight: normal;
    border-radius: var(--gin-border-s, 4px);
    white-space: nowrap;
}

#block-gin-mainnavigation > ul.menu > li.menu-item > ul.menu > li.menu-item > a:hover {
    background-color: var(--cahoot-blue, #2F99C9);
    color: var(--color-white, #fff);
}

/* Add dropdown indicator arrow for items with children */
#block-gin-mainnavigation > ul.menu > li.menu-item--expanded > a::after,
#block-gin-mainnavigation > ul.menu > li.menu-item--expanded > span::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
}

/* Banner */

.cahoot-banner {
    padding-bottom: 10px;
    margin-left: -25px;
}

.cahoot-banner li {
    list-style-type: none;
    height: 60px;
    padding: 17px;
    margin-top: 10px;
}

.banner--Normal {
    color: var(--color-success-dark, #166534);
    background-color: var(--color-success-light, #dcfce7);
    border-color: var(--color-success, #22c55e);
}

.banner--Normal:before {
    content: url('../images/check.svg');
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}

.banner--Important {
    background-color: var(--color-warning-light, #fef3c7);
    border-color: var(--color-warning, #f59e0b);
    color: var(--color-warning-dark, #92400e);
}

.banner--Important:before {
    content: url('../images/warning.svg');
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}

.banner--Urgent {
    background-color: var(--color-danger-light, #fee2e2);
    color: var(--color-danger-dark, #991b1b);
    border-color: var(--color-danger, #dc2626);
}

.banner--Urgent:before {
    content: url('../images/error.svg');
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}

/* Clone */

.path-clone {
    background-color: var(--cahoot-blue, #2F99C9);
    background-image: url("../images/copy-stamp-white.png");
    background-repeat: space;
}

/* Main navigation in Claro theme (admin) */

#block-mainnavigation {
    padding-block-end: 50px;
    float: right;
}

#block-mainnavigation .menu-item {
    list-style-type: none !important;
    text-align: right;
    font-size: larger;
}

#block-mainnavigation li {
    float: left;
    font-weight: bold;
}

#block-mainnavigation li a {
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

#block-mainnavigation a:link {
    text-decoration: none;
}

#block-mainnavigation a:visited {
    text-decoration: none;
}

#block-mainnavigation a:hover {
    text-decoration: none;
    color: var(--cahoot-blue, #2F99C9);
}

#block-mainnavigation a:active {
    text-decoration: none;
    outline: none;
}

.resource-content {
    padding: 20px;
}

.group-block {
    border: #000;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    padding: 15px;
    margin: 10px;
}

.dashboard-header {
    padding: 30px;
}

/* Resource content and group blocks */
.resource-content {
    padding: 20px;
}

.group-block {
    border: #000;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    padding: 15px;
    margin: 10px;
}

.dashboard-header {
    padding: 30px;
}

/* Hide the logo image on login form side - full logo is on wallpaper */
body.gin-login .user-form-page__user-form .content-header img {
    display: none;
}

/* ============================================
   Cahoot Branded Login Page
   ============================================ */

/* Branded wallpaper background */
body.gin-login .user-form-page__wallpaper {
    background: linear-gradient(165deg, var(--cahoot-blue, #2F99C9) 0%, var(--cahoot-blue-light, #e8f4f8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Decorative shapes behind the logo */
body.gin-login .user-form-page__wallpaper::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    background:
        /* Large circle top-right - more visible */
        radial-gradient(circle 350px at 95% 5%, rgba(255, 255, 255, 0.25) 0%, transparent 60%),
        /* Medium circle bottom-left */
        radial-gradient(circle 300px at 5% 90%, rgba(255, 255, 255, 0.2) 0%, transparent 55%),
        /* Orange accent glow bottom-right */
        radial-gradient(circle 150px at 90% 80%, rgba(248, 155, 77, 0.25) 0%, transparent 60%),
        /* Navy shadow at bottom */
        radial-gradient(ellipse 120% 35% at 50% 105%, rgba(19, 40, 78, 0.25) 0%, transparent 55%);
}

/* Add Cahoot logo with navy text */
body.gin-login .user-form-page__wallpaper::before {
    content: "";
    position: absolute;
    width: 80%;
    max-width: 450px;
    height: 80%;
    background-image: url('../images/cahoot-logo-full.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    /* White glow shadow */
    filter: drop-shadow(0 4px 15px rgba(255, 255, 255, 0.5));
}

/* Override primary button color to Cahoot blue */
body.gin-login .button--primary {
    background-color: var(--cahoot-blue, #2F99C9);
}
body.gin-login .button--primary:hover {
    background-color: var(--cahoot-navy, #13284E);
}
body.gin-login .button--primary:active {
    background-color: var(--cahoot-navy, #13284E);
}

/* Links in Cahoot blue */
body.gin-login a,
body.gin-login .link,
body.gin-login .forgot-password-link {
    color: var(--cahoot-blue, #2F99C9);
}
body.gin-login a:hover,
body.gin-login .link:hover,
body.gin-login .forgot-password-link:hover {
    color: var(--cahoot-navy, #13284E);
}

/* IEF Complex - Person List table layout fixes */
/* Force all TD cells in Person IEF table to display as table cells */
.field--name-field-persons .ief-entity-table td {
    display: table-cell !important;
    vertical-align: middle;
}

/* Force all field wrappers inside TDs to also be table-cell or inline */
.field--name-field-persons .ief-entity-table td > * {
    display: inline-block !important;
}

/* Fix tabledrag handle to display as table cell, not block */
.field--name-field-persons .ief-tabledrag-handle.tabledrag-cell {
    display: table-cell !important;
    width: 30px;
    vertical-align: middle;
}

/* Hide the weight dropdown field - we're using drag and drop instead */
.field--name-field-persons .ief-entity-table .tabledrag-hide {
    display: none !important;
}

/* Ensure profile photo column stays compact */
.field--name-field-persons .ief-entity-table td.inline-entity-form--field-field-profile-photo {
    width: 120px;
    max-width: 120px;
}

.field--name-field-persons .ief-entity-table td.inline-entity-form--field-field-profile-photo img {
    max-width: 100px;
    height: auto;
    display: block;
}

/* ============================================
   Toolbar Tray Dropdown - Positioning & Width
   ============================================
   Allow toolbar dropdown trays (View My Pages, Manage Content, etc.)
   to expand wider when content needs more space.
   Left-align dropdowns under their parent tab.
*/

/* View My Pages and other Cahoot nav dropdown trays */
.toolbar .toolbar-tab.cahoot-nav-tab .toolbar-tray,
.toolbar .toolbar-tab.cahoot-nav-tab-last .toolbar-tray {
    min-width: 220px !important;
    width: max-content !important;
    max-width: 450px !important;
    /* Left-align dropdown under parent tab instead of right-align */
    left: 0 !important;
    right: auto !important;
}

/* Target the toolbar-menu ul inside the tray - this has the background */
.toolbar .toolbar-tab.cahoot-nav-tab .toolbar-tray .toolbar-menu,
.toolbar .toolbar-tab.cahoot-nav-tab-last .toolbar-tray .toolbar-menu {
    min-width: 220px;
    width: max-content;
    max-width: 450px;
    background: var(--gin-bg-layer3, #fff);
    border-radius: var(--gin-border-m, 8px);
    box-shadow: var(--gin-shadow-l2, 0 4px 12px rgba(0, 0, 0, 0.15));
    padding: var(--gin-spacing-xs, 8px);
}

/* Ensure toolbar menu items don't wrap unnecessarily */
.toolbar .toolbar-tab.cahoot-nav-tab .toolbar-menu li a,
.toolbar .toolbar-tab.cahoot-nav-tab-last .toolbar-menu li a {
    white-space: nowrap;
    display: block;
    padding: var(--gin-spacing-s, 8px) var(--gin-spacing-m, 12px);
}

/* Hover state for links in Cahoot nav dropdowns */
.toolbar .toolbar-tab.cahoot-nav-tab .toolbar-menu li a:hover,
.toolbar .toolbar-tab.cahoot-nav-tab-last .toolbar-menu li a:hover {
    background-color: var(--cahoot-blue, #2F99C9);
    color: var(--color-white, #fff);
    border-radius: var(--gin-border-s, 4px);
}

/* Content dropdown - "Manage" section header before first item */
.toolbar .toolbar-tab.cahoot-nav-manage-content .toolbar-menu li:first-child::before {
    content: 'Manage';
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--gin-color-text-light, #6b7280);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--gin-spacing-xs, 6px) var(--gin-spacing-m, 12px);
    margin: 0;
    background: var(--gin-bg-layer2, #f0f4f9);
    border-radius: 0;
}

/* Content dropdown - "Add" section header before second item */
.toolbar .toolbar-tab.cahoot-nav-manage-content .toolbar-menu li:nth-child(2)::before {
    content: 'Add';
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--gin-color-text-light, #6b7280);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--gin-spacing-xs, 6px) var(--gin-spacing-m, 12px);
    margin: var(--gin-spacing-xs, 6px) 0 0 0;
    background: var(--gin-bg-layer2, #f0f4f9);
    border-radius: 0;
}

/* Content dropdown - indent links under headers */
.toolbar .toolbar-tab.cahoot-nav-manage-content .toolbar-menu li a {
    padding-left: 24px;
    font-size: 13px;
}

/* Content dropdown - hover for links */
.toolbar .toolbar-tab.cahoot-nav-manage-content .toolbar-menu li a:hover {
    background-color: var(--cahoot-blue-light, #e8f4f8);
    color: var(--cahoot-blue, #2F99C9);
}

/* ============================================
   Tour Module - Welcome Tour Style
   ============================================
   Styled to match the welcome slideshow design.
   Uses orange gradient buttons, light blue header, white content.
*/

/* Main tooltip container */
.shepherd-enabled.shepherd-element {
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden;
    border: none !important;
    background: var(--color-white, #fff) !important;
    max-width: 400px;
}

/* Content area inside tooltip */
.shepherd-element .shepherd-content {
    border-radius: 16px;
    background: var(--color-white, #fff);
}

/* Header section - light blue gradient like welcome slideshow */
.shepherd-has-title .shepherd-content .shepherd-header {
    background: linear-gradient(180deg, var(--cahoot-blue-light, #e8f4f8) 0%, var(--color-white, #fff) 100%) !important;
    padding: 20px 50px 12px 20px;
    margin-bottom: 0;
}

/* Title styling - navy like welcome slideshow */
.shepherd-element .shepherd-title {
    color: var(--cahoot-navy, #13284E) !important;
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1.25;
}

/* Close button styling */
.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
    color: var(--color-gray-400, #9ca3af) !important;
    font-size: 1.5em;
    position: absolute;
    top: 16px;
    right: 16px;
    transition: color 0.15s ease;
}

.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
    color: var(--color-gray-700, #374151) !important;
}

/* Text content area */
.shepherd-element .shepherd-text {
    padding: 8px 20px 16px;
    color: var(--color-gray-600, #525252);
    line-height: 1.6;
    font-size: 0.95em;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

/* Footer with buttons */
.shepherd-element .shepherd-footer {
    padding: 0 20px 20px !important;
    gap: 12px;
    background-color: var(--color-white, #fff);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Button styling - rounded corners */
.shepherd-element .shepherd-button {
    border-radius: 10px !important;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 0.9em;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Primary button (Next) - orange gradient like welcome slideshow */
.shepherd-element .shepherd-button:not(.shepherd-button-secondary):not(.tour-dont-show-again) {
    background: linear-gradient(135deg, var(--color-accent-dark, #E8893F) 0%, var(--color-accent, #F89B4D) 100%) !important;
    color: var(--color-white, #fff) !important;
    box-shadow: 0 4px 14px 0 rgba(248, 155, 77, 0.4);
}

.shepherd-element .shepherd-button:not(.shepherd-button-secondary):not(.tour-dont-show-again):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(248, 155, 77, 0.5);
}

/* Secondary button (Back) - gray like welcome slideshow */
.shepherd-element .shepherd-button-secondary {
    background: var(--color-gray-100, #f3f4f6) !important;
    color: var(--color-gray-700, #374151) !important;
    border: none !important;
}

.shepherd-element .shepherd-button-secondary:hover {
    background: var(--color-gray-200, #e5e7eb) !important;
    color: var(--color-gray-900, #111827) !important;
}

/* Arrow styling - white background */
.shepherd-element .shepherd-arrow::before {
    background: var(--color-white, #fff);
    border-radius: 2px;
}

/* Arrow when pointing from header (bottom placement) - light blue */
.shepherd-element[data-popper-placement^="bottom"] > .shepherd-arrow::before {
    background: var(--cahoot-blue-light, #e8f4f8);
}

/* Tour progress indicator */
.shepherd-element .tour-progress {
    position: static !important;
    display: block;
    text-align: center;
    padding: 12px 20px;
    border-top: 1px solid var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-500, #6b7280);
    font-size: 0.85em;
    font-weight: 500;
}

/* "Don't Show Again" button - subtle link style */
.shepherd-element .shepherd-button.tour-dont-show-again {
    background: transparent !important;
    color: var(--color-gray-500, #6b7280) !important;
    border: none;
    font-size: 0.85em;
    padding: 8px 12px;
    margin-right: auto;
    text-decoration: underline;
    box-shadow: none;
}

.shepherd-element .shepherd-button.tour-dont-show-again:hover {
    background: transparent !important;
    color: var(--color-gray-700, #374151) !important;
    text-decoration: underline;
    transform: none;
    box-shadow: none;
}

/* Tour button styles removed - using sidebar highlight instead */

/* ============================================
   Tour Toolbar - Uses default toolbar button
   ============================================
   The tour module's default toolbar button is now used.
   Button text is customized via tour.settings config.
*/

/* ============================================
   Page Title Spacing
   ============================================
   Add top spacing to page title for better visual hierarchy.

   NOTE: Disabled 2025-12-08 - Caused layout issues on some pages.
   Keep for reference in case we want to revisit consistent page title spacing.
*/
/* #block-gin-page-title {
  margin-top: 1.5rem;
} */

/* ============================================
   Unpublished Marker
   ============================================
   Visual indicator for unpublished content in lists and tables.
   Used in group lists and other admin views.
*/
.marker--unpublished {
  display: inline-block;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-warning-dark, #92400e);
  background: var(--color-warning-light, #fef3c7);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm, 4px);
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Dim unpublished rows in tables */
tr.group-unpublished {
  opacity: 0.6;
  background-color: var(--color-gray-100, #f3f4f6);
}

tr.group-unpublished:hover {
  opacity: 0.85;
  background-color: var(--color-gray-200, #e5e7eb);
}