/* Table styles */
.table-wrap { 
  overflow-x: auto;
  overflow-y: auto; 
  background: white; 
  border: 1px solid #e2e8f0; 
  border-radius: 10px;
  max-height: 70vh;
}

table { 
  width: 100%; 
  min-width: 900px; /* Đảm bảo đủ chỗ cho tất cả cột */
  border-collapse: collapse; 
}

th, td { 
  padding: 10px 12px; 
  border-bottom: 1px solid #f1f5f9; 
  vertical-align: middle; 
  line-height: 1.2;
}

th { 
  background: #f8fafc; 
  text-align: left; 
  position: sticky; 
  top: 0; 
  font-weight: 600;
  color: #374151;
}

/* Sermons table: keep actions on one line */
#sermons-view td.item-actions { white-space: nowrap; }

/* Sermons table: consistent icon sizing */
#sermons-view td.item-icon { white-space: nowrap; }
#sermons-view .filetype-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
#sermons-view td.item-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Inline rename input */
#sermons-view .inline-rename-input {
  width: 100%;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
}

#sermons-view .inline-rename-input:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Expandable row styling */
.main-row {
  transition: background-color 0.2s ease;
  line-height: 1;
}

.main-row td {
  padding: 8px 12px;
  vertical-align: middle;
}

.main-row:hover {
  background-color: #f8fafc;
}

.expand-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 12px;
  user-select: none;
}

.detail-row {
  animation: slideDown 0.2s ease-out;
}

.detail-row td {
  border-bottom: 2px solid #e2e8f0 !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Admin detail row specific styling */
#admins-view .detail-row td > div {
  max-width: 100%;
}

#admins-view .detail-row .email {
  word-break: break-all;
  color: #3b82f6;
  font-family: 'Courier New', monospace;
}

#admins-view .detail-row strong {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobile responsive for admin and users detail rows */
@media (max-width: 768px) {
  #admins-view .detail-row td,
  #users-view .detail-row td {
    padding: 12px 16px !important;
  }
  
  #admins-view .detail-row > td > div,
  #users-view .detail-row > td > div {
    gap: 16px !important;
  }
  
  .expand-icon {
    font-size: 14px;
  }
  
  /* Make table actions stack vertically on tablet */
  .table-actions {
    flex-direction: column;
    align-items: stretch !important;
  }
  
  .table-actions > div {
    width: 100%;
    justify-content: space-between;
  }
  
  .table-actions input[type="text"] {
    flex: 1;
    min-width: 0;
  }
  
  /* Reduce min-width for mobile scrolling */
  table {
    min-width: 650px !important;
  }
}

@media (max-width: 480px) {
  #admins-view .detail-row td,
  #users-view .detail-row td {
    padding: 10px 12px !important;
  }
  
  #admins-view .detail-row strong,
  #users-view .detail-row strong {
    font-size: 0.75rem !important;
  }
  
  #admins-view .detail-row .email,
  #users-view .detail-row .email {
    font-size: 0.875rem;
  }
  
  /* Further reduce table min-width for small phones */
  table {
    min-width: 550px !important;
  }
  
  /* Make buttons full width in stacked layout */
  .table-actions button {
    flex: 1;
  }
  
  /* Compact page size selector */
  .table-actions select {
    min-width: 100px;
  }
  
  /* Hide column headers text on very small screens, use icons/abbreviations */
  th {
    font-size: 12px;
    padding: 8px 4px;
  }
  
  td {
    font-size: 13px;
    padding: 8px 6px;
  }
  
  .avatar {
    width: 28px !important;
    height: 28px !important;
  }
  
  /* Make role select more compact */
  .role-select {
    font-size: 12px;
    padding: 4px 6px;
    min-width: 90px;
  }
  
  /* More compact buttons */
  .btn.small {
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
  .table-wrap {
    max-height: 60vh;
  }
  
  .table-actions {
    margin: 4px 0;
  }
  
  h2 {
    font-size: 18px;
    margin-bottom: 8px;
  }
}

.avatar { 
  width: 36px; 
  height: 36px; 
  border-radius: 50%; 
  object-fit: cover;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  display: inline-block;
}

.table-actions { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin: 8px 0; 
  flex-wrap: wrap;
  gap: 8px;
}

.table-actions input { 
  padding: 8px 12px; 
  width: 320px; 
  max-width: 100%;
  border: 1px solid #e2e8f0; 
  border-radius: 8px; 
}

.role-select, .status-select { 
  padding: 6px 8px; 
  border: 1px solid #e5e7eb; 
  border-radius: 6px; 
}

.message { 
  max-width: 420px; 
  white-space: pre-wrap; 
}

/* Page permissions styling */
.pages-permissions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  width: 100%;
  padding: 4px;
}

.page-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.page-checkbox-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: transparent;
  transition: background-color 0.2s ease;
}

.page-checkbox-label:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateX(2px);
}

.page-checkbox-label input[type="checkbox"] {
  margin: 0;
  transform: scale(1.1);
  accent-color: #3b82f6;
}

.page-checkbox-label input[type="checkbox"]:checked + .page-label {
  color: #0f172a;
  font-weight: 600;
}

.page-checkbox-label:has(input:checked) {
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  border-color: #3b82f6;
  color: #1e40af;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}

.page-checkbox-label:has(input:checked)::before {
  background: #3b82f6;
}

.page-label {
  color: #64748b;
  transition: color 0.2s ease;
  line-height: 1.3;
  flex: 1;
}

.permission-note {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f1f5f9, #f8fafc);
  border-radius: 8px;
  border-left: 3px solid #64748b;
  border-right: 1px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}

.note-text {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
  font-weight: 600;
}

/* Special styling for different permission types */
.page-checkbox-label:has(input[data-page*="admin"]) {
  border-left: 3px solid #dc2626;
}

.page-checkbox-label:has(input[data-page*="admin"]):has(input:checked) {
  background: linear-gradient(135deg, #fecaca, #fef2f2);
  border-color: #dc2626;
  color: #991b1b;
}

.page-checkbox-label:has(input[data-page*="user"]) {
  border-left: 3px solid #7c3aed;
}

.page-checkbox-label:has(input[data-page*="user"]):has(input:checked) {
  background: linear-gradient(135deg, #e9d5ff, #f3e8ff);
  border-color: #7c3aed;
  color: #5b21b6;
}

.page-checkbox-label:has(input[data-page*="attendance"]) {
  border-left: 3px solid #059669;
}

.page-checkbox-label:has(input[data-page*="attendance"]):has(input:checked) {
  background: linear-gradient(135deg, #a7f3d0, #d1fae5);
  border-color: #059669;
  color: #047857;
}

.page-checkbox-label:has(input[data-page*="giving"]) {
  border-left: 3px solid #d97706;
}

.page-checkbox-label:has(input[data-page*="giving"]):has(input:checked) {
  background: linear-gradient(135deg, #fed7aa, #fef3c7);
  border-color: #d97706;
  color: #92400e;
}

/* Enhanced table cell for permissions */
.pages-cell {
  vertical-align: top !important;
  padding: 8px 12px !important;
}

/* Ensure delete button is always visible */
.btn.delete {
  display: inline-block !important;
}

/* Admin full permissions styling */
.admin-full-permissions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 4px;
  flex-wrap: wrap;
}

.admin-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fef3c7, #fed7aa);
  border: 2px solid #f59e0b;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
  flex: 1;
  min-width: 200px;
}

.admin-icon {
  font-size: 20px;
}

.admin-text {
  font-weight: 700;
  color: #92400e;
  font-size: 14px;
}

.admin-note {
  padding: 10px 14px;
  background: linear-gradient(135deg, #f1f5f9, #f8fafc);
  border-radius: 8px;
  border-left: 3px solid #f59e0b;
  border-right: 1px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  flex: 1;
  min-width: 250px;
  text-align: center;
}

.admin-note .note-text {
  font-size: 13px;
  line-height: 1.4;
}

/* Mobile responsive for permissions */
@media (max-width: 768px) {
  .pages-permissions {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
  }
  
  .page-checkbox-label {
    font-size: 11px;
    padding: 5px 8px;
  }
  
  .permission-note {
    padding: 6px 10px;
  }
  
  .note-text {
    font-size: 11px;
  }
  
  .admin-full-permissions {
    flex-direction: column;
  }
  
  .admin-badge,
  .admin-note {
    min-width: 100%;
  }
}

/* Compact view for small screens */
@media (max-width: 480px) {
  .pages-permissions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  
  .page-checkbox-label {
    font-size: 11px;
    padding: 6px 8px;
    gap: 4px;
  }
  
  .page-label {
    font-size: 11px;
    line-height: 1.2;
  }

  .table-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .table-actions input {
    width: 100%;
  }
  
  .table-wrap {
    font-size: 13px;
    border-radius: 8px;
  }
  
  th, td {
    padding: 8px 6px;
    font-size: 13px;
  }
  
  th {
    font-size: 12px;
    padding: 10px 6px;
  }
  
  table {
    min-width: 700px; /* Reduce min-width for mobile */
  }
  
  .avatar {
    width: 32px;
    height: 32px;
  }
  
  .btn.small {
    padding: 3px 6px;
    font-size: 11px;
  }
}

@media (max-width: 430px) {
  table {
    min-width: 620px !important;
  }

  th,
  td {
    padding: 7px 5px;
    font-size: 12px;
  }

  .role-select,
  .status-select {
    max-width: 120px;
    font-size: 12px;
    min-height: 30px;
  }

  .table-actions {
    gap: 6px;
  }
}

@media (max-width: 390px) {
  table {
    min-width: 560px !important;
  }

  th,
  td {
    padding: 6px 4px;
    font-size: 11px;
  }

  .avatar {
    width: 24px !important;
    height: 24px !important;
  }

  .role-select,
  .status-select {
    max-width: 108px;
    font-size: 11px;
    min-height: 28px;
    padding: 2px 4px;
  }

  .btn.small {
    padding: 2px 5px;
    font-size: 10px;
  }
}

/* Enhanced mobile table scrolling */
@media (max-width: 768px) {
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-radius: 8px;
  }
  
  .table-wrap::-webkit-scrollbar {
    height: 8px;
  }
  
  .table-wrap::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
  }
  
  .table-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }
  
  .table-wrap::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
  
  /* Sticky first column for better mobile UX */
  table th:nth-child(1),
  table td:nth-child(1) {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 1;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  }
  
  table th:nth-child(2),
  table td:nth-child(2) {
    position: static;
    left: auto;
    box-shadow: none;
  }
  
  table th:nth-child(1),
  table th:nth-child(2) {
    z-index: 2;
  }
  
  /* Add scroll hint gradient */
  .table-wrap {
    position: relative;
  }
  
  .table-wrap::after {
    content: '';
    position: sticky;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(to left, rgba(255,255,255,0.95), transparent);
    pointer-events: none;
    float: right;
    margin-left: -30px;
  }
  
  /* Scroll indicator */
  .table-wrap::before {
    content: '⟶';
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 20px;
    animation: scrollHint 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
  }
  
  @keyframes scrollHint {
    0%, 100% { opacity: 0.3; transform: translateY(-50%) translateX(0); }
    50% { opacity: 0.8; transform: translateY(-50%) translateX(4px); }
  }
  
  /* Hide scroll indicator when scrolled */
  .table-wrap.scrolled::before {
    display: none;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .main-row {
    min-height: 48px;
  }
  
  .expand-icon {
    padding: 8px;
    margin: -8px;
  }
  
  /* Larger touch targets for controls */
  .role-select,
  .status-select {
    min-height: 36px;
    font-size: 14px;
    padding: 4px 6px;
    max-width: 140px;
  }
  
  /* Status select in table cells - more compact */
  table .status-select {
    font-size: 13px;
    min-height: 32px;
    padding: 4px 6px;
    width: auto;
  }
  
  .table-actions input {
    min-height: 44px;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Add tap feedback */
  .main-row:active {
    background-color: #f1f5f9;
    transition: background-color 0.1s;
  }
  
  button:active {
    transform: scale(0.95);
    transition: transform 0.1s;
  }
}

/* Mobile navigation improvements */
@media (max-width: 480px) {
  /* Even more compact for small screens */
  .role-select,
  .status-select {
    min-height: 32px;
    font-size: 13px;
    padding: 3px 5px;
    max-width: 130px;
  }
  
  table .status-select {
    font-size: 12px;
    min-height: 30px;
    padding: 3px 4px;
  }
  
  /* Better pagination controls */
  .table-actions > div:last-child {
    position: relative;
  }
  
  .table-actions button {
    position: relative;
    overflow: hidden;
  }
  
  /* Add ripple effect hint */
  .table-actions button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
  }
  
  .table-actions button:active::after {
    width: 100px;
    height: 100px;
  }
}

/* Attendance table numeric inputs: compact width for up to 3 digits */
#attendance-view .table-wrap input[type="number"].att-adults,
#attendance-view .table-wrap input[type="number"].att-children,
#attendance-view .table-wrap input[type="number"].att-tiepNhan,
#attendance-view .table-wrap input[type="number"].att-chuaLanh,
#attendance-view .table-wrap input[type="number"].att-thanhLinh {
  width: 6ch; /* room for 3 digits + spinner + padding */
  text-align: right;
}

/* Attendance filters: compact date inputs */
#attendance-view .table-actions input[type="date"] {
  width: 150px;
}

/* Giving table numeric amount input: slightly wider for currency */
#giving-view .table-wrap input[type="number"].giv-amount {
  width: 10ch;
  text-align: right;
}

/* Giving filters: compact date inputs same as attendance */
#giving-view .table-actions input[type="date"] {
  width: 150px;
}

/* Audit filters: compact date inputs */
#audit-view .table-actions input[type="date"] {
  width: 150px;
}

/* Giving table footer style */
#giving-view tfoot td {
  background: #f8fafc;
  font-weight: 600;
}