:root {
                   --primary-color: #F6D365;
                   --primary-dark: #FDA085;
                   --secondary-color: #4DAA57;
                   --secondary-dark: #38724F;
                   --text-dark: #333333;
                   --text-light: #666666;
                   --text-lighter: #999999;
                   --background-light: #F9F8F4;
                   --background-white: #FFFFFF;
                   --border-color: #E5E5E5;
                   --success-color: #4CAF50;
                   --warning-color: #FF9800;
                   --danger-color: #F44336;
                   --info-color: #2196F3;
                   --header-height: 64px;
                   --sidebar-width: 250px;
                   --footer-height: 50px;
                   --border-radius: 8px;
                   --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                   --button-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                   --transition-speed: 0.3s;
               }
               
               * {
                   margin: 0;
                   padding: 0;
                   box-sizing: border-box;
               }
               
               body {
                   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                   font-size: 16px;
                   line-height: 1.6;
                   color: var(--text-dark);
                   background-color: var(--background-light);
               }
               
               a {
                   text-decoration: none;
                   color: var(--secondary-color);
                   transition: color var(--transition-speed) ease;
               }
               
               a:hover {
                   color: var(--secondary-dark);
               }
               
               button,
               .btn {
                   cursor: pointer;
                   border: none;
                   border-radius: var(--border-radius);
                   padding: 8px 16px;
                   font-size: 1rem;
                   font-weight: 500;
                   transition: all var(--transition-speed) ease;
                   display: inline-flex;
                   align-items: center;
                   justify-content: center;
                   gap: 8px;
               }
               
               button svg,
               .btn svg {
                   width: 18px;
                   height: 18px;
               }
               
               .btn-primary {
                   background-color: var(--primary-color);
                   color: var(--text-dark);
                   box-shadow: var(--button-shadow);
               }
               
               .btn-primary:hover {
                   background-color: var(--primary-dark);
                   color: var(--text-dark);
               }
               
               .btn-secondary {
                   background-color: var(--secondary-color);
                   color: white;
                   box-shadow: var(--button-shadow);
               }
               
               .btn-secondary:hover {
                   background-color: var(--secondary-dark);
                   color: white;
               }
               
               .btn-back {
                   background-color: var(--background-white);
                   color: var(--text-dark);
                   border: 1px solid var(--border-color);
                   box-shadow: var(--button-shadow);
               }
               
               .btn-back:hover {
                   background-color: var(--border-color);
               }
               
               .btn-filter {
                   background-color: var(--background-white);
                   color: var(--text-dark);
                   border: 1px solid var(--border-color);
               }
               
               .btn-filter:hover {
                   background-color: var(--border-color);
               }
               
               .btn-clear {
                   background-color: transparent;
                   color: var(--text-lighter);
                   border: 1px solid var(--border-color);
               }
               
               .btn-clear:hover {
                   background-color: var(--border-color);
                   color: var(--text-dark);
               }
               
               .btn-view {
                   background-color: var(--info-color);
                   color: white;
                   padding: 6px 12px;
                   border-radius: 4px;
                   font-size: 0.9rem;
               }
               
               .btn-view:hover {
                   background-color: #0b7dda;
                   color: white;
               }
               
               .btn-operation {
                   background-color: var(--success-color);
                   color: white;
                   padding: 6px 12px;
                   border-radius: 4px;
                   font-size: 0.9rem;
               }
               
               .btn-operation:hover {
                   background-color: #3d8b40;
                   color: white;
               }
               /* Login & Registration Pages */
               
               .login-page,
               .register-page {
                   background-color: var(--background-light);
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   min-height: 100vh;
                   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50 37.5l25 43.3h-50z" fill="%23F6D36520"/><path d="M50 62.5l25-43.3h-50z" fill="%23FDA08520"/></svg>');
                   background-size: 100px;
               }
               
               .login-container,
               .register-container {
                   background-color: var(--background-white);
                   border-radius: var(--border-radius);
                   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
                   width: 100%;
                   max-width: 450px;
                   overflow: hidden;
               }
               
               .login-header,
               .register-header {
                   background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
                   color: var(--text-dark);
                   padding: 24px;
                   text-align: center;
               }
               
               .logo {
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   gap: 12px;
                   margin-bottom: 16px;
               }
               
               .logo h1 {
                   font-size: 28px;
                   font-weight: 700;
                   margin: 0;
               }
               
               .hexagon {
                   width: 40px;
                   height: 40px;
                   background-color: rgba(255, 255, 255, 0.8);
                   position: relative;
                   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
                   display: flex;
                   align-items: center;
                   justify-content: center;
               }
               
               .hexagon::before {
                   content: "";
                   position: absolute;
                   width: 85%;
                   height: 85%;
                   background-color: rgba(255, 255, 255, 0.4);
                   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
               }
               
               .login-form-container,
               .register-form-container {
                   padding: 24px;
               }
               
               .login-form-container h2,
               .register-form-container h2 {
                   margin-bottom: 20px;
                   font-size: 22px;
                   color: var(--text-dark);
                   text-align: center;
               }
               
               .form-group {
                   margin-bottom: 16px;
               }
               
               .form-group label {
                   display: block;
                   margin-bottom: 8px;
                   font-weight: 500;
                   color: var(--text-dark);
               }
               
               .form-group input {
                   width: 100%;
                   padding: 10px 12px;
                   border: 1px solid var(--border-color);
                   border-radius: 4px;
                   font-size: 16px;
                   transition: border-color var(--transition-speed) ease;
               }
               
               .form-group input:focus {
                   outline: none;
                   border-color: var(--primary-color);
               }
               
               .form-group small {
                   display: block;
                   margin-top: 4px;
                   font-size: 12px;
                   color: var(--text-lighter);
               }
               
               .login-form button,
               .register-form button {
                   width: 100%;
                   padding: 12px;
                   margin-top: 20px;
                   font-weight: 600;
               }
               
               .register-link,
               .login-link {
                   text-align: center;
                   margin-top: 20px;
                   color: var(--text-lighter);
                   font-size: 14px;
               }
               
               .alert {
                   padding: 12px 16px;
                   margin-bottom: 20px;
                   border-radius: 4px;
                   font-size: 14px;
               }
               
               .alert-danger {
                   background-color: rgba(244, 67, 54, 0.1);
                   color: #d32f2f;
                   border: 1px solid rgba(244, 67, 54, 0.2);
               }
               
               .alert-success {
                   background-color: rgba(76, 175, 80, 0.1);
                   color: #388e3c;
                   border: 1px solid rgba(76, 175, 80, 0.2);
               }
               /* Layout Components */
               
               .header {
                   position: fixed;
                   top: 0;
                   left: 0;
                   right: 0;
                   height: var(--header-height);
                   background-color: var(--background-white);
                   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                   z-index: 100;
                   display: flex;
                   align-items: center;
                   padding: 0 16px;
               }
               
               .header-content {
                   display: flex;
                   align-items: center;
                   justify-content: space-between;
                   width: 100%;
                   padding-left: var(--sidebar-width);
               }
               
               .header-left {
                   display: flex;
                   align-items: center;
               }
               
               .toggle-sidebar {
                   display: none;
                   background: transparent;
                   border: none;
                   cursor: pointer;
                   margin-right: 16px;
               }
               
               .toggle-sidebar svg {
                   width: 24px;
                   height: 24px;
                   color: var(--text-dark);
               }
               
               .header-right {
                   display: flex;
                   align-items: center;
                   gap: 16px;
               }
               
               .user-menu {
                   position: relative;
               }
               
               .user-menu-button {
                   background: transparent;
                   border: none;
                   display: flex;
                   align-items: center;
                   gap: 8px;
                   color: var(--text-dark);
                   font-weight: 500;
               }
               
               .user-menu-button svg {
                   width: 20px;
                   height: 20px;
               }
               
               .user-menu-dropdown {
                   position: absolute;
                   top: 100%;
                   right: 0;
                   background-color: var(--background-white);
                   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                   border-radius: 4px;
                   min-width: 180px;
                   margin-top: 8px;
                   display: none;
               }
               
               .user-menu-dropdown.active {
                   display: block;
               }
               
               .user-menu-item {
                   display: block;
                   padding: 10px 16px;
                   color: var(--text-dark);
                   transition: background-color var(--transition-speed) ease;
               }
               
               .user-menu-item:hover {
                   background-color: rgba(0, 0, 0, 0.05);
               }
               
               .user-menu-item.logout {
                   border-top: 1px solid var(--border-color);
                   color: var(--danger-color);
               }
               
               .sidebar {
                   position: fixed;
                   top: 0;
                   left: 0;
                   width: var(--sidebar-width);
                   height: 100vh;
                   background-color: var(--background-white);
                   box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
                   z-index: 90;
                   padding-top: var(--header-height);
                   transition: transform var(--transition-speed) ease;
               }
               
               .sidebar-menu {
                   padding: 16px 0;
               }
               
               .sidebar-menu-item {
                   display: flex;
                   align-items: center;
                   padding: 12px 16px;
                   color: var(--text-dark);
                   transition: background-color var(--transition-speed) ease;
                   position: relative;
               }
               
               .sidebar-menu-item svg {
                   width: 20px;
                   height: 20px;
                   margin-right: 12px;
               }
               
               .sidebar-menu-item.active {
                   background-color: rgba(246, 211, 101, 0.1);
                   color: var(--primary-dark);
                   font-weight: 500;
               }
               
               .sidebar-menu-item.active::before {
                   content: "";
                   position: absolute;
                   left: 0;
                   top: 0;
                   bottom: 0;
                   width: 4px;
                   background-color: var(--primary-color);
               }
               
               .sidebar-menu-item:hover {
                   background-color: rgba(0, 0, 0, 0.05);
               }
               
               .content {
                   margin-left: var(--sidebar-width);
                   padding: calc(var(--header-height) + 24px) 24px calc(var(--footer-height) + 24px) 24px;
                   min-height: 100vh;
               }
               
               .footer {
                   position: fixed;
                   bottom: 0;
                   left: var(--sidebar-width);
                   right: 0;
                   height: var(--footer-height);
                   background-color: var(--background-white);
                   border-top: 1px solid var(--border-color);
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   padding: 0 24px;
                   font-size: 14px;
                   color: var(--text-lighter);
               }
               /* Dashboard */
               
               .dashboard-container {
                   max-width: 1200px;
                   margin: 0 auto;
               }
               
               .dashboard-header {
                   margin-bottom: 24px;
               }
               
               .dashboard-header h1 {
                   font-size: 28px;
                   margin-bottom: 8px;
               }
               
               .dashboard-summary {
                   display: grid;
                   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                   gap: 16px;
                   margin-bottom: 24px;
               }
               
               .stat-card {
                   background-color: var(--background-white);
                   border-radius: var(--border-radius);
                   box-shadow: var(--card-shadow);
                   padding: 16px;
                   display: flex;
                   align-items: center;
                   transition: transform var(--transition-speed) ease;
               }
               
               .stat-card:hover {
                   transform: translateY(-2px);
               }
               
               .stat-icon {
                   width: 48px;
                   height: 48px;
                   border-radius: 50%;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   margin-right: 16px;
               }
               
               .stat-icon svg {
                   width: 24px;
                   height: 24px;
                   color: white;
               }
               
               .stat-icon.active {
                   background-color: var(--success-color);
               }
               
               .stat-icon.divided {
                   background-color: var(--info-color);
               }
               
               .stat-icon.quarantine {
                   background-color: var(--warning-color);
               }
               
               .stat-icon.inactive {
                   background-color: var(--text-lighter);
               }
               
               .stat-info h3 {
                   font-size: 24px;
                   margin: 0;
               }
               
               .stat-info p {
                   margin: 0;
                   color: var(--text-light);
                   font-size: 14px;
               }
               
               .dashboard-content {
                   display: grid;
                   grid-template-columns: 1fr;
                   gap: 24px;
               }
               
               @media (min-width: 992px) {
                   .dashboard-content {
                       grid-template-columns: 1fr 1fr;
                   }
               }
               
               .content-section {
                   background-color: var(--background-white);
                   border-radius: var(--border-radius);
                   box-shadow: var(--card-shadow);
                   padding: 16px;
                   height: 100%;
               }
               
               .section-header {
                   display: flex;
                   align-items: center;
                   justify-content: space-between;
                   margin-bottom: 16px;
               }
               
               .section-header h2 {
                   font-size: 18px;
                   margin: 0;
               }
               
               .view-all {
                   font-size: 14px;
               }
               
               .operations-list,
               .attention-list {
                   display: flex;
                   flex-direction: column;
                   gap: 12px;
               }
               
               .operation-card {
                   display: flex;
                   align-items: center;
                   padding: 12px;
                   border-radius: 4px;
                   background-color: rgba(0, 0, 0, 0.02);
                   border: 1px solid var(--border-color);
               }
               
               .operation-icon {
                   width: 36px;
                   height: 36px;
                   border-radius: 50%;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   margin-right: 12px;
               }
               
               .operation-icon svg {
                   width: 18px;
                   height: 18px;
                   color: white;
               }
               
               .operation-icon.inspection {
                   background-color: var(--info-color);
               }
               
               .operation-icon.feeding {
                   background-color: var(--success-color);
               }
               
               .operation-icon.division {
                   background-color: var(--warning-color);
               }
               
               .operation-icon.treatment {
                   background-color: var(--danger-color);
               }
               
               .operation-icon.cleaning {
                   background-color: var(--secondary-color);
               }
               
               .operation-icon.other {
                   background-color: var(--text-lighter);
               }
               
               .operation-details {
                   flex: 1;
               }
               
               .operation-details h3 {
                   font-size: 16px;
                   margin: 0;
               }
               
               .operation-details p {
                   margin: 0;
                   font-size: 14px;
                   color: var(--text-light);
               }
               
               .btn-details {
                   padding: 4px 8px;
                   font-size: 12px;
                   border-radius: 4px;
                   background-color: var(--background-light);
                   color: var(--text-dark);
                   white-space: nowrap;
               }
               
               .beehive-card {
                   background-color: var(--background-white);
                   border-radius: var(--border-radius);
                   border-left: 4px solid transparent;
                   box-shadow: var(--card-shadow);
                   padding: 16px;
                   transition: transform var(--transition-speed) ease;
               }
               
               .beehive-card:hover {
                   transform: translateY(-2px);
               }
               
               .beehive-card.active {
                   border-left-color: var(--success-color);
               }
               
               .beehive-card.divided {
                   border-left-color: var(--info-color);
               }
               
               .beehive-card.quarantine {
                   border-left-color: var(--warning-color);
               }
               
               .beehive-card.inactive {
                   border-left-color: var(--text-lighter);
               }
               
               .beehive-card.attention {
                   border-left-color: var(--warning-color);
                   background-color: rgba(255, 152, 0, 0.05);
               }
               
               .beehive-header {
                   display: flex;
                   align-items: center;
                   justify-content: space-between;
                   margin-bottom: 12px;
               }
               
               .beehive-header h3 {
                   font-size: 18px;
                   margin: 0;
               }
               
               .status-badge {
                   padding: 4px 8px;
                   border-radius: 12px;
                   font-size: 12px;
                   font-weight: 500;
               }
               
               .status-badge.active {
                   background-color: rgba(76, 175, 80, 0.1);
                   color: var(--success-color);
               }
               
               .status-badge.divided {
                   background-color: rgba(33, 150, 243, 0.1);
                   color: var(--info-color);
               }
               
               .status-badge.quarantine {
                   background-color: rgba(255, 152, 0, 0.1);
                   color: var(--warning-color);
               }
               
               .status-badge.inactive {
                   background-color: rgba(153, 153, 153, 0.1);
                   color: var(--text-lighter);
               }
               
               .beehive-info {
                   margin-bottom: 12px;
               }
               
               .beehive-info p {
                   margin: 4px 0;
                   font-size: 14px;
               }
               
               .scientific-name {
                   font-style: italic;
                   font-size: 13px;
               }
               
               .queen-status {
                   font-weight: 500;
               }
               
               .queen-status.present {
                   color: var(--success-color);
               }
               
               .queen-status.absent {
                   color: var(--danger-color);
               }
               
               .queen-status.unknown {
                   color: var(--text-lighter);
               }
               
               .beehive-footer,
               .beehive-actions {
                   display: flex;
                   gap: 8px;
               }
               
               .no-data {
                   padding: 16px;
                   text-align: center;
                   color: var(--text-lighter);
                   background-color: rgba(0, 0, 0, 0.02);
                   border-radius: 4px;
               }
               /* Beehives Page */
               
               .beehives-container {
                   max-width: 1200px;
                   margin: 0 auto;
               }
               
               .page-header {
                   display: flex;
                   align-items: center;
                   justify-content: space-between;
                   margin-bottom: 24px;
               }
               
               .page-header h1 {
                   font-size: 28px;
                   margin: 0;
               }
               
               .filter-container {
                   background-color: var(--background-white);
                   border-radius: var(--border-radius);
                   box-shadow: var(--card-shadow);
                   padding: 16px;
                   margin-bottom: 24px;
               }
               
               .filters-form {
                   display: flex;
                   flex-wrap: wrap;
                   gap: 16px;
                   align-items: flex-end;
               }
               
               .filter-group {
                   flex: 1;
                   min-width: 200px;
               }
               
               .filter-group label {
                   display: block;
                   margin-bottom: 8px;
                   font-weight: 500;
               }
               
               .filter-group select,
               .filter-group input {
                   width: 100%;
                   padding: 8px 12px;
                   border: 1px solid var(--border-color);
                   border-radius: 4px;
                   font-size: 14px;
               }
               
               .beehives-list {
                   display: grid;
                   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                   gap: 16px;
               }
               
               .no-results {
                   grid-column: 1 / -1;
                   background-color: var(--background-white);
                   border-radius: var(--border-radius);
                   box-shadow: var(--card-shadow);
                   padding: 32px;
                   text-align: center;
               }
               
               .no-results p {
                   margin-bottom: 16px;
                   color: var(--text-light);
               }
               /* Form Styles */
               
               .form-container {
                   background-color: var(--background-white);
                   border-radius: var(--border-radius);
                   box-shadow: var(--card-shadow);
                   padding: 24px;
               }
               
               .form-section {
                   margin-bottom: 24px;
                   padding-bottom: 24px;
                   border-bottom: 1px solid var(--border-color);
               }
               
               .form-section:last-child {
                   border-bottom: none;
                   margin-bottom: 0;
                   padding-bottom: 0;
               }
               
               .form-section h2 {
                   font-size: 18px;
                   margin-bottom: 16px;
               }
               
               .form-group select {
                   width: 100%;
                   padding: 10px 12px;
                   border: 1px solid var(--border-color);
                   border-radius: 4px;
                   font-size: 16px;
                   transition: border-color var(--transition-speed) ease;
                   appearance: none;
                   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
                   background-repeat: no-repeat;
                   background-position: right 12px center;
                   background-size: 16px;
               }
               
               .form-group select:focus {
                   outline: none;
                   border-color: var(--primary-color);
               }
               
               .form-group textarea {
                   width: 100%;
                   padding: 10px 12px;
                   border: 1px solid var(--border-color);
                   border-radius: 4px;
                   font-size: 16px;
                   resize: vertical;
                   transition: border-color var(--transition-speed) ease;
                   font-family: inherit;
               }
               
               .form-group textarea:focus {
                   outline: none;
                   border-color: var(--primary-color);
               }
               
               .form-actions {
                   display: flex;
                   gap: 12px;
               }
               /* Responsive Styles */
               
               @media (max-width: 992px) {
                   .sidebar {
                       transform: translateX(-100%);
                   }
                   .sidebar.active {
                       transform: translateX(0);
                   }
                   .header-content {
                       padding-left: 0;
                   }
                   .toggle-sidebar {
                       display: block;
                   }
                   .content {
                       margin-left: 0;
                   }
                   .footer {
                       left: 0;
                   }
               }
               
               @media (max-width: 576px) {
                   .dashboard-summary {
                       grid-template-columns: 1fr;
                   }
                   .page-header {
                       flex-direction: column;
                       align-items: flex-start;
                       gap: 16px;
                   }
                   .filter-group {
                       min-width: 100%;
                   }
                   .form-actions {
                       flex-direction: column;
                   }
                   .form-actions .btn {
                       width: 100%;
                   }
               }
               /* Animations */
               
               @keyframes fadeIn {
                   from {
                       opacity: 0;
                   }
                   to {
                       opacity: 1;
                   }
               }
               
               .fadeIn {
                   animation: fadeIn 0.3s ease;
               }
               
               .header {
                   background-color: white;
                   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                   position: fixed;
                   top: 0;
                   left: 0;
                   right: 0;
                   z-index: 1000;
               }
               
               .header-content {
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   padding: 1rem 2rem;
                   max-width: 1400px;
                   margin: 0 auto;
               }
               
               .toggle-sidebar {
                   background: none;
                   border: none;
                   color: #666;
                   font-size: 1.5rem;
                   cursor: pointer;
                   padding: 0.5rem;
                   transition: color 0.2s;
               }
               
               .toggle-sidebar:hover {
                   color: #333;
               }
               
               .user-menu {
                   position: relative;
               }
               
               .user-menu-button {
                   background: none;
                   border: none;
                   color: #666;
                   font-size: 1rem;
                   cursor: pointer;
                   padding: 0.5rem 1rem;
                   display: flex;
                   align-items: center;
                   gap: 0.5rem;
                   transition: color 0.2s;
               }
               
               .user-menu-button:hover {
                   color: #333;
               }
               
               .user-menu-button i {
                   font-size: 0.875rem;
               }
               
               .user-menu-dropdown {
                   position: absolute;
                   top: 100%;
                   right: 0;
                   background: white;
                   border-radius: 0.5rem;
                   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                   min-width: 200px;
                   display: none;
                   z-index: 1000;
               }
               
               .user-menu-dropdown.active {
                   display: block;
               }
               
               .user-menu-item {
                   display: flex;
                   align-items: center;
                   gap: 0.75rem;
                   padding: 0.75rem 1rem;
                   color: #666;
                   text-decoration: none;
                   transition: background-color 0.2s;
               }
               
               .user-menu-item:hover {
                   background-color: #f5f5f5;
                   color: #333;
               }
               
               .user-menu-item i {
                   font-size: 1rem;
                   width: 1.25rem;
                   text-align: center;
               }
               
               .user-menu-item.logout {
                   border-top: 1px solid #eee;
                   color: #dc3545;
               }
               
               .user-menu-item.logout:hover {
                   background-color: #fff5f5;
               }
               
               @media (max-width: 768px) {
                   .header-content {
                       padding: 1rem;
                   }
                   .user-menu-dropdown {
                       right: -1rem;
                   }
               }
               /* Icon styles */
               
               .icon-hive::before {
                   content: "\f6f6";
                   font-family: "Font Awesome 5 Free";
                   font-weight: 900;
               }
               
               .icon-split::before {
                   content: "\f126";
                   font-family: "Font Awesome 5 Free";
                   font-weight: 900;
               }
               
               .icon-shield::before {
                   content: "\f132";
                   font-family: "Font Awesome 5 Free";
                   font-weight: 900;
               }
               
               .icon-archive::before {
                   content: "\f187";
                   font-family: "Font Awesome 5 Free";
                   font-weight: 900;
               }
               
               .icon-inspection::before {
                   content: "\f06e";
                   font-family: "Font Awesome 5 Free";
                   font-weight: 900;
               }
               
               .icon-feeding::before {
                   content: "\f2e7";
                   font-family: "Font Awesome 5 Free";
                   font-weight: 900;
               }
               
               .icon-division::before {
                   content: "\f126";
                   font-family: "Font Awesome 5 Free";
                   font-weight: 900;
               }
               
               .icon-treatment::before {
                   content: "\f0fa";
                   font-family: "Font Awesome 5 Free";
                   font-weight: 900;
               }
               
               .icon-cleaning::before {
                   content: "\f51a";
                   font-family: "Font Awesome 5 Free";
                   font-weight: 900;
               }
               
               .icon-other::before {
                   content: "\f128";
                   font-family: "Font Awesome 5 Free";
                   font-weight: 900;
               }
               
               .stat-icon {
                   width: 48px;
                   height: 48px;
                   border-radius: 50%;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   margin-bottom: 16px;
                   font-size: 24px;
               }
               
               .stat-icon.active {
                   background-color: #4CAF50;
                   color: white;
               }
               
               .stat-icon.divided {
                   background-color: #2196F3;
                   color: white;
               }
               
               .stat-icon.quarantine {
                   background-color: #FFC107;
                   color: white;
               }
               
               .stat-icon.inactive {
                   background-color: #F44336;
                   color: white;
               }
               
               .operation-icon {
                   width: 40px;
                   height: 40px;
                   border-radius: 50%;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   margin-right: 16px;
                   font-size: 20px;
                   background-color: #E3F2FD;
                   color: #1976D2;
               }
               
               .sidebar {
                   position: fixed;
                   left: 0;
                   top: 60px;
                   bottom: 0;
                   width: 250px;
                   background: white;
                   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
                   z-index: 100;
                   transition: transform 0.3s ease;
               }
               
               @media (max-width: 992px) {
                   .sidebar {
                       transform: translateX(-100%);
                   }
                   .sidebar.active {
                       transform: translateX(0);
                   }
                   .content {
                       margin-left: 0 !important;
                   }
               }
               
               .toggle-sidebar {
                   display: none;
                   background: none;
                   border: none;
                   font-size: 1.5rem;
                   cursor: pointer;
                   padding: 0.5rem;
               }
               
               @media (max-width: 992px) {
                   .toggle-sidebar {
                       display: block;
                   }
               }
               /* User menu styles */
               
               .user-menu-dropdown {
                   display: none;
                   position: absolute;
                   top: 100%;
                   right: 0;
                   background: white;
                   border-radius: 8px;
                   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                   min-width: 200px;
                   z-index: 1000;
               }
               
               .user-menu-dropdown.active {
                   display: block;
               }
               
               .species-grid {
                   display: grid;
                   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                   gap: 2rem;
                   padding: 2rem;
               }
               
               .species-card {
                   background: white;
                   border-radius: 12px;
                   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                   overflow: hidden;
                   transition: transform 0.2s ease, box-shadow 0.2s ease;
               }
               
               .species-card:hover {
                   transform: translateY(-4px);
                   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
               }
               
               .species-image {
                   width: 100%;
                   height: 200px;
                   overflow: hidden;
                   position: relative;
               }
               
               .species-image img {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                   transition: transform 0.3s ease;
               }
               
               .species-card:hover .species-image img {
                   transform: scale(1.05);
               }
               
               .species-content {
                   padding: 1.5rem;
               }
               
               .species-header {
                   margin-bottom: 1rem;
               }
               
               .species-header h3 {
                   font-size: 1.25rem;
                   font-weight: 600;
                   color: #2d3748;
                   margin: 0;
               }
               
               .scientific-name {
                   display: block;
                   font-style: italic;
                   color: #718096;
                   font-size: 0.9rem;
                   margin-top: 0.25rem;
               }
               
               .species-section {
                   margin-bottom: 1rem;
                   padding-bottom: 1rem;
                   border-bottom: 1px solid #e2e8f0;
               }
               
               .species-section:last-child {
                   border-bottom: none;
               }
               
               .species-section h4 {
                   font-size: 1rem;
                   font-weight: 600;
                   color: #4a5568;
                   margin-bottom: 0.5rem;
               }
               
               .species-section p {
                   color: #4a5568;
                   font-size: 0.95rem;
                   line-height: 1.5;
               }
               
               .species-footer {
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   margin-top: 1rem;
                   padding-top: 1rem;
                   border-top: 1px solid #e2e8f0;
               }
               
               .beehive-count {
                   color: #718096;
                   font-size: 0.9rem;
               }
               
               .btn-view {
                   padding: 0.5rem 1rem;
                   background-color: #4299e1;
                   color: white;
                   border-radius: 6px;
                   text-decoration: none;
                   font-size: 0.9rem;
                   transition: background-color 0.2s ease;
               }
               
               .btn-view:hover {
                   background-color: #3182ce;
               }
               /* Photos Grid */
               
               .photos-grid {
                   display: grid;
                   grid-template-columns: repeat(4, 1fr);
                   gap: 1.5rem;
                   padding: 1.5rem;
               }
               
               .photo-card {
                   background: white;
                   border-radius: 0.5rem;
                   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                   overflow: hidden;
                   transition: transform 0.2s;
               }
               
               .photo-card:hover {
                   transform: translateY(-4px);
               }
               
               .photo-image {
                   position: relative;
                   padding-top: 75%;
                   /* 4:3 aspect ratio */
                   overflow: hidden;
               }
               
               .photo-image img {
                   position: absolute;
                   top: 0;
                   left: 0;
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
               }
               
               .photo-info {
                   padding: 1rem;
               }
               
               .photo-info h3 {
                   margin: 0 0 0.5rem;
                   font-size: 1rem;
               }
               
               .photo-metadata {
                   display: flex;
                   justify-content: space-between;
                   font-size: 0.875rem;
                   color: #666;
                   margin-top: 0.5rem;
               }
               
               .photo-actions {
                   display: flex;
                   gap: 0.5rem;
                   margin-top: 1rem;
               }
               
               .btn-download {
                   background-color: var(--primary-color);
                   color: white;
                   padding: 0.25rem 0.5rem;
                   border-radius: 0.25rem;
                   font-size: 0.875rem;
               }
               
               .photos-stats {
                   padding: 1rem 1.5rem;
                   background: white;
                   border-radius: 0.5rem;
                   margin-bottom: 1.5rem;
               }
               
               .progress-bar {
                   background: #edf2f7;
                   border-radius: 9999px;
                   height: 0.5rem;
                   overflow: hidden;
                   margin-top: 0.5rem;
               }
               
               .progress {
                   background: var(--primary-color);
                   height: 100%;
                   transition: width 0.3s ease;
               }
               /* Filter styles */
               
               .filter-container {
                   margin-bottom: 2rem;
                   padding: 1rem 1.5rem;
                   background: white;
                   border-radius: 0.5rem;
               }
               
               .filter-form {
                   display: flex;
                   align-items: center;
                   gap: 1rem;
               }
               
               .filter-form .form-group {
                   flex: 1;
               }
               
               .filter-form select {
                   width: 100%;
                   padding: 0.5rem;
                   border: 1px solid var(--border-color);
                   border-radius: 0.375rem;
                   background-color: white;
               }
               /* Responsive Grid */
               
               @media (max-width: 1200px) {
                   .photos-grid {
                       grid-template-columns: repeat(3, 1fr);
                   }
               }
               
               @media (max-width: 768px) {
                   .photos-grid {
                       grid-template-columns: repeat(2, 1fr);
                   }
                   .filter-form {
                       flex-direction: column;
                   }
               }
               
               @media (max-width: 480px) {
                   .photos-grid {
                       grid-template-columns: 1fr;
                   }
               }
               
               .species-grid {
                   display: grid;
                   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                   gap: 2rem;
                   padding: 2rem;
               }
               
               .species-card {
                   background: white;
                   border-radius: 12px;
                   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                   overflow: hidden;
                   transition: transform 0.2s ease, box-shadow 0.2s ease;
               }
               
               .species-card:hover {
                   transform: translateY(-4px);
                   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
               }
               
               .species-image {
                   width: 100%;
                   height: 200px;
                   overflow: hidden;
                   position: relative;
               }
               
               .species-image img {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                   transition: transform 0.3s ease;
               }
               
               .species-card:hover .species-image img {
                   transform: scale(1.05);
               }
               
               .species-content {
                   padding: 1.5rem;
               }
               
               .species-header {
                   margin-bottom: 1rem;
               }
               
               .species-header h3 {
                   font-size: 1.25rem;
                   font-weight: 600;
                   color: #2d3748;
                   margin: 0;
               }
               
               .scientific-name {
                   display: block;
                   font-style: italic;
                   color: #718096;
                   font-size: 0.9rem;
                   margin-top: 0.25rem;
               }
               /* Beehive Details - Photos and Operations Additions */
               /* Operations timeline improvements */
               
               .operations-timeline {
                   position: relative;
               }
               
               .operations-timeline::before {
                   content: '';
                   position: absolute;
                   left: 20px;
                   top: 0;
                   bottom: 0;
                   width: 2px;
                   background: var(--border-color);
               }
               
               .timeline-item {
                   display: flex;
                   margin-bottom: 2rem;
                   position: relative;
               }
               
               .timeline-icon {
                   width: 40px;
                   height: 40px;
                   border-radius: 50%;
                   background: var(--primary-color);
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   margin-right: 1rem;
                   color: white;
                   z-index: 1;
                   font-size: 1rem;
               }
               
               .timeline-icon.inspection {
                   background: #17a2b8;
               }
               
               .timeline-icon.feeding {
                   background: #28a745;
               }
               
               .timeline-icon.division {
                   background: #6f42c1;
               }
               
               .timeline-icon.treatment {
                   background: #dc3545;
               }
               
               .timeline-icon.cleaning {
                   background: #fd7e14;
               }
               
               .timeline-icon.sale {
                   background: #20c997;
               }
               
               .timeline-content {
                   flex: 1;
                   background: white;
                   border-radius: 0.5rem;
                   padding: 1rem;
                   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
               }
               
               .timeline-header {
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   margin-bottom: 0.5rem;
               }
               
               .timeline-header h3 {
                   margin: 0;
                   font-size: 1rem;
                   font-weight: 600;
               }
               
               .timeline-date {
                   font-size: 0.875rem;
                   color: #666;
               }
               
               .timeline-body p {
                   margin: 0.5rem 0;
                   color: var(--text-color);
               }
               
               .timeline-footer {
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   margin-top: 1rem;
                   padding-top: 0.5rem;
                   border-top: 1px solid #f1f3f4;
               }
               
               .performed-by {
                   font-size: 0.875rem;
                   color: #666;
               }
               
               .btn-details {
                   background: var(--primary-color);
                   color: white;
                   padding: 0.25rem 0.75rem;
                   border-radius: 0.25rem;
                   text-decoration: none;
                   font-size: 0.875rem;
                   transition: background-color 0.2s;
               }
               
               .btn-details:hover {
                   background: #357abd;
               }
               /* Photos section */
               
               .photos-section {
                   margin-top: 3rem;
               }
               
               .section-header {
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   margin-bottom: 1.5rem;
               }
               
               .section-header h2 {
                   margin: 0;
                   font-size: 1.5rem;
                   font-weight: 600;
               }
               
               .view-all {
                   color: var(--primary-color);
                   text-decoration: none;
                   font-weight: 500;
                   transition: color 0.2s;
               }
               
               .view-all:hover {
                   text-decoration: underline;
                   color: #357abd;
               }
               
               .photos-grid-preview {
                   display: grid;
                   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                   gap: 1rem;
               }
               
               .photo-card-preview {
                   background: white;
                   border-radius: 0.5rem;
                   overflow: hidden;
                   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                   transition: transform 0.2s;
               }
               
               .photo-card-preview:hover {
                   transform: translateY(-2px);
                   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
               }
               
               .photo-image {
                   position: relative;
                   padding-top: 75%;
                   /* 4:3 aspect ratio */
                   overflow: hidden;
                   cursor: pointer;
               }
               
               .photo-image img {
                   position: absolute;
                   top: 0;
                   left: 0;
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                   transition: transform 0.3s ease;
               }
               
               .photo-image:hover img {
                   transform: scale(1.05);
               }
               
               .photo-caption {
                   padding: 0.75rem;
                   font-size: 0.875rem;
                   color: var(--text-color);
                   line-height: 1.4;
               }
               /* Photo modal */
               
               .modal {
                   position: fixed;
                   z-index: 1000;
                   left: 0;
                   top: 0;
                   width: 100%;
                   height: 100%;
                   background-color: rgba(0, 0, 0, 0.9);
                   display: flex;
                   align-items: center;
                   justify-content: center;
               }
               
               .modal-content {
                   position: relative;
                   margin: auto;
                   padding: 20px;
                   width: 90%;
                   max-width: 800px;
                   text-align: center;
               }
               
               .modal-content img {
                   max-width: 100%;
                   max-height: 70vh;
                   border-radius: 0.5rem;
                   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
               }
               
               .close {
                   position: absolute;
                   top: 15px;
                   right: 35px;
                   color: #f1f1f1;
                   font-size: 40px;
                   font-weight: bold;
                   cursor: pointer;
                   transition: color 0.2s;
               }
               
               .close:hover,
               .close:focus {
                   color: #bbb;
                   text-decoration: none;
               }
               
               #modalCaption,
               #modalDate {
                   color: white;
                   margin-top: 1rem;
                   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
               }
               
               #modalCaption {
                   font-size: 1.1rem;
                   font-weight: 500;
               }
               
               #modalDate {
                   font-size: 0.875rem;
                   opacity: 0.8;
               }
               /* Photo upload form */
               
               .photo-form {
                   background: #f8f9fa;
                   border: 2px dashed var(--border-color);
                   border-radius: 0.5rem;
                   padding: 2rem;
                   margin: 1rem 0;
               }
               
               .photo-form .form-group input[type="file"] {
                   border: none;
                   background: white;
                   padding: 1rem;
                   border-radius: 0.375rem;
                   cursor: pointer;
               }
               
               .photo-form .form-group input[type="file"]:hover {
                   background: #f8f9fa;
               }
               /* No data state */
               
               .no-data {
                   text-align: center;
                   padding: 3rem;
                   color: #666;
               }
               
               .no-data p {
                   margin-bottom: 1rem;
                   font-size: 1.1rem;
               }
               /* Responsive adjustments */
               
               @media (max-width: 768px) {
                   .timeline-item {
                       margin-left: 0;
                   }
                   .operations-timeline::before {
                       left: 20px;
                   }
                   .timeline-header {
                       flex-direction: column;
                       align-items: flex-start;
                       gap: 0.25rem;
                   }
                   .timeline-footer {
                       flex-direction: column;
                       align-items: flex-start;
                       gap: 0.5rem;
                   }
                   .photos-grid-preview {
                       grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                   }
                   .modal-content {
                       width: 95%;
                       padding: 10px;
                   }
                   .close {
                       top: 10px;
                       right: 20px;
                       font-size: 30px;
                   }
                   .section-header {
                       flex-direction: column;
                       align-items: flex-start;
                       gap: 0.5rem;
                   }
               }
               
               @media (max-width: 480px) {
                   .photos-grid-preview {
                       grid-template-columns: repeat(2, 1fr);
                   }
                   .timeline-icon {
                       width: 35px;
                       height: 35px;
                       font-size: 0.875rem;
                   }
                   .operations-timeline::before {
                       left: 17.5px;
                   }
               }
               /* Animation for new photos */
               
               @keyframes fadeInUp {
                   from {
                       opacity: 0;
                       transform: translateY(20px);
                   }
                   to {
                       opacity: 1;
                       transform: translateY(0);
                   }
               }
               
               .photo-card-preview {
                   animation: fadeInUp 0.3s ease-out;
               }
               /* Loading state for photos */
               
               .photo-loading {
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   height: 150px;
                   background: #f8f9fa;
                   color: #666;
                   font-size: 0.875rem;
               }
               /* Success state for photo upload */
               
               .photo-upload-success {
                   background: #d4edda;
                   border: 1px solid #c3e6cb;
                   color: #155724;
                   padding: 1rem;
                   border-radius: 0.375rem;
                   margin: 1rem 0;
                   text-align: center;
               }
               /* Error state for photo upload */
               
               .photo-upload-error {
                   background: #f8d7da;
                   border: 1px solid #f5c6cb;
                   color: #721c24;
                   padding: 1rem;
                   border-radius: 0.375rem;
                   margin: 1rem 0;
                   text-align: center;
               }
               
               @media (max-width: 768px) {
                   .page-header {
                       flex-direction: column;
                       align-items: stretch;
                   }
                   .header-actions {
                       justify-content: center;
                   }
                   .beehive-info-grid {
                       grid-template-columns: 1fr;
                   }
                   .info-row {
                       flex-direction: column;
                       align-items: stretch;
                   }
                   .info-value {
                       text-align: left;
                       margin-top: 0.25rem;
                   }
                   .timeline-item {
                       margin-left: 0;
                   }
                   .operations-timeline::before {
                       left: 20px;
                   }
                   .photos-grid-preview {
                       grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                   }
               }