/* Permissions Overview Styles - Theme-based */

/* ===========================
   Permissions Table Wrapper
   =========================== */
.permissions-table-wrapper {
  position: relative;
}

/* ===========================
   Sticky Header
   =========================== */
.permissions-table-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

.permissions-table-header th {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--muted);
  box-shadow: 0 1px 0 var(--border);
}

/* First column sticky (Model name) */
.sticky-first-col {
  position: sticky;
  left: 0;
  z-index: 10;
  min-width: 180px;
  max-width: 250px;
}

/* Intersection of sticky header and sticky first column */
.permissions-table-header th.sticky-first-col {
  z-index: 30;
  background-color: var(--muted);
}

/* ===========================
   Permission Badges
   =========================== */
.permission-badges {
  min-width: 120px;
  padding: 0.5rem;
}

/* Detailed view styling */
.detailed-view {
  max-width: 200px;
  font-size: 0.75rem;
  line-height: 1.2;
}

/* Compact view styling */
.compact-view {
  white-space: nowrap;
}

/* ===========================
   View Mode Buttons
   =========================== */
[data-active="true"] {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

[data-active="true"]:hover {
  background-color: oklch(from var(--primary) calc(l - 0.05) c h);
}

/* ===========================
   Role Comparison
   =========================== */
.role-comparison-active [data-role-id] {
  transition: opacity 0.3s ease;
}

.role-comparison-active [data-role-id].hidden {
  display: none;
}

/* ===========================
   Category Row Styling
   =========================== */
.category-row td {
  font-weight: 600;
  background-color: var(--muted);
  border-top: 2px solid var(--border);
}

/* ===========================
   Detailed View Grid
   =========================== */
.detailed-view .grid {
  row-gap: 0.25rem;
}

/* ===========================
   Custom Scrollbar
   =========================== */
.permissions-table-wrapper .overflow-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.permissions-table-wrapper .overflow-auto::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track {
  background: var(--muted);
  border-radius: 5px;
}

.permissions-table-wrapper .overflow-auto::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
}

.permissions-table-wrapper .overflow-auto::-webkit-scrollbar-thumb:hover,
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}

/* Corner piece for dual scrollbars */
.permissions-table-wrapper .overflow-auto::-webkit-scrollbar-corner {
  background: var(--muted);
}

/* ===========================
   Checkbox Styling
   =========================== */
.form-checkbox {
  appearance: none;
  background-color: var(--background);
  border: 2px solid var(--border);
  border-radius: 0.25rem;
  transition: all 0.15s ease;
}

.form-checkbox:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.form-checkbox:hover {
  border-color: var(--primary);
}

.form-checkbox:focus {
  outline: none;
  ring: 2px solid var(--ring);
  ring-offset: 2px;
  ring-offset-color: var(--background);
}

/* ===========================
   Responsive Adjustments
   =========================== */
@media (max-width: 640px) {
  .sticky-first-col {
    min-width: 140px;
    max-width: 180px;
  }
  
  .permissions-table-wrapper {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* ===========================
   Print Styles
   =========================== */
@media print {
  .permissions-table-header,
  .permissions-table-header th,
  .sticky-first-col {
    position: static !important;
  }
  
  .permissions-table-wrapper .overflow-auto {
    max-height: none !important;
    overflow: visible !important;
  }
}