/* Update styling to apply transform to parent div on hover */
[data-toggle="tooltip"][data-clipboard-text] {
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* Custom styling for dropdowns */
.form-control.glyph-selector {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right .75rem center;
  background-size: 12px 12px;
  padding-right: 1.75rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #ced4da;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control.glyph-selector:hover {
  border-color: #adb5bd;
}

.form-control.glyph-selector:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: 0;
}

/* New styles for improved glyph layout */
.category-section {
  margin-bottom: 30px;
}

.category-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 8px;
}

.glyphs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.glyph-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  border: 1px solid #e9ecef;
  padding: 12px 5px;
  transition: all 0.2s ease;
  height: 90px;
}

.glyph-card:hover {
  background-color: #e9ecef;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.glyph-char {
  font-size: 32px;
  margin-bottom: 8px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.glyph-name {
  font-size: 11px;
  color: #6c757d;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.glyph-unicode {
  font-size: 9px;
  color: #999;
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin-top: 2px;
}

/* New table-based layout styles */
.font-glyphs-container {
  width: 100%;
}

.glyph-tables-container {
  width: 100%;
  overflow: hidden;
}

.glyph-table {
  width: 100%;
  table-layout: fixed;
  border: 1px solid #dee2e6;
  margin-bottom: 0;
}

.glyph-table td {
  text-align: center;
  vertical-align: middle;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  background-color: #fff;
  transition: background-color 0.2s ease;
  height: 100px;
  width: 9.09%; /* 100% / 11 columns */
}

.glyph-table td:hover {
  background-color: #f8f9fa;
  cursor: pointer;
}

.glyph-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.glyph-cell .glyph-char {
  font-size: 28px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  color: #333;
}

.glyph-cell .glyph-name {
  font-size: 10px;
}

/* Updated styles for horizontal grid layout */
.glyph-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
  padding: 5px 0;
}

.glyph-item {
  flex: 0 0 auto;
  width: calc(16.666% - 8px); /* 6 items per row by default - MAX for small previews */
  height: 0;
  padding-bottom: calc(16.666% - 8px); /* Equal to width for square shape */
  margin: 4px;
  position: relative;
  background-color: #fafafa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
  overflow: visible;
  box-sizing: border-box;
}

.glyph-item-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 14px; /* Increased bottom padding from 12px to 14px */
}

.glyph-item:hover {
  background-color: #f4f4f4;
  z-index: 1;
}

.glyph-item .glyph-char {
  font-size: 30px; /* Standardized size for all character sets */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-grow: 1;
  margin-top: 6px;
}

.glyph-item .glyph-name {
  font-size: 10px; /* Standardized size for all character sets */
  color: #6c757d;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  line-height: 1.2;
  margin-bottom: 7px; /* Increased from 5px to 7px */
  min-height: 14px;
  padding: 0 2px;
  position: relative;
  z-index: 2;
}

/* Large glyph size styles */
.glyph-grid.large-size {
  margin: 0 -6px;
}

.glyph-grid.large-size .glyph-item {
  width: calc(20% - 12px); /* 5 items per row for large size - MAX for large previews */
  padding-bottom: calc(20% - 12px); /* Equal to width for square shape */
  margin: 6px;
}

.glyph-grid.large-size .glyph-item-inner {
  padding: 12px 4px 16px; /* Increased bottom padding from 12px to 16px */
}

.glyph-grid.large-size .glyph-char {
  font-size: 36px; /* Standardized large size for all character sets */
  margin-bottom: 10px;
}

.glyph-grid.large-size .glyph-name {
  font-size: 12px; /* Standardized size for all character sets */
  line-height: 1.3;
  margin-bottom: 8px; /* Add more bottom margin */
}

/* Ensure special glyph items match standard ones */
.special-glyph-item {
  width: calc(16.666% - 8px) !important; /* Match standard items */
  padding-bottom: calc(16.666% - 8px) !important;
}

.glyph-grid.large-size .special-glyph-item {
  width: calc(20% - 12px) !important; /* Match large standard items */
  padding-bottom: calc(20% - 12px) !important;
}

.glyph-special-content {
  /* Ensure the special content has proper styling */
  font-size: 30px; /* Match standard character size */
  flex-grow: 1;
  margin-top: 6px;
  width: 100%;
  text-align: center;
}

.glyph-grid.large-size .glyph-special-content {
  font-size: 36px; /* Match large character size */
}

/* Special styling for ligatures */
.glyph-special-content.ligature {
  font-size: 26px; /* slightly smaller for ligatures which may be wider */
}

.glyph-grid.large-size .glyph-special-content.ligature {
  font-size: 32px; /* slightly smaller for ligatures which may be wider */
}

/* Responsive adjustments for both small and large */
@media (max-width: 1399px) {
  /* No changes needed - still 6 and 5 items per row */
}

@media (max-width: 1199px) {
  .glyph-item {
    width: calc(20% - 8px); /* 5 items per row */
    padding-bottom: calc(20% - 8px);
  }
  .glyph-grid.large-size .glyph-item {
    width: calc(25% - 12px); /* 4 items per row */
    padding-bottom: calc(25% - 12px);
  }
  .special-glyph-item {
    width: calc(20% - 8px) !important; /* 5 items per row */
    padding-bottom: calc(20% - 8px) !important;
  }
  .glyph-grid.large-size .special-glyph-item {
    width: calc(25% - 12px) !important; /* 4 items per row */
    padding-bottom: calc(25% - 12px) !important;
  }
  /* Keep font sizes consistent across all breakpoints */
  .glyph-item .glyph-char, .glyph-special-content {
    font-size: 30px; /* Same as desktop */
  }
  .glyph-grid.large-size .glyph-char, .glyph-grid.large-size .glyph-special-content {
    font-size: 36px; /* Same as desktop */
  }
  .glyph-item .glyph-name {
    font-size: 10px; /* Same as desktop */
  }
  .glyph-grid.large-size .glyph-name {
    font-size: 12px; /* Same as desktop */
  }
}

@media (max-width: 991px) {
  .glyph-item {
    width: calc(25% - 8px); /* 4 items per row - MIN for small previews */
    padding-bottom: calc(25% - 8px);
  }
  .glyph-grid.large-size .glyph-item {
    width: calc(33.333% - 12px); /* 3 items per row - MIN for large previews */
    padding-bottom: calc(33.333% - 12px);
  }
  .special-glyph-item {
    width: calc(25% - 8px) !important; /* 4 items per row */
    padding-bottom: calc(25% - 8px) !important;
  }
  .glyph-grid.large-size .special-glyph-item {
    width: calc(33.333% - 12px) !important; /* 3 items per row */
    padding-bottom: calc(33.333% - 12px) !important;
  }
  /* Keep font sizes consistent across all breakpoints */
  .glyph-item .glyph-char, .glyph-special-content {
    font-size: 30px; /* Same as desktop */
  }
  .glyph-grid.large-size .glyph-char, .glyph-grid.large-size .glyph-special-content {
    font-size: 36px; /* Same as desktop */
  }
  .glyph-item .glyph-name {
    font-size: 10px; /* Same as desktop */
  }
  .glyph-grid.large-size .glyph-name {
    font-size: 12px; /* Same as desktop */
  }
}

@media (max-width: 767px) {
  .glyph-item {
    width: calc(25% - 8px); /* Keep 4 items per row - MIN for small previews */
    padding-bottom: calc(25% - 8px);
  }
  .glyph-grid.large-size .glyph-item {
    width: calc(33.333% - 12px); /* Keep 3 items per row - MIN for large previews */
    padding-bottom: calc(33.333% - 12px);
  }
  .special-glyph-item {
    width: calc(25% - 8px) !important; /* 4 items per row */
    padding-bottom: calc(25% - 8px) !important;
  }
  .glyph-grid.large-size .special-glyph-item {
    width: calc(33.333% - 12px) !important; /* 3 items per row */
    padding-bottom: calc(33.333% - 12px) !important;
  }
  /* Keep font sizes consistent across all breakpoints */
  .glyph-item .glyph-char, .glyph-special-content {
    font-size: 30px; /* Same as desktop */
  }
  .glyph-grid.large-size .glyph-char, .glyph-grid.large-size .glyph-special-content {
    font-size: 36px; /* Same as desktop */
  }
  .glyph-item .glyph-name {
    font-size: 10px; /* Same as desktop */
    margin-bottom: 8px; /* More bottom margin on mobile */
  }
  .glyph-grid.large-size .glyph-name {
    font-size: 12px; /* Same as desktop */
    margin-bottom: 9px; /* More bottom margin on mobile */
  }
  /* Additional mobile optimizations */
  .glyph-item-inner {
    padding: 8px 4px 16px; /* Increased bottom padding for mobile */
  }
  .glyph-grid.large-size .glyph-item-inner {
    padding: 12px 4px 18px; /* Even more bottom padding for large mode on mobile */
  }
}

@media (max-width: 575px) {
  .glyph-item {
    width: calc(25% - 8px); /* Keep 4 items per row - MIN for small previews */
    padding-bottom: calc(25% - 8px);
  }
  .glyph-grid.large-size .glyph-item {
    width: calc(33.333% - 12px); /* Keep 3 items per row - MIN for large previews */
    padding-bottom: calc(33.333% - 12px);
  }
  /* Keep font sizes consistent across all breakpoints */
  .glyph-item .glyph-char, .glyph-special-content {
    font-size: 30px; /* Same as desktop */
  }
  .glyph-grid.large-size .glyph-char, .glyph-grid.large-size .glyph-special-content {
    font-size: 36px; /* Same as desktop */
  }
  .glyph-item .glyph-name {
    font-size: 10px; /* Same as desktop */
    margin-bottom: 9px; /* Extra bottom margin for small screens */
  }
  .glyph-grid.large-size .glyph-name {
    font-size: 12px; /* Same as desktop */
    margin-bottom: 10px; /* Extra bottom margin for small screens */
  }
  .special-glyph-item {
    width: calc(25% - 8px) !important; /* Keep 4 items per row */
    padding-bottom: calc(25% - 8px) !important;
  }
  .glyph-grid.large-size .special-glyph-item {
    width: calc(33.333% - 12px) !important; /* Keep 3 items per row */
    padding-bottom: calc(33.333% - 12px) !important;
  }
  
  /* Extra adjustment for iPhone small screens */
  .glyph-item-inner {
    padding: 8px 2px 16px; /* Adjusted padding for very small screens */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align to top */
  }
  .glyph-grid.large-size .glyph-item-inner {
    padding: 10px 2px 18px; /* Adjusted padding for very small screens */
  }
  .glyph-item .glyph-char {
    margin-bottom: 8px; /* Add space between character and name */
  }
}

/* Small screens up to 390px */
@media screen and (max-width: 390px) and (min-width: 376px) {
  .glyph-item .glyph-name {
    margin-bottom: 8px;
    font-size: 9px;
    line-height: 1.1;
  }
  
  .glyph-item-inner {
    padding: 8px 2px 16px;
  }
  
  /* Add extra height to container */
  .glyph-item {
    padding-bottom: calc(25% - 8px + 5px);
  }
  
  .glyph-item .glyph-char {
    margin-top: 5px;
    margin-bottom: 7px;
    font-size: 28px;
  }
}

/* iPhone specific adjustments */
@media screen and (max-width: 375px) {
  .glyph-item .glyph-name {
    margin-bottom: 10px; /* Extra margin for iPhone mini/SE */
    font-size: 9px; /* Slightly smaller font */
  }
  .glyph-item-inner {
    padding: 8px 2px 18px; /* Even more bottom padding */
  }
  
  /* Modified container proportions for small screens */
  .glyph-item {
    /* Increase height to width ratio for more vertical space */
    padding-bottom: calc(25% - 8px + 10px); /* Add extra height */
  }
  
  /* Improved alignment and spacing */
  .glyph-item .glyph-char {
    margin-top: 4px; /* Reduce top margin */
    margin-bottom: 6px; /* Tighten spacing */
    font-size: 28px; /* Slightly smaller font size */
  }
}

/* Ultra small screens (iPhone SE and smaller) */
@media screen and (max-width: 320px) {
  .glyph-item .glyph-name {
    font-size: 8px; /* Even smaller font */
    margin-bottom: 6px;
    line-height: 1.1; /* Tighter line height */
    padding: 0 1px; /* Reduce horizontal padding */
  }
  
  .glyph-item-inner {
    padding: 6px 1px 16px; /* Adjusted padding */
  }
  
  .glyph-item {
    /* Increase height even more */
    padding-bottom: calc(25% - 8px + 15px);
  }
  
  .glyph-item .glyph-char {
    font-size: 26px; /* Reduce font size further */
    margin-top: 2px;
    margin-bottom: 4px;
  }
  
  /* Override grid layout for ultra-small screens */
  .glyph-grid {
    margin: 0 -2px; /* Tighter margins */
  }
  
  .glyph-item {
    margin: 2px; /* Tighter margins */
    width: calc(25% - 4px); /* Adjusted for tighter margins */
  }
  
  .special-glyph-item {
    width: calc(25% - 4px) !important;
    padding-bottom: calc(25% - 4px + 15px) !important;
  }
}