/* Global Styles */

body {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400; /* Default to regular */
  font-style: normal;
  /* Add other global body styles here if needed, e.g., default color */
  color: #333; 
}

/* Ubuntu Font Helper Classes */
.ubuntu-light {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ubuntu-regular {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-medium {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ubuntu-bold {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-light-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.ubuntu-regular-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-medium-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.ubuntu-bold-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* Navbar Styles */
.navbar {
    /* Vertically align items in the navbar if needed, though Bootstrap usually handles this */
}

/* Specifically target the user dropdown image in the navbar */
.navbar .navbar-nav .nav-item.dropdown .nav-link img.rounded-circle {
    width: 25px;      /* Set explicit width */
    height: 25px;     /* Set explicit height */
    object-fit: cover; /* Ensures the image covers the 25x25 area, cropping if necessary, without distorting aspect ratio */
    margin-top: -2px; /* Minor adjustment to better align with text if needed, experiment with this value */
    margin-bottom: -2px; /* Minor adjustment */
}

/* Global navbar profile picture styling - works on all pages */
.navbar-profile-pic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
}

/* Adjust padding/line-height for navbar items if the image still causes extra height */
.navbar .navbar-nav .nav-link {
    padding-top: 0.4rem;    /* Adjust as needed */
    padding-bottom: 0.4rem; /* Adjust as needed */
}

/* Other global styles can follow */
.main-content, .main-body, .admin-main-content {
    padding-top: 70px; /* Consistent padding for pages with sticky navbar, adjust if needed */
    padding-bottom: 30px; /* Added bottom padding for content */
}

.yak-pun {
    font-style: italic;
    /* color: #f0ad4e; */ /* Example color, adjust as needed */
}

.hero-section {
    background: url('../img/image1.png') no-repeat center center; /* Adjusted path for global.css */
    background-size: cover;
    color: #EEEEEE; 
    padding: 100px 0;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); 
}

/* Ensure footer is at the bottom */
html, body {
    height: 100%;
}

.site-container {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1;
}

.footer {
    background-color: #343a40; /* Dark background for footer */
    color: #f8f9fa; /* Light text for footer */
    padding: 20px 0;
    text-align: center;
    font-size: 0.9em;
}

.footer a {
    color: #f8f9fa;
    text-decoration: underline;
}

.footer a:hover {
    color: #ced4da;
    text-decoration: none;
} 

/* Dark Mode Styles for Admin Areas */
.admin-body-dark {
    background-color: #1e1e1e; /* Dark page background */
    color: #e0e0e0;           /* Light base text color */
}

.admin-body-dark .navbar-dark.bg-dark {
    /* Navbar is already dark, but you might want to ensure contrast if any elements change */
}

.admin-body-dark .card {
    background-color: #2a2a2a; /* Darker card background */
    border-color: #444;
}

.admin-body-dark .card-header {
    background-color: #333; /* Dark card header */
    color: #e0e0e0;
    border-bottom-color: #444;
}

.admin-body-dark .card-body {
    /* Text color inherited from .admin-body-dark should be okay */
}

.admin-body-dark .table {
    color: #e0e0e0; /* Light text for table content */
}

.admin-body-dark .table-striped tbody tr:nth-of-type(odd) {
    background-color: #252525; /* Slightly different dark for striped rows */
}

.admin-body-dark .table-hover tbody tr:hover {
    background-color: #303030; /* Dark hover for table rows */
    color: #fff;
}

.admin-body-dark .table .thead-dark th {
    background-color: #1c1c1c; /* Very dark for table headers */
    border-color: #444;
    color: #e0e0e0;
}

.admin-body-dark .form-control {
    background-color: #333;
    color: #e0e0e0;
    border-color: #555;
}

.admin-body-dark .form-control:focus {
    background-color: #404040;
    color: #e0e0e0;
    border-color: #777;
    box-shadow: 0 0 0 0.2rem rgba(100, 100, 100, 0.25); /* Adjusted focus shadow */
}

.admin-body-dark .form-control::placeholder {
    color: #aaa;
}

.admin-body-dark .form-check-label {
    color: #e0e0e0;
}

.admin-body-dark .form-text.text-muted {
    color: #aaa !important; /* Override Bootstrap's default muted color */
}

.admin-body-dark label {
    color: #e0e0e0;
}

.admin-body-dark h1, .admin-body-dark h2, .admin-body-dark h3, .admin-body-dark h4, .admin-body-dark h5, .admin-body-dark h6 {
    color: #e8e8e8; /* Slightly brighter for headers */
}

.admin-body-dark .alert-info {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-color: #34495e;
}

.admin-body-dark .alert-danger {
    background-color: #4a2328;
    color: #f5c6cb;
    border-color: #721c24;
}
.admin-body-dark .alert-success {
    background-color: #1e4b3d;
    color: #d4edda;
    border-color: #c3e6cb;
}
.admin-body-dark .alert-warning {
    background-color: #5a4720;
    color: #ffeeba;
    border-color: #ffdf7e;
}

/* Ensure text on buttons is legible - primary, secondary, info, etc. might need overrides */
.admin-body-dark .btn-primary {
    /* Bootstrap default primary button might be okay, but check contrast */
}
.admin-body-dark .btn-secondary {
    background-color: #5a6268;
    border-color: #545b62;
    color: #fff;
}
.admin-body-dark .btn-secondary:hover {
    background-color: #4e555b;
    border-color: #484e53;
}

.admin-body-dark .text-success { color: #4CAF50 !important; }
.admin-body-dark .text-danger { color: #F44336 !important; }
.admin-body-dark .text-muted { color: #9E9E9E !important; }

/* Add any other specific element styling needed for dark mode */

a {
  text-decoration: underline;
}
a.btn, a.nav-link, a.breadcrumb-item, a.dropdown-item {
  text-decoration: none;
}

.form-control {
  border-color: #495057 !important;
}
.form-control:focus {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
  border-color: #0056b3 !important;
}

/* Keep dark mode overrides as is, but ensure border is visible */
.admin-body-dark .form-control {
  border-color: #888 !important;
}
.admin-body-dark .form-control:focus {
  border-color: #fff !important;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

#partnerInfoDisplay.info-bar-blue-themed {
  color: #0056b3 !important;
  background-color: #e7f5ff !important;
}
#partnerInfoDisplay.info-bar-red-themed {
  color: #c62828 !important;
  background-color: #ffebee !important;
}

.yak-message-bubble {
  display: inline-block;
  max-width: 75%;
  min-width: 60px;
  word-break: break-word;
  white-space: pre-line;
  vertical-align: top;
  border-radius: 14px;
  padding: 4px 12px 4px 12px;
  margin: 2px 0;
  background: #f5f7fa;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  border: none;
}

.yak-message-bubble .card-body {
  padding: 0 !important;
  background: transparent;
  min-height: 0 !important;
}

.yak-message-bubble .d-flex.align-items-center {
  margin-bottom: 1px !important;
  margin-top: 1px !important;
}

.yak-message-bubble .time-ago {
  font-size: 0.85em;
  color: #888;
  margin-top: 1px;
  display: block;
  text-align: right;
}

.yak-message-bubble.blocked-bubble {
  background: #fff3cd !important;
  color: #222;
  border: 1px solid #ffe082;
}

.message-bubble-container.justify-content-end .yak-message-bubble {
  background: #e0f3ff;
  color: #222;
}

.message-bubble-container.justify-content-start .yak-message-bubble {
  background: #f5f7fa;
  color: #222;
}

.message-bubble-container {
  margin-bottom: 18px;
}

.message-bubble-container:last-child {
  margin-bottom: 0;
}

.admin-navbar .navbar-nav .nav-link {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.admin-navbar .nav-link {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.admin-navbar .nav-link i {
  margin-right: 0.5em;
  font-size: 1.1em;
  min-width: 1.25em;
  text-align: center;
}

.btn-yakety {
    background-color: #007bff !important; /* Yakety blue, always visible */
    border-color: #0056b3 !important; /* Slightly darker border for contrast */
    color: #fff !important;
    font-weight: 500;
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: background 0.2s, border 0.2s, color 0.2s;
}
.btn-yakety:hover, .btn-yakety:focus {
    background-color: #0056b3 !important;
    border-color: #004080 !important;
    color: #fff !important;
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

@media (min-width: 768px) {
  body, .container, .main-body {
    padding-top: 70px !important;
  }
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    background: #222 !important;
    position: static !important;
    min-height: 0 !important;
    height: auto !important;
    z-index: 1 !important;
  }
} 

/* FCM Status Styles */
.fcm-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 500;
  margin-left: 8px;
  transition: all 0.2s ease;
}

.fcm-status.fcm-enabled {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.fcm-status.fcm-partial {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.fcm-status.fcm-partial:hover {
  background-color: #ffeaa7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fcm-status.fcm-disabled {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.fcm-status.fcm-info {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* Dark mode overrides for FCM status */
.admin-body-dark .fcm-status.fcm-enabled {
  background-color: #1e4b3d;
  color: #d4edda;
  border-color: #c3e6cb;
}

.admin-body-dark .fcm-status.fcm-partial {
  background-color: #5a4720;
  color: #ffeeba;
  border-color: #ffdf7e;
}

.admin-body-dark .fcm-status.fcm-disabled {
  background-color: #4a2328;
  color: #f5c6cb;
  border-color: #721c24;
}

.admin-body-dark .fcm-status.fcm-info {
  background-color: #2c3e50;
  color: #ecf0f1;
  border-color: #34495e;
}