/*
==============================================================================
CONFIDENTIAL - NON-DISCLOSURE NOTICE
------------------------------------------------------------------------------
This file contains proprietary and confidential information belonging to
The University of Sydney. It is provided under the terms of a Non-Disclosure
Agreement (NDA) and/or Licence Agreement. Any unauthorized copying, sharing, 
or distribution of this code or any part thereof is strictly prohibited.

For the full details of your confidentiality obligations, please refer to
the NDA and/or Licence Agreement under which you have received this code.

© 2023-2025 The University of Sydney. All rights reserved.
==============================================================================
*/

/* CSS Custom Properties for Cogniti */
:root {
  /* Colors */
  --cogniti-color-bg-dark: #343a40;
  --cogniti-color-bg-info: #cff4fc;
  --cogniti-color-bg-mid-gray: #757575;
  --cogniti-color-bg-light-gray: #f9f9f9;
  --cogniti-color-bg-neutral-lighter: #f3f2f1;
  --cogniti-color-bg-success: #d1e7dd;
  --cogniti-color-info-text: #444545;
  --cogniti-color-link: #0d6efd;
  --cogniti-color-neutral-secondary: #605e5c;
  /* Accessible muted foreground — Bootstrap's default text-muted (#6c757d)
     fails 4.5:1 on light surfaces (#f8f9fa, #f7f7f7). Use this token on
     muted text instead. ~7:1 contrast on near-white. */
  --cogniti-color-muted-fg: #495057;
  --cogniti-color-primary: #0078d4;
  --cogniti-color-success-text: #0f5132;
  --cogniti-color-success: #107c10;
  --cogniti-color-warning: #d83b01;

  /* Font Sizes */
  --cogniti-font-size-sm: 0.75rem;
  --cogniti-font-size-md-sm: 0.875rem;
  --cogniti-font-size-base: 1rem;
  --cogniti-font-size-lg: 1.25rem;
  --cogniti-font-size-xl: 2rem;

  /* Spacing/Padding */
  --cogniti-spacing-lg: 20px;
  --cogniti-padding-badge: 0.25rem 0.5rem;
  --cogniti-spacing-base: 1rem;
  --cogniti-scrollbar-padding: 15px;

  /* Border Radius */
  --cogniti-border-radius-sm: 4px;
  --cogniti-border-radius-md: 8px;
  --cogniti-border-radius-circle: 50%;

  /* Box Shadow */
  --cogniti-box-shadow-left: -5px 0 5px -5px rgba(0, 0, 0, 0.3);
  --cogniti-box-shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.bg-badge-neutral {
  background-color: var(--cogniti-color-neutral-secondary);
  color: #fff;
}

html,
body {
  height: 100%;
  /* Use --brand-body-font when available (set by snippets/branding-styles.html).
     Falls back to Jost on pages that don't render the branding snippet
     (e.g. error pages) so typography stays consistent. */
  font-family: var(--brand-body-font, 'Jost', sans-serif);
}

/* mdtoast.css hardcodes Roboto; the extra `body` qualifier outweighs it so
   toasts follow the app (and user-selected) font like everything else. */
body .mdtoast {
  font-family: var(--brand-body-font, 'Jost', sans-serif);
}

.content {
  margin-left: 60px;
}

/* Sidebar
   Background uses --brand-sidebar (defined in snippets/branding-styles.html
   from the SIDEBAR_COLOR branding setting, which is independent of
   PRIMARY_COLOR) so instance-level branding flows into the navigation chrome.
   Falls back to --cogniti-color-bg-dark on pages that don't render the
   branding snippet (e.g. error pages) and for instances that have not
   customised SIDEBAR_COLOR. */
.sidebar {
  width: 60px;
  background-color: var(--brand-sidebar, var(--cogniti-color-bg-dark));
  color: var(--bs-white);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 10;
}

.sidebar .visually-hidden-focusable {
  background-color: var(--bs-blue);
  border: none;
  color: var(--bs-white);
  display: inline-block;
  font-size: var(--cogniti-font-size-lg);
  padding: 1rem;
  position: absolute;
  text-align: center;
  text-decoration: none;
  width: 250px;
}

.sidebar-icon {
  /*margin-bottom: 10px;*/
  font-size: 1.2rem;
  width: 60px;
}
.sidebar .nav-link {
  color: var(--bs-white);
  text-align: center;
  padding: 1.0rem 1rem 1.0rem 1rem;
}
.sidebar .nav-link:hover {
  /* Translucent overlay so the hover state works against any sidebar
     background colour (default dark grey or a configured brand primary). */
  background-color: rgba(0, 0, 0, 0.18);
}
.bottom-icon {
  margin-top: auto;
  text-align: center;
}
.bottom-icon .user-image {
  max-width: 20px;
}

.cogniti-home-logo {
  width: 28px;
}
/* Sidebar home/brand row.
   The home slot historically rendered the logo at 60px to fill the sidebar
   for Cogniti's purpose-built bordered circle. Custom-uploaded brand logos
   often have wider or non-square aspect ratios and look oversized at that
   size, so we constrain them to roughly the visual envelope of the other
   sidebar icons. ``object-fit: contain`` preserves the aspect ratio for
   wide marks (e.g. wordmarks) and ``max-width: 100%`` keeps them inside
   the sidebar's 60px slot.
   All padding is forced to 0 (overriding the 1rem inherited from
   ``.sidebar .nav-link``) so the image's ``max-width: 100%`` resolves
   against the full 60px slot width. With the inherited padding, the
   inner content area was only 28px wide and would silently clamp any
   square logo to 28x28 regardless of HOME_LOGO_MAX_HEIGHT. The bottom
   padding stays at 0 because the next row already provides its own top
   padding, giving a balanced gap. */
.cogniti-nav-link-home-custom-logo {
  padding: 0 !important;
  text-align: center !important;
}
.cogniti-nav-link-home-custom-logo .cogniti-home-custom-logo {
  display: inline-block;
  max-width: 100%;
  /* Driven by the HOME_LOGO_MAX_HEIGHT branding field (rendered into
     --brand-home-logo-max-height by snippets/branding-styles.html). The
     literal fallback covers pages that don't include the branding snippet
     (e.g. error pages). */
  max-height: var(--brand-home-logo-max-height, 32px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.spinner-grow-lg {
  width: 3rem;
  height: 3rem;
}

.dropdown-menu show {
  z-index: 2000;
}

.select2-container {
  z-index:1000;
}
.select2-container--open {
  z-index:15000;
}

/* Chevron visibility */
button.chevron {
    color: var(--bs-body-color);
}

button.chevron .bi-chevron-down {
    transition: transform 0.3s ease;
    transform: rotate(-90deg);
    display: inline-block;
}

button.chevron[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(0deg);
}

/* Eye icon visibility */
.cogniti-toggle-visibility .bi-eye-slash, .cogniti-toggle-visibility .bi-eye {
    display: none;
}
.cogniti-toggle-visibility[aria-expanded="false"] .bi-eye-slash {
    display: inline;
}
.cogniti-toggle-visibility[aria-expanded="true"] .bi-eye {
    display: inline;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-disabled {
  cursor: not-allowed !important;
}

/* Remap Bootstrap's default font sizes */
h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h2.modal-title {
  font-size: var(--cogniti-font-size-lg);
}

/* Allow column header text to wrap instead of truncating with ellipsis */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    white-space: normal !important;
}

/* Title at top, filter at bottom — aligns filters across columns with different title heights */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Common Tabulator styles for tables and content */
div.tabulator-table .tabulator-actions-cell a.btn,
div.tabulator-table .tabulator-actions-cell button {
  display: inline-block;
  min-height: 24px;
  min-width: 24px;
  padding-top: 0;
  text-align: center;
}

div.tabulator-table .tabulator-actions-cell > :first-child {
    margin-left: -0.75rem;
}

div.tabulator-table .tabulator-actions-cell > :last-child {
    margin-right: 0;
}

div.tabulator-table .tabulator-row.tabulator-group span.badge.bg-primary{
  color: #fff;
}

div.cogniti-global-announcement p:last-of-type {
  margin-bottom: 0;
}

/* ============================================================================
   Common Layout Classes
   ============================================================================ */

/* Base layout for all page content areas */
.page-content {
    width: 100%;
    padding: var(--cogniti-spacing-lg);
}

/* Responsive transition for collapsible sidebars */
.page-content-transition {
    transition: width 0.3s ease-in-out;
}

/* ============================================================================
   Responsive Sidebar Styles
   ============================================================================ */

/* Sidebar toggle button - hidden by default, shown on mobile */
.sidebar-toggle {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 11;
  background: var(--cogniti-color-bg-dark);
  border: none;
  color: white;
  padding: 0.35rem 0.5rem;
  border-radius: var(--cogniti-border-radius-sm);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sidebar-toggle:hover {
  background: #555;
}

.sidebar-toggle:focus {
  outline: 2px solid var(--cogniti-color-primary);
  outline-offset: 2px;
}

/* Sidebar overlay - covers content when sidebar is open on mobile */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.sidebar-open .sidebar-overlay {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767.98px) {
  body.sidebar-open {
    overflow: hidden;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-toggle {
    display: none;
  }

  .sidebar-toggle {
    display: inline-flex;
  }

  .content {
    margin-left: 0;
    padding: 1.5rem 1rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-overlay,
  .sidebar-toggle {
    transition: none !important;
  }
}

/* Simulation Mode Styles */

/* Simulation icon link - accent color background with white icon */
.sidebar .simulation-icon-link {
  background-color: var(--brand-accent) !important;
  color: #fff !important;
  padding: 0.5rem 1rem !important; /* Reduced padding for slimmer look */
}

.sidebar .simulation-icon-link i {
  font-size: 1.4rem !important; /* Larger icon */
}

.sidebar .simulation-icon-link:hover {
  background-color: var(--brand-accent) !important;
  filter: brightness(1.1);
  color: #fff !important;
}

/* Notification Bell Styles */
.notification-bell-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.notification-bell-container .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.notification-bell-container .notification-badge {
  position: absolute;
  top: 4px;
  left: 70%;
  transform: translateX(-50%);
  background-color: #ffffff;
  color: #dc3545;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  min-width: 1.5rem;
  height: 1.25rem;
  line-height: 0.95rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.notification-bell-container .notification-badge:empty,
.notification-bell-container .notification-badge[data-count="0"] {
  display: none;
}

.notification-bell-container .bi-bell {
  margin-top: 0.3rem;
}

.notification-bell-container .bi-exclamation-triangle-fill {
  margin-top: 0.3rem;
  color: white;
  background-color: var(--brand-accent);
  border-radius: 4px;
  padding: 0.25rem;
  font-size: 1rem;
}

/* =============================================================================
   Locale Selection Modal
   ============================================================================= */

#localeSelectionModal .locale-select-btn {
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#localeSelectionModal .locale-select-btn.active {
  pointer-events: none;
}

#localeSelectionModal .locale-select-btn:disabled {
  opacity: 0.6;
}

/* Language selector in user dropdown */
#userLocaleSelector {
  display: flex;
  align-items: center;
}

#currentLocaleName {
  font-weight: 500;
}

/* Section separator inside a sidebar tablist (e.g. agent-edit, organisation-edit,
   sandbox-edit, interactives-edit). Rendered as a presentation-only <li> so AT
   sees a clean tablist of tabs only; sighted users get a visual grouping. */
.cogniti-edit-nav-section {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #000000);
    margin: 1rem 0 0.25rem;
    list-style: none;
}

ul[role="tablist"] > .cogniti-edit-nav-section:first-child {
    margin-top: 0;
}