.label-width 
{
    font-weight: bold;
    width: 3rem; 
    display: block;
    margin: 0 auto;
}

.triangle-above-label {
    position: relative;
    height: 1.25rem; /* was 1.25rem */
}

.triangle-above-label::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 1.7rem solid transparent; /* Half the width of the triangle */
    border-right: 1.7rem solid transparent; /* Half the width of the triangle */
    border-bottom: 1.25rem solid black; /* Height and color of the triangle */
}

.triangle-below-label {
    position: relative;
    height: 1.33rem; /* was 1.875rem */
    width: 8.6rem;
}

.triangle-below-label::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4.3rem solid transparent; /* Half the width of the triangle */
    border-right: 4.3rem solid transparent; /* Half the width of the triangle */
    border-top: 1.25rem solid black; /* Height and color of the triangle */
}

.input-below-triangle {
    margin-top: 1.25rem; /* Adjust the value as needed to create space for the triangle */
    height: 2.75rem; /* was 3rem */
}

.triangle-before-label {
    position: relative;
    padding-left: 2rem; /* Adjust padding to create space for the triangle */
    min-width: 1.699rem; /* Adjust width to create space for the triangle */
}

.space-before-label
{
    position: relative;
    padding-left: 2rem;
    min-width: 1.699rem;
}

.space-before-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 1.06rem solid transparent; 
    border-bottom: 1.06rem solid transparent; 
    border-right: 1.7rem solid transparent; 
}

.triangle-before-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 1.06rem solid transparent; /* Half the height of the triangle */
    border-bottom: 1.06rem solid transparent; /* Half the height of the triangle */
    border-right: 1.7rem solid black; /* Width and color of the triangle */
}

.fs-8 {
    font-size: 0.5rem!important;
}

.fs-10 {
    font-size: 0.625rem!important;
}

.fs-12 {
    font-size: 0.75rem!important;
}

.fs-14 {
    font-size: 0.875rem!important;
}

.secondary-attribute {
    height: 2.05rem; /* was 3.4rem */
}

.primary-attribute {
    height: 2.05rem; /* was 3.4rem */
}

.level-input, .spirit-input {
    height: 2.55rem;
}

.social-attributes {
    padding-right: 0;
    padding-left: 0;
}

.armour-labels .form-control, .scm-labels .form-control {
    padding-right: 0;
    padding-left: 0;
    /* line-height: 1.0rem; was 1.5rem */
}

.armour-worn-label, .shield-carried-label {
    margin: 0;
}

.armour-worn, .shield-carried {
 resize: none;
}

/* background pattern */
body {
    margin: 0;
    background: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 169.5'%3E%3Cpolygon points='50,34.75 93.5,59.75 93.5,109.75 50,134.75 6.5,109.75 6.5,59.75' fill='none' stroke='rgb(240,240,240)' stroke-width='0.4'/%3E%3Cpolygon points='0,-50 43.5,-25 43.5,25 0,50 -43.5,25 -43.5,-25' fill='none' stroke='rgb(240,240,240)' stroke-width='0.4'/%3E%3Cpolygon points='100,-50 143.5,-25 143.5,25 100,50 56.5,25 56.5,-25' fill='none' stroke='rgb(240,240,240)' stroke-width='0.4'/%3E%3Cpolygon points='0,119.5 43.5,144.5 43.5,194.5 0,219.5 -43.5,194.5 -43.5,144.5' fill='none' stroke='rgb(240,240,240)' stroke-width='0.4'/%3E%3Cpolygon points='100,119.5 143.5,144.5 143.5,194.5 100,219.5 56.5,194.5 56.5,144.5' fill='none' stroke='rgb(240,240,240)' stroke-width='0.4'/%3E%3C/svg%3E");
    background-size: 128px;
    background-repeat: repeat;
}

/* Dark theme background */
body[data-bs-theme="dark"] {
    background-color: #212529;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 169.5'%3E%3Cpolygon points='50,34.75 93.5,59.75 93.5,109.75 50,134.75 6.5,109.75 6.5,59.75' fill='none' stroke='rgb(40,40,40)' stroke-width='0.4'/%3E%3Cpolygon points='0,-50 43.5,-25 43.5,25 0,50 -43.5,25 -43.5,-25' fill='none' stroke='rgb(40,40,40)' stroke-width='0.4'/%3E%3Cpolygon points='100,-50 143.5,-25 143.5,25 100,50 56.5,25 56.5,-25' fill='none' stroke='rgb(40,40,40)' stroke-width='0.4'/%3E%3Cpolygon points='0,119.5 43.5,144.5 43.5,194.5 0,219.5 -43.5,194.5 -43.5,144.5' fill='none' stroke='rgb(40,40,40)' stroke-width='0.4'/%3E%3Cpolygon points='100,119.5 143.5,144.5 143.5,194.5 100,219.5 56.5,194.5 56.5,144.5' fill='none' stroke='rgb(40,40,40)' stroke-width='0.4'/%3E%3C/svg%3E");
}

/* Dark theme table styling - softer borders */
body[data-bs-theme="dark"] table,
body[data-bs-theme="dark"] .table {
    --bs-table-border-color: #495057;
}

body[data-bs-theme="dark"] table thead,
body[data-bs-theme="dark"] .table thead {
    border-bottom-color: #495057;
}

body[data-bs-theme="dark"] table tbody tr,
body[data-bs-theme="dark"] .table tbody tr {
    border-bottom-color: #3a3f44;
}

/* Dark theme character sheet specific styles */
body[data-bs-theme="dark"] .profile-input {
    border-bottom-color: #adb5bd;
    background-color: transparent;
    color: #dee2e6;
}

body[data-bs-theme="dark"] .character-details input.form-control {
    background-color: transparent;
    border-color: #6c757d;
    color: #dee2e6;
}

body[data-bs-theme="dark"] .character-details input.form-control:focus {
    background-color: transparent;
    border-color: #adb5bd;
    color: #dee2e6;
}

body[data-bs-theme="dark"] .character-details select.form-control,
body[data-bs-theme="dark"] .character-details select.form-select {
    background-color: #343a40;
    border-color: #6c757d;
    color: #dee2e6;
}

body[data-bs-theme="dark"] .character-details textarea.form-control {
    background-color: #343a40;
    border-color: #6c757d;
    color: #dee2e6;
}

/* Dark theme - invert bg-dark elements to be darker grey */
body[data-bs-theme="dark"] .bg-dark {
    background-color: #495057 !important;
    color: #f8f9fa !important;
}

body[data-bs-theme="dark"] .text-light {
    color: #f8f9fa !important;
}

body[data-bs-theme="dark"] .text-muted {
    color: #adb5bd !important;
}

body[data-bs-theme="dark"] .border-dark {
    border-color: #6c757d !important;
}

/* Dark theme - fix sticky elements with bg-white */
body[data-bs-theme="dark"] .sticky-top.bg-white {
    background-color: #212529 !important;
}

/* Dark theme - add background to image containers */
body[data-bs-theme="dark"] .character-details .col-4.text-center {
    background-color: #212529;
}

body[data-bs-theme="dark"] .character-details img.image-fluid {
    background-color: transparent;
}

body[data-bs-theme="dark"] .btn-custom {
    background-color: #495057;
    color: #dee2e6;
    border-color: #6c757d;
}

body[data-bs-theme="dark"] .nav-tabs {
    background-color: #212529;
    border-bottom-color: #495057;
}

body[data-bs-theme="dark"] .nav-tabs .nav-link {
    background-color: #343a40;
    border-color: #495057;
    color: #adb5bd;
}

body[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    background-color: #495057;
    border-color: #495057;
    color: #f8f9fa;
}

body[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: #212529;
    border-color: #495057 #495057 #212529;
    color: #f8f9fa;
}

/* Light theme - ensure tab text stays black, not blue */
body:not([data-bs-theme="dark"]) .nav-tabs .nav-link {
    color: #212529;
}

body:not([data-bs-theme="dark"]) .nav-tabs .nav-link.active {
    color: #212529;
}

/* Light theme - sticky tabs need solid background */
body:not([data-bs-theme="dark"]) .character-details .nav-tabs.sticky-top {
    background-color: #ffffff;
}

.left-social-column{
    padding-right: 0;
}

.right-social-column{
    padding-left: 0;
}

.social-label
{
    margin-bottom: 0;
    padding: 0;
    line-height: 1.2rem;
}

.body-hit-locations .col, .scm-locations .col {
    padding: 0;
}

.body-hit-locations .form-control, .scm-locations .form-control {
    width: 100%; /* Ensures input takes full width */
    margin: 0;
}

.body-hit-locations .form-label, .scm-locations .form-label {
    width: 100%; /* Adjust the label width */
}

.body-hit-locations .label-group, .scm-locations .label-group {
    width: 100%;
}

.scm-locations {
    margin-top: 0.4rem; /* was 0.4rem */
}

/* these styles highlight the entire input box with bootstrap's default colour  */
.character-details input:focus {
    background-color: #80bdff; /* Adjust the color to match Bootstrap's focus border */
}

.character-details input::selection {
    background: transparent; /* Makes the selection background transparent */
    color: inherit; /* Keeps the text color the same */
}

/* New styles to prevent focus effects on read-only inputs */
.character-details input.no-highlight:focus, .character-details button.no-highlight:focus {
    background-color: inherit; /* Keeps the original background color */
    outline: none; /* Removes focus outline */
    box-shadow: none; /* Removes focus shadow if any */
}

/* To keep the text color unchanged for ::selection in read-only inputs */
.character-details input.no-highlight::selection, .character-details button.no-highlight::selection {
    background: transparent;
    color: inherit;
}

/* Additional styles if needed to ensure no visual change on focus */
.character-details input.no-highlight, .character-details button.no-highlight {
    cursor: default; /* Changes cursor to default to indicate non-interactivity */
}

.character-details select {
    padding: 0.2rem; /* Adjust padding to match input fields */
}

/* Turn off focus highlight for read-only or non-interactive select elements */
.character-details select.no-highlight:focus {
    background-color: inherit;
    outline: none;
    box-shadow: none;
}

/* Turn off selection highlight for select elements (has limited effect, but included for consistency) */
.character-details select.no-highlight::selection {
    background: transparent;
    color: inherit;
}

/* General style for select elements marked as no-highlight */
.character-details select.no-highlight {
    cursor: default;
}

.character-details select {
    padding: 0.2rem;
}

.vertical-text {
      writing-mode: vertical-rl; /* vertical text, top to bottom */
      transform: rotate(0deg);   /* no rotation needed */
      text-align: center;
      white-space: nowrap;
}

.profile-input {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid black
}

.weapon-input-left, .psionic-input-left {
    padding-left: 0;
}

.weapon-input-right, .psionic-input-right {
    padding-right: 0;
}

.weapon-input-padding, .psionic-input-padding {
    padding-left: 0;
    padding-right: 0;
}

.weapon-label, .psionic-label {
    margin-bottom: 0;
    padding: 0;
    line-height: 1.2rem;
    white-space: nowrap;
}

.w-4 {
    width: 4%;
}

.w-96 {
    width: 96%;
}

.btn-custom
{
    height: 1.22rem;
    width: 2rem!important;
    padding: 0;
    margin-top: -0.60rem;
    background-color: #e9ecef;
    line-height: 0.75rem;
    color: black;
}

/* Page printing styles */
@media print {
    body {
        margin: 0;
        padding: 0;
    }

    .no-print {
        display: none;
    }

    .print-only {
        display: block !important;
    }

    /* Prevent page breaks from other tabs */
    .end-page {
        page-break-after: auto !important;
    }

    .bg-dark 
    {
        background-color: #343a40 !important; /* Bootstrap's dark background color */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    .btn-custom
    {
        background-color: #e9ecef !important; /* Bootstrap's secondary color */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    /* Hide all tab panes except summary */
    .tab-content > .tab-pane {
        display: none !important;
    }

    /* Show only the summary tab */
    .tab-content > #summary-tab-pane {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Remove bottom margins that might cause page breaks */
    #summary-tab-pane > *:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #character-summary-container {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #character-summary-container > *:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Ensure print-only content shows when printing */
    #summary-tab-pane .print-only {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Increase font sizes in summary sections for better readability */
    #summary-tab-pane .fs-12 {
        font-size: 10pt !important; /* Use point sizes for print */
    }

    #summary-tab-pane .fw-bold.fs-12 {
        font-size: 11pt !important; /* Slightly larger for section headings */
    }

    /* Body Hit Locations with better font sizing and spacing */
    #summary-tab-pane .body-hit-locations .fs-12,
    #summary-tab-pane .scm-locations .fs-12,
    #summary-tab-pane .body-hit-locations .form-control,
    #summary-tab-pane .scm-locations .form-control {
        font-size: 9pt !important;
        padding: 4px 2px !important;
        line-height: 1.4 !important;
    }

    #summary-tab-pane .body-hit-locations .fs-10,
    #summary-tab-pane .scm-locations .fs-10 {
        font-size: 7pt !important;
    }

    /* Make attribute values larger and more readable */
    #summary-tab-pane input.primary-attribute,
    #summary-tab-pane .primary-attribute.form-control {
        font-size: 12pt !important;
        padding: 4px 6px !important;
        height: auto !important;
        line-height: normal !important;
    }

    /* Target only attribute labels in the attributes section */
    #summary-tab-pane .attributes-section .attribute-label-group {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: 32px !important;
    }

    #summary-tab-pane .attributes-section .form-label {
        margin-bottom: 0 !important;
        line-height: 0.9 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Reduce spacing between attribute rows */
    #summary-tab-pane .body-hit-locations .row {
        margin-bottom: 2px !important;
    }

    #summary-tab-pane .body-hit-locations .mb-1 {
        margin-bottom: 2px !important;
    }

    /* Add spacing to body hit locations sections */
    #summary-tab-pane .body-hit-locations {
        margin-bottom: 4px !important;
    }

    #summary-tab-pane .scm-locations {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Ensure section headers are readable */
    #summary-tab-pane h6.fw-bold {
        font-size: 12pt !important;
    }

    /* Make character header info more readable */
    #summary-tab-pane .fs-14 {
        font-size: 11pt !important;
    }

    /* Fix BloodStar image size for print */
    #summary-tab-pane img[alt="The BloodStar Logo"] {
        max-width: 40px !important;
        width: 100% !important;
    }

    /* Ensure column widths are respected in print */
    #summary-tab-pane .col-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    #summary-tab-pane .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}


.character-details input.form-control {
    padding: 0.3rem;
    font-size: .8rem; /* 80% of the original 1rem */
    /* Adjust line-height if necessary */
    line-height: 1.2; /* Example value, tweak as needed */
    /* Border remains 1px */
}

/* Custom styles for larger checkboxes */
.form-check-input.styled-checkbox {
    /* Make the checkbox larger */
    width: 100%; 
    height: 1.622rem;
  
    /* Align the checkbox if using inline form */
    vertical-align: middle;

    margin: 0;
    margin-top: -0.60rem; /* had nudge this up a bit */

    /* Custom background color when not checked */
    &:not(:checked) {
        background-color: rgba(108, 117, 125, 0.1); /* Bootstrap's secondary color */
        fill-opacity: 0.1;
    }
  }

.career-notes {
height: 4.7rem; 
resize: none;
}

.specialties, .moral-codes {
resize: none;
}

.end-page {
page-break-after: always;
}

/* Initially hide text for all screens */
.show-small-screen {
    display: none;
}

/* Hide print-only content on screen */
.print-only {
    display: none !important;
}

@media screen and (max-width: 576px) and (orientation: portrait) {
    .hide-small-screen {
        display: none;
    }

    .show-small-screen {
        display: block;
    }
}

.filter-dropdown {
    width: 25%;
}

.max-col-width {
    max-width: 0.5rem;
}

.max-col-width-2 {
    min-width: 3.5rem;
    max-width: 3.5rem;
}

.mb-10 {
    margin-bottom: 5rem!important;
}

.bg-purple {
    background-color: rgba(128, 0, 128, 0.2)
}

.transition-width {
    transition: width 0.5s ease-in-out!important;
}

.full-width-offcanvas {
    width: 100%!important;
}

.expandIcon {
    position: absolute; 
    border: 1px solid white;
    margin-left: -2.5rem;
    font-size: 1.5rem;
    top: 50%;
}

.ms-n2-5 {
    margin-left: -2.5rem!important;
}

.mb-n1-0 {
    margin-bottom: -1.0rem!important;
}

.mt-n1-0 {
    margin-top: -1.0rem!important;
}

.mt-n0-5 {
    margin-top: -0.5rem!important;
}

.mt-n0-30 {
    margin-top: -0.30rem!important;
}


/* Custom CSS to change the accordion chevron icon */
.accordion.item-details {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='white' stroke='white' stroke-width='1.0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='white' stroke='white' stroke-width='1.0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion.custom-item {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -5 26 26' fill='silver' stroke='silver' stroke-width='1.0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -5 26 26' fill='silver' stroke='silver' stroke-width='1.0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.custom-tooltip {
    --bs-tooltip-bg: rgba(108, 117, 125, 1.0);
}

.offcanvas-body {
    padding-left: 1.5rem!important;
}


.bg-info-light {
    background-color: rgba(13, 202, 240, 0.2)!important;
}

.bg-success-light {
    background-color: rgba(25, 135, 84, 0.2)!important;
}

.bg-warning-light {
    background-color: rgba(255, 193, 7, 0.2)!important;
}

.bg-danger-light {
    background-color: rgba(220, 53, 69, 0.2)!important;
}

/* Default style for all tabs */
#character .nav-link {
    border: 1px solid; 
    border-color: var(--bs-gray-200); /* Default light border */
}

/* Style for active tabs */
#character .nav-link.active {
    border-color: var(--bs-gray-500); /* Dark border for active tabs */
}


.form-switch .form-check-input {
    margin-left: -1rem; 
}


.mt-0-9 {
    margin-top: 0.9rem!important;
}

.attribute-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.attribute-row > div,
.spirit-wrapper {
  flex: 1 1 auto;
  text-align: center;
}

.spirit-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

.spirit-label {
  font-weight: bold;
}

.spirit-input-adversary {
  width: 3rem;
  padding: 0 0.25rem;
  text-align: center;
  font-size: 0.75rem;
}

.table-encounter {
    padding: 0.15rem;

}
.table-encounter>:not(caption)>*>*
{
  padding: 0.15rem;  
}

.sidebar {
  height: 100vh;
  overflow-y: auto;
  background-color: #f8f9fa;
  border-right: 1px solid #dee2e6;
}

.content {
  height: 100vh;
  overflow-y: auto;
}

/* Apply to tablets and smaller, including iPad 9" landscape (1024px) */
@media (max-width: 1199.98px) {
  .fs-14 {
    font-size: 0.58rem !important;
  }

  .fs-12 {
    font-size: 0.50rem !important;
  }

  .fs-10 {
    font-size: 0.42rem !important;
  }

  .secondary-attribute {
    height: 1.68rem; 
  }

  .primary-attribute {
    height: 1.68rem; 
  }
}

/* Galactic Map Page Specific Styles - Only applies when body has data-page="galactic-map" */
body[data-page="galactic-map"] main {
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
}

body[data-page="galactic-map"] {
    background: #000 !important;
}

body[data-page="galactic-map"] header nav {
    margin-bottom: 0 !important;
}

body[data-page="galactic-map"] .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
}

body[data-page="galactic-map"] #star-map-container {
    width: 100vw;
    height: calc(100vh - 56px);
    position: relative;
    background: #000;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-page="galactic-map"] #star-map-container canvas {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-page="galactic-map"] #panel-toggle-btn {
    position: absolute !important;
    top: 10px;
    left: 10px;
    z-index: 1000;
}

/* Theme-aware Map Info button */
body[data-bs-theme="dark"][data-page="galactic-map"] #panel-toggle-btn {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
}

body:not([data-bs-theme="dark"])[data-page="galactic-map"] #panel-toggle-btn {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #212529;
}

body:not([data-bs-theme="dark"])[data-page="galactic-map"] #panel-toggle-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

body[data-page="galactic-map"] #info-panel {
    width: 100% !important;
    top: 66px !important;
    height: calc(100vh - 66px - 60px) !important;
    backdrop-filter: blur(10px);
    overflow-y: auto;
}

/* Dark mode offcanvas */
body[data-bs-theme="dark"][data-page="galactic-map"] #info-panel {
    background: rgba(13, 27, 42, 0.98);
    color: #fff;
}

/* Light mode offcanvas - darker grey for contrast */
body:not([data-bs-theme="dark"])[data-page="galactic-map"] #info-panel {
    background: rgba(233, 236, 239, 0.98);
    color: #212529;
}

/* Medium screens (tablets like iPad) */
@media (min-width: 768px) {
    body[data-page="galactic-map"] #info-panel {
        width: 33.333% !important;
    }
}

/* Large screens (desktops) */
@media (min-width: 1200px) {
    body[data-page="galactic-map"] #info-panel {
        width: 25% !important;
    }
}

body[data-page="galactic-map"] #info-panel.offcanvas-end {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

body[data-bs-theme="dark"][data-page="galactic-map"] #info-panel.offcanvas-end {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

body:not([data-bs-theme="dark"])[data-page="galactic-map"] #info-panel.offcanvas-end {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

body[data-page="galactic-map"] #info-panel.offcanvas-start {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

body[data-bs-theme="dark"][data-page="galactic-map"] #info-panel.offcanvas-start {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

body:not([data-bs-theme="dark"])[data-page="galactic-map"] #info-panel.offcanvas-start {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

body[data-page="galactic-map"] #info-panel .offcanvas-header {
    padding: 1rem;
}

body[data-bs-theme="dark"][data-page="galactic-map"] #info-panel .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body:not([data-bs-theme="dark"])[data-page="galactic-map"] #info-panel .offcanvas-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body[data-bs-theme="dark"][data-page="galactic-map"] #info-panel .offcanvas-title {
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
}

body:not([data-bs-theme="dark"])[data-page="galactic-map"] #info-panel .offcanvas-title {
    color: #212529;
    font-weight: bold;
    font-size: 1.1rem;
}

body[data-bs-theme="dark"][data-page="galactic-map"] #info-panel .btn-close {
    filter: invert(1);
}

body:not([data-bs-theme="dark"])[data-page="galactic-map"] #info-panel .btn-close {
    filter: invert(0);
}

body[data-page="galactic-map"] #info-panel .offcanvas-body {
    padding: 1rem;
}

body[data-page="galactic-map"] #search-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body[data-page="galactic-map"] #search-box {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
}

body[data-page="galactic-map"] #search-box::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

body[data-page="galactic-map"] #search-box:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
}

body[data-page="galactic-map"] .search-buttons {
    display: flex;
    gap: 8px;
}

body[data-page="galactic-map"] .search-buttons button {
    flex: 1;
}

body[data-page="galactic-map"] #info-panel-content {
    color: rgba(255, 255, 255, 0.9);
}

body[data-page="galactic-map"] #info-panel-content h6 {
    color: #4da6ff;
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

body[data-page="galactic-map"] #info-panel-content p {
    margin-bottom: 8px;
    font-size: 0.85rem;
}

body[data-page="galactic-map"] .offcanvas-body::-webkit-scrollbar {
    width: 8px;
}

body[data-page="galactic-map"] .offcanvas-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body[data-page="galactic-map"] .offcanvas-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

body[data-page="galactic-map"] .offcanvas-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Footer height reduction */
.navbar.fixed-bottom {
    min-height: auto;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.navbar.fixed-bottom .navbar-text {
    margin: 0;
    padding: 0;
}

.navbar.fixed-bottom .container-fluid {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Header navbar height reduction */
header .navbar {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

header .navbar-brand {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 1.1rem;
}

header .navbar-brand img {
    width: 50px;
}

header .nav-link {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.9rem;
}

header .navbar-nav {
    margin-bottom: 0.1rem;
}