/*
==============================================================================
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;
  --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);
}


html,
body {
  height: 100%;
  font-family: 'Jost', sans-serif;
}

.content {
  margin-left: 60px;
  /*padding: 20px;*/
}

/* Sidebar */
.sidebar {
  width: 60px;
  background-color: 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 {
  background-color: #888;
}
.bottom-icon {
  margin-top: auto;
  text-align: center;
}
.bottom-icon .user-image {
  max-width: 20px;
}

.cogniti-home-logo {
  width: 28px;
}
.cogniti-nav-link-home-custom-logo {
  padding: 0px !important;
  text-align: left !important;
}
.cogniti-nav-link-home-custom-logo .cogniti-home-custom-logo {
  width: 60px;
}

.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);
}

/* 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;
}

/* ============================================================================
   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;
}