/* ============================================================
   PhotoZen Admin — Custom Styles
   ============================================================ */

/* --- Background --- */
body {
  background: linear-gradient(135deg, #e9f2ff 0%, #f8fafc 40%, #ffffff 100%) no-repeat;
  background-attachment: fixed;
}

[data-bs-theme="dark"] body {
  background: #1a1a2e;
}

/* --- Page pretitle --- */
.page-pretitle {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .7rem;
}

/* --- Sidebar --- */
.navbar-vertical {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(98, 105, 118, .12);
}

.navbar-vertical .nav-link {
  border-radius: 6px;
  margin: 1px 8px;
  padding: 8px 12px;
  transition: all .15s ease;
  border-left: 3px solid transparent;
}

.navbar-vertical .nav-link:hover {
  background: rgba(32, 107, 196, .06);
}

.navbar-vertical .nav-link.active {
  background: rgba(32, 107, 196, .08);
  border-left-color: var(--tblr-primary);
  font-weight: 600;
}

.navbar-vertical .nav-link-icon {
  color: var(--tblr-muted);
  width: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navbar-vertical .nav-link.active .nav-link-icon {
  color: var(--tblr-primary);
}

.navbar-vertical .dropdown-menu {
  position: static !important;
  border: none;
  box-shadow: none;
  padding: 0 0 0 1.5rem;
  background: transparent;
}

.navbar-vertical .dropdown-item {
  border-radius: 6px;
  margin: 1px 8px;
  padding: 6px 12px;
  transition: all .15s ease;
  font-size: .875rem;
  border-left: 3px solid transparent;
}

.navbar-vertical .dropdown-item:hover {
  background: rgba(32, 107, 196, .06);
}

.navbar-vertical .dropdown-item.active {
  background: rgba(32, 107, 196, .08);
  border-left-color: var(--tblr-primary);
  font-weight: 600;
  color: var(--tblr-primary);
}

[data-bs-theme="dark"] .navbar-vertical {
  background: #1e293b;
  border-right-color: rgba(255, 255, 255, .06);
}

[data-bs-theme="dark"] .navbar-vertical .nav-link:hover,
[data-bs-theme="dark"] .navbar-vertical .dropdown-item:hover {
  background: rgba(255, 255, 255, .05);
}

[data-bs-theme="dark"] .navbar-vertical .nav-link.active,
[data-bs-theme="dark"] .navbar-vertical .dropdown-item.active {
  background: rgba(32, 107, 196, .15);
}

/* --- Cards --- */
.card {
  border-radius: 8px;
  border: 1px solid rgba(98, 105, 118, .1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
  transition: box-shadow .2s ease, transform .2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

[data-bs-theme="dark"] .card {
  background: #1e1e2d;
  border-color: rgba(255, 255, 255, .06);
}

/* --- Stat cards --- */
.stat-card {
  border-top: 3px solid var(--stat-color, var(--tblr-primary));
}

.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat-card .stat-label {
  color: var(--tblr-muted);
  font-size: .8125rem;
  margin-top: 2px;
}

/* --- Tables --- */
.table thead th {
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom-width: 1px;
}

[data-bs-theme="dark"] .table thead th {
  background: rgba(255, 255, 255, .03);
}

.table-hover tbody tr:hover {
  background: rgba(32, 107, 196, .03);
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
  background: rgba(255, 255, 255, .03);
}

.table .badge {
  margin-right: 2px;
}

/* --- Forms --- */
.form-control:focus,
.form-select:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 3px rgba(32, 107, 196, .15);
}

/* --- Quick actions --- */
.quick-action-card {
  border: 1px dashed rgba(98, 105, 118, .25);
  border-radius: 8px;
  transition: all .2s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  gap: .5rem;
}

.quick-action-card:hover {
  border-color: var(--tblr-primary);
  background: rgba(32, 107, 196, .04);
  color: var(--tblr-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.quick-action-card i {
  font-size: 1.5rem;
  color: var(--tblr-primary);
}

/* --- Mono font --- */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* --- Feature grid --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 992px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Code hash --- */
.codehash {
  font-size: 12px;
}

/* --- Login page --- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.login-bg {
  min-height: 100vh;
  background: linear-gradient(-45deg, #e9f2ff, #f0e6ff, #e6f7ff, #f5f0ff);
  background-size: 400% 400%;
  animation: loginGradient 12s ease infinite;
}

@keyframes loginGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.brand {
  font-weight: 700;
  letter-spacing: .5px;
}

.login-card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
}

/* --- HTMX loading indicator --- */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline-block;
}

/* --- Responsive table: truncate UUID on smaller screens --- */
@media (max-width: 768px) {
  td.mono {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* --- Toast animation --- */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-slide-in {
  animation: slideInRight .3s ease-out;
}

/* --- Pagination --- */
.pagination .page-link {
  border-radius: 6px;
  margin: 0 2px;
  min-width: 2rem;
  text-align: center;
}

/* --- JSON expand toggle --- */
.json-expand-btn {
  cursor: pointer;
  color: var(--tblr-primary);
  font-size: .75rem;
  border: none;
  background: none;
  padding: 0;
  text-decoration: underline;
}

.json-full {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 12px;
  max-height: 300px;
  overflow: auto;
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  border-radius: 6px;
  padding: .75rem;
  margin-top: .5rem;
}

[data-bs-theme="dark"] .json-full {
  background: rgba(255, 255, 255, .04);
}

/* --- Scrollbar (dark mode) --- */
[data-bs-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: #1a1a2e;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 4px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* --- Dark mode dividers --- */
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  border-color: rgba(255, 255, 255, .06);
}

[data-bs-theme="dark"] .table {
  border-color: rgba(255, 255, 255, .06);
}

/* --- Mobile sidebar --- */
@media (max-width: 991.98px) {
  .navbar-vertical {
    position: static;
    height: auto;
    overflow: visible;
    border-right: none;
    width: 0;
    min-width: 0;
    padding: 0;
  }
}

/* ============================================================
   移动端体验体系（2026-10-05 UX 重造）
   原则：触控目标 ≥44px、表格窄屏可读、筛选不吞首屏、按钮可点
   ============================================================ */

/* --- 汉堡按钮：提高视觉权重（可发现性） --- */
.mobile-menu-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(98, 105, 118, .25);
  border-radius: 8px;
  background: var(--tblr-bg-surface, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  padding: 0;
}

.mobile-menu-btn .navbar-toggler-icon {
  width: 1.25rem;
  height: 1.25rem;
  opacity: .8;
}

[data-bs-theme="dark"] .mobile-menu-btn {
  background: #1e293b;
  border-color: rgba(255, 255, 255, .1);
}

/* --- 退出按钮：窄屏只留图标 --- */
@media (max-width: 575.98px) {
  .btn-logout .logout-text {
    display: none;
  }
  .btn-logout {
    padding: .5rem .65rem;
  }
}

/* --- 侧边栏抽屉（移动端）：子菜单默认展开 + 触控高度 --- */
@media (max-width: 991.98px) {
  .navbar-vertical .dropdown-menu {
    display: block !important;
    position: static !important;
  }
  .navbar-vertical .dropdown-toggle::after {
    display: none;
  }
  .navbar-vertical .nav-link,
  .navbar-vertical .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-block: 10px;
    font-size: .9375rem;
  }
}

/* --- 表格窄屏卡片化（模板给 table 加 .table-mobile-card，td 加 data-label） --- */
@media (max-width: 767.98px) {
  .table-mobile-card thead {
    display: none;
  }
  .table-mobile-card,
  .table-mobile-card tbody,
  .table-mobile-card tr,
  .table-mobile-card td {
    display: block;
    width: 100%;
  }
  .table-mobile-card tbody tr {
    border: 1px solid rgba(98, 105, 118, .14);
    border-radius: 10px;
    margin-bottom: .75rem;
    padding: .5rem .875rem;
    background: var(--tblr-bg-surface, #fff);
  }
  .table-mobile-card tbody td {
    border: none;
    padding: .45rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: right;
    white-space: normal;
  }
  .table-mobile-card tbody td::before {
    content: attr(data-label);
    font-size: .75rem;
    font-weight: 600;
    color: var(--tblr-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    flex-shrink: 0;
  }
  .table-mobile-card tbody td:empty,
  .table-mobile-card tbody td:not([data-label]) {
    display: none;
  }
  [data-bs-theme="dark"] .table-mobile-card tbody tr {
    background: #1e1e2d;
    border-color: rgba(255, 255, 255, .08);
  }
}

/* --- 可横滑表格：右缘渐隐提示 --- */
.table-scroll-hint {
  position: relative;
}
@media (max-width: 767.98px) {
  .table-scroll-hint::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .06));
  }
  [data-bs-theme="dark"] .table-scroll-hint::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05));
  }
}

/* --- 触控目标：窄屏控件统一 ≥44px --- */
@media (max-width: 767.98px) {
  .form-control,
  .form-select,
  .input-group-text,
  .btn:not(.btn-sm) {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 38px;
  }
  /* 输入组（输入框+按钮同行）窄屏纵向堆叠 */
  .input-group.mobile-stack {
    flex-direction: column;
  }
  .input-group.mobile-stack > .form-control,
  .input-group.mobile-stack > .btn {
    width: 100%;
    border-radius: var(--tblr-border-radius, 4px);
  }
  .input-group.mobile-stack > .form-control:not(:first-child) {
    border-top-left-radius: 0;
  }
  .btn-mobile-block {
    width: 100%;
  }
}

/* --- 仪表盘项目卡：统计数字窄屏 3 列等宽，不再挤压 --- */
@media (max-width: 575.98px) {
  .card-body .d-flex.mt-3.gap-3.text-center {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .25rem !important;
  }
  .card-body .d-flex.mt-3.gap-3.text-center .h2 {
    font-size: 1.25rem;
  }
}

/* --- 筛选面板：窄屏默认折叠（配合 Alpine x-data/collapse 用法） --- */
.filter-collapse-hint {
  display: none;
}
@media (max-width: 767.98px) {
  .filter-collapse-hint {
    display: inline-flex;
  }
}

/* --- 弱化管理页无意义的 hover 位移 --- */
.card:hover {
  transform: none;
}

/* --- Alpine：x-cloak（初始化前隐藏，防闪烁） --- */
[x-cloak] {
  display: none !important;
}

/* --- 响应式宽度工具（配合 w-100：窄屏全宽、sm/md 起恢复自适应） --- */
@media (min-width: 576px) {
  .w-sm-auto { width: auto !important; }
}
@media (min-width: 768px) {
  .w-md-auto { width: auto !important; }
}