/*
 * ag-time — system-wide UX polish
 *
 * Subtle, non-intrusive enhancements applied across the back and control
 * panels. Designed to layer on top of existing styles without breaking the
 * established layout, RTL behaviour, or any datatables / select2 widgets.
 *
 * Conventions:
 *   - CSS logical properties only (margin-inline-*, padding-inline-*) per
 *     the project RTL guidelines.
 *   - All animations respect prefers-reduced-motion.
 */

/* ---- Page-level fade-in for content under the admin layout ---- */
.dynamics-container,
.container-fluid > .row > [class^="col-"] {
  animation: ux-fade-in 0.35s ease-out both;
}
@keyframes ux-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Cards: gentle hover lift + smoother corner radius ---- */
.card {
  border-radius: 12px;
  border: 1px solid #eef2f7;
  box-shadow: 0 2px 8px rgba(15, 30, 60, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
  box-shadow: 0 6px 18px rgba(15, 30, 60, 0.08);
}
.card .card-header {
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #fbfdff, #f5f8fc);
  border-bottom: 1px solid #eef2f7;
}

/* ---- Buttons: consistent radius, subtle press feedback ---- */
.btn {
  border-radius: 8px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-secondary {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-primary:hover { box-shadow: 0 4px 10px rgba(33, 150, 243, 0.25); }
.btn-success:hover { box-shadow: 0 4px 10px rgba(67, 160, 71, 0.25); }
.btn-danger:hover  { box-shadow: 0 4px 10px rgba(229, 57, 53, 0.25); }
.btn-warning:hover { box-shadow: 0 4px 10px rgba(251, 140, 0, 0.25); }
.btn-info:hover    { box-shadow: 0 4px 10px rgba(3, 155, 229, 0.25); }
.btn-sm { border-radius: 6px; }

/* ---- Form controls: clearer focus state ---- */
.form-control,
.form-select {
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: #2196f3;
  box-shadow: 0 0 0 0.15rem rgba(33, 150, 243, 0.15);
}

/* ---- Tables: lighter borders, hover highlight ---- */
.table {
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th {
  background: #f5f8fc;
  border-bottom: 1px solid #e3e8ef;
  font-weight: 600;
  color: #234;
  vertical-align: middle;
}
.table tbody tr {
  transition: background-color 0.12s ease;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #fbfdff;
}
.table tbody tr:hover {
  background-color: #f5faff;
}
.table.table-bordered td,
.table.table-bordered th {
  border-color: #eef2f7;
}

/* ---- Badges: tighter typographic rhythm ---- */
.badge {
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 4px 8px;
  border-radius: 6px;
}

/* ---- Alerts: softer surface ---- */
.alert {
  border-radius: 10px;
  border: 1px solid transparent;
}
.alert-success { background-color: #ecfdf5; border-color: #d1fae5; color: #065f46; }
.alert-danger  { background-color: #fef2f2; border-color: #fee2e2; color: #991b1b; }
.alert-warning { background-color: #fffbeb; border-color: #fef3c7; color: #92400e; }
.alert-info    { background-color: #eff6ff; border-color: #dbeafe; color: #1e40af; }

/* ---- Modals: rounded shell + smoother open ---- */
.modal-content {
  border-radius: 14px;
  border: none;
  box-shadow: 0 20px 50px rgba(15, 30, 60, 0.2);
}
.modal-header {
  border-bottom: 1px solid #eef2f7;
  border-radius: 14px 14px 0 0;
}
.modal-footer {
  border-top: 1px solid #eef2f7;
  border-radius: 0 0 14px 14px;
}

/* ---- Side navigation polish ---- */
.main-nav li > a {
  transition: background 0.15s ease, color 0.15s ease, padding 0.15s ease;
  border-radius: 8px;
}
.main-nav li > a:hover {
  background: rgba(33, 150, 243, 0.08);
}
.main-nav li[active] > a {
  background: rgba(33, 150, 243, 0.12);
  color: #1976d2;
}
.main-nav .red_notic {
  animation: ux-pulse 1.8s ease-in-out infinite;
}
@keyframes ux-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* ---- Datatable wrapper polish (does not fight datatables.css) ---- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 6px;
  border: 1px solid #d8e0ea;
  padding: 5px 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  transition: background 0.12s ease;
}

/* ---- Floating "scroll to top" affordance ---- */
.ux-scroll-top {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #1976d2, #0d47a1);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 18px rgba(13, 71, 161, 0.3);
  z-index: 1040;
  border: none;
}
.ux-scroll-top:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(13, 71, 161, 0.35); }
.ux-scroll-top.is-visible { opacity: 1; pointer-events: auto; }

/* ---- Flash messages slide-in ---- */
.alert {
  animation: ux-slide-down 0.3s ease-out both;
}
@keyframes ux-slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Page transition shimmer for slow links ---- */
body.ux-page-transition::before {
  content: "";
  position: fixed;
  inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #1976d2, transparent);
  background-size: 200% 100%;
  animation: ux-shimmer 1s linear infinite;
  z-index: 9999;
}
@keyframes ux-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---- Honor reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}