/* Existing styles in common.css */
body {
    font-size: .875rem;
}

.top, .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 10px;
}

.left {
    order: 1;
}

.right {
    order: 2;
}


.feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}



/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 48px; /* Height of navbar */
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

.sidebar .nav-link .feather {
    margin-right: 4px;
    color: #999;
}

.sidebar .nav-link.active {
    color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
    color: inherit;
}

.sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
}

/* Navbar */
.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
    padding: .75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

/* Utilities */
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

/* Custom Styles for Full Width */
.container-fluid, .row, .table-container, .main-content, .table-responsive {
    width: 100%;
    padding: 0;
    margin: 0;
}

#backlogChart {
    padding-bottom: 50px;
}

#datepicker-month-button {
    display: flex;
    align-items: center;
}

#datepicker-month-button .fa-calendar {
    margin-right: 5px;
}

#datepicker-month-input {
    width: 100%;
    margin-bottom: 10px;
}

.input-group.date {
    width: 100%;
}

/* Add this to your common.css */
.chart-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 50px;
}

.chart-container .col-md-6 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar {
    width: 200px;
}
.main-content {
    margin-left: 200px;
    padding: 20px;
    width: calc(100% - 200px);
}
.table-container {
    width: 100%;
    position: relative; /* Ensure this is set */
}

#tabContent {
    padding-top: 15px;
}

/* Apply flex layout to the container */
.customRangeSelection {
    display: flex;
    align-items: center; /* vertically center items */
}

/* Optional: add some spacing between elements */
.customRangeSelection > * {
    margin-right: 10px;
}

/* If you're using Bootstrap's .form-control which sets inputs to block,
   you may want to override their display and width for inline display: */
.datepicker-date {
    display: inline-block;
    width: auto;
}

/* Weekly Issued/Enf Revenue grouped headers and separators */
#weeklyIssuedTable thead tr.week-group th,
#weeklyEnfTable thead tr.week-group th,
#weeklyPayTable thead tr.week-group th,
#weeklyActiveTable thead tr.week-group th,
#weeklySitesTable thead tr.week-group th,
#weeklyUsersTable thead tr.week-group th {
    text-align: center;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

/* Visual separation between current and last-year columns */
#weeklyIssuedTable th.group-sep, 
#weeklyIssuedTable td.group-sep,
#weeklyEnfTable th.group-sep,
#weeklyEnfTable td.group-sep,
#weeklyPayTable th.group-sep,
#weeklyPayTable td.group-sep,
#weeklyActiveTable th.group-sep,
#weeklyActiveTable td.group-sep,
#weeklySitesTable th.group-sep,
#weeklySitesTable td.group-sep,
#weeklyUsersTable th.group-sep,
#weeklyUsersTable td.group-sep {
    border-left: 3px solid #6c757d; /* thicker separator */
}

/* Slight tint for last-year columns to distinguish */
#weeklyIssuedTable th.prev-year,
#weeklyIssuedTable td.prev-year,
#weeklyEnfTable th.prev-year,
#weeklyEnfTable td.prev-year,
#weeklyPayTable th.prev-year,
#weeklyPayTable td.prev-year,
#weeklyActiveTable th.prev-year,
#weeklyActiveTable td.prev-year,
#weeklySitesTable th.prev-year,
#weeklySitesTable td.prev-year,
#weeklyUsersTable th.prev-year,
#weeklyUsersTable td.prev-year {
    background-color: rgba(108,117,125,0.06); /* light gray tint */
}

/* Keep first header cell (Organisation) normal */
#weeklyIssuedTable thead th.org-spacer,
#weeklyEnfTable thead th.org-spacer,
#weeklyPayTable thead th.org-spacer,
#weeklyActiveTable thead th.org-spacer,
#weeklySitesTable thead th.org-spacer,
#weeklyUsersTable thead th.org-spacer {
    background: transparent;
    border: none;
}


/* Profile icon circle */
.navbar .profile-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #dc3545; /* Bootstrap danger red */
    border: 2px solid #dc3545; /* match the fill */
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

.navbar .nav-link:hover .profile-icon,
.navbar .nav-link:focus .profile-icon {
    background-color: #c82333; /* darker red on hover */
    border-color: #c82333;
}

/* Slightly larger feather icon inside the circle for visibility */
.navbar .profile-icon .feather {
    width: 18px;
    height: 18px;
    color: #fff; /* make the user icon white */
}


/* --- Mobile Offcanvas + Layout Fixes --- */
/* Match desktop sidebar styling for the mobile offcanvas menu */
#mobileSidebar { 
  /* Override Bootstrap link/nav variables within the offcanvas scope */
  --bs-link-color: #333;
  --bs-link-hover-color: #212529;
  --bs-nav-link-color: #333;
  --bs-nav-link-hover-color: #212529;
}
#mobileSidebar .nav-link { font-weight: 500; color: #333 !important; text-decoration: none; }
#mobileSidebar .nav-link:not(.active) { color: #333 !important; }
#mobileSidebar .nav-link.active { color: #0d6efd !important; }
#mobileSidebar .nav-link .feather { margin-right: 4px; color: inherit !important; stroke: currentColor; }
#mobileSidebar .nav-link:hover { color: #212529 !important; }
#mobileSidebar .nav-link:hover .feather,
#mobileSidebar .nav-link.active .feather { color: inherit !important; }

/* Remove gutters for legacy rows using no-gutters (Bootstrap 5 compatibility) */
.row.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }

/* Make canvases and charts responsive */
canvas, .chart-container canvas {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* Ensure main content is truly full-width on small screens */
@media (max-width: 767.98px) {
  .main-content { 
    margin-left: 0 !important; 
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: .75rem !important; /* soften edges vs px-4 from markup */
    padding-right: .75rem !important;
  }
  /* In case older Bootstrap utility is present */
  .ml-sm-auto { margin-left: 0 !important; }
}


/* --- Custom navbar color: Navy --- */
.navbar.bg-navy {
  background-color: #0b2e5b; /* navy-like dark blue */
}

/* Slightly more space below the top bar for the first desktop sidebar item */
@media (min-width: 768px) {
  .sidebar-sticky {
    padding-top: 1.25rem; /* was .5rem; give a bit more breathing room */
  }
}


/* Ensure brand area matches navy navbar without darker patch */
.navbar.bg-navy .navbar-brand {
  background-color: transparent;
  box-shadow: none;
}

/* Muted styling for the "Clear cache" menu item (desktop + mobile) */
/* Desktop sidebar */
.sidebar a.nav-link.clear-cache-btn {
  color: #8a949e; /* ~10% more muted than previous */
}
.sidebar a.nav-link.clear-cache-btn .feather {
  color: inherit; /* match text */
  stroke: currentColor;
}
.sidebar a.nav-link.clear-cache-btn:hover,
.sidebar a.nav-link.clear-cache-btn:focus {
  color: #7a838d; /* slightly darker on hover/focus */
}

/* Mobile offcanvas */
#mobileSidebar a.nav-link.clear-cache-btn {
  color: #8a949e !important; /* override offcanvas defaults */
}
#mobileSidebar a.nav-link.clear-cache-btn .feather {
  color: inherit !important;
  stroke: currentColor;
}
#mobileSidebar a.nav-link.clear-cache-btn:hover,
#mobileSidebar a.nav-link.clear-cache-btn:focus {
  color: #7a838d !important;
}

/* --- Unity Five logo in top nav --- */
.u5-logo {
  height: 28px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .u5-logo {
    height: 28px;
  }
}

.navbar-brand .insights-tag {
  color: #ffffff;
  font-weight: 300;
    font-size: 12px;
  line-height: 1;
  top: 17px; /* slight overlap for visual tie-in at 16px logo height */
    margin-left:-20px;
 /* display: inline-block; */
  position: relative;
  letter-spacing: 0.3px;
}