/* css/styles.css */

/* Ensure .hidden always wins over display utilities like .flex, .grid, etc. */
.hidden { display: none !important; }

/* ─── Responsive display overrides ──────────────────────────────────────────
   Because .hidden uses !important, Tailwind's responsive utilities like
   md:flex, lg:block, sm:table-cell, etc. cannot override it without !important.
   These rules restore expected responsive behavior for elements that combine
   .hidden with a responsive show class (e.g. class="hidden md:flex"). */
@media (min-width: 640px) {
    .sm\:block       { display: block       !important; }
    .sm\:flex        { display: flex        !important; }
    .sm\:inline      { display: inline      !important; }
    .sm\:inline-flex { display: inline-flex !important; }
    .sm\:table-cell  { display: table-cell  !important; }
    .sm\:grid        { display: grid        !important; }
    .sm\:hidden      { display: none        !important; }
}
@media (min-width: 768px) {
    .md\:block       { display: block       !important; }
    .md\:flex        { display: flex        !important; }
    .md\:inline      { display: inline      !important; }
    .md\:inline-flex { display: inline-flex !important; }
    .md\:table-cell  { display: table-cell  !important; }
    .md\:grid        { display: grid        !important; }
    .md\:hidden      { display: none        !important; }
}
@media (min-width: 1024px) {
    .lg\:block       { display: block       !important; }
    .lg\:flex        { display: flex        !important; }
    .lg\:inline      { display: inline      !important; }
    .lg\:inline-flex { display: inline-flex !important; }
    .lg\:table-cell  { display: table-cell  !important; }
    .lg\:grid        { display: grid        !important; }
    .lg\:hidden      { display: none        !important; }
}
@media (min-width: 1280px) {
    .xl\:block       { display: block       !important; }
    .xl\:flex        { display: flex        !important; }
    .xl\:inline      { display: inline      !important; }
    .xl\:inline-flex { display: inline-flex !important; }
    .xl\:grid        { display: grid        !important; }
    .xl\:hidden      { display: none        !important; }
}
/* ─────────────────────────────────────────────────────────────────────────── */

:root {
  --brand-deep:   #000033;
  --brand-navy:   #000066;
  --brand-purple: #333399;
  --brand-teal:   #269c91;
  --sidebar-w:    260px;
  --bottom-nav-h: 65px;
  --card-bg:      #ffffff;
}
.dark {
  --card-bg:      #12122a;
}

* { font-family: 'Montserrat', sans-serif; -webkit-tap-highlight-color: transparent; }

body {
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior-y: none;
}

h1 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.875rem; letter-spacing: -0.01em; line-height: 1.3; }
h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
p, td, input, select, textarea { font-size: 0.95rem; font-weight: 400; line-height: 1.5; }
label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7280; display: block; margin-bottom: 0.4rem;}
.dark label { color: rgba(255,255,255,0.6); }

/* Custom Scrollbar for Desktop */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(107, 114, 128, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(107, 114, 128, 0.5); }
.dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.dark .glass {
  background: rgba(18, 18, 42, 0.75);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Card Improvements */
.card {
  background: var(--card-bg);
  border-radius: 20px;
  border: 1px solid rgba(0,0,102,0.06);
  padding: 1.75rem;
  box-shadow: 0 4px 20px -2px rgba(0,0,51,0.05), 0 0 3px rgba(0,0,51,0.02);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.dark .card {
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.1);
}
@media (hover: hover) {
  .card-hoverable:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(51,51,153,0.15), 0 4px 8px -2px rgba(51,51,153,0.05);
  }
  .dark .card-hoverable:hover {
    box-shadow: 0 12px 24px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(129, 140, 248, 0.2);
  }
}

/* Buttons */
button {
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
.btn-primary, .btn-secondary, .btn-teal, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-primary:active, .btn-secondary:active, .btn-teal:active, .btn-danger:active { transform: scale(0.96); }

.btn-primary { background: var(--brand-purple); color: #fff; padding: 10px 24px; border-radius: 12px; font-weight: 600; font-size: 0.95rem; border: none; box-shadow: 0 4px 12px rgba(51,51,153,0.35); }
.btn-primary:hover { filter: brightness(0.88); box-shadow: 0 6px 16px rgba(51,51,153,0.45); transform: translateY(-1px); }

.btn-secondary { background: transparent; color: var(--brand-purple); border: 1.5px solid var(--brand-purple); padding: 9px 23px; border-radius: 12px; font-weight: 600; font-size: 0.95rem;}
.dark .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-secondary:hover { background: rgba(51,51,153,0.05); transform: translateY(-1px); }
.dark .btn-secondary:hover { background: rgba(255,255,255,0.08); }

.btn-teal { background: var(--brand-teal); color: #fff; padding: 10px 24px; border-radius: 12px; border: none; font-weight: 600; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(38,156,145,0.35); }
.btn-teal:hover { filter: brightness(0.88); box-shadow: 0 6px 16px rgba(38,156,145,0.45); transform: translateY(-1px); }

.btn-danger { background: #dc2626; color: #fff; padding: 10px 24px; border-radius: 12px; border: none; font-weight: 600; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(220,38,38,0.35);}
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(220,38,38,0.45); }

.btn-icon-only { min-height: 48px; min-width: 48px; padding: 12px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }

/* Form inputs & Touch Targets */
input, textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid #e5e7eb; background: #f9fafb;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: #111827;
  min-height: 52px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

/* Select — remove browser default arrow, use custom */
select {
  width: 100%; padding: 14px 40px 14px 16px; border-radius: 12px;
  border: 1.5px solid #e5e7eb; background: #f9fafb;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: #111827;
  min-height: 52px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}
.dark select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}
.dark input, .dark select, .dark textarea {
    background-color: #1e1e38; border-color: rgba(255,255,255,0.08); color: #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: #333399; background-color: #fff;
  box-shadow: 0 0 0 4px rgba(51,51,153,0.15);
}
.dark input:focus, .dark select:focus, .dark textarea:focus {
    border-color: #269c91; background-color: #252542;
    box-shadow: 0 0 0 4px rgba(38,156,145,0.2);
}

/* Checkboxes & Switches */
input[type="checkbox"], input[type="radio"] {
    width: 24px; height: 24px; min-height: 24px; accent-color: #333399; cursor: pointer;
    appearance: auto; -webkit-appearance: auto;
    background-image: none !important;
    padding: 0;
}

.dark input[type="checkbox"], .dark input[type="radio"] {
    accent-color: var(--brand-teal);
}

/* Custom select styles (legacy support - already handled above) */
.custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 2.5rem !important;
}
.dark .custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Tables -> Responsive scrolling */
.table-container { overflow-x: auto; border-radius: 16px; border: 1px solid #e5e7eb; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100vw; background: var(--card-bg); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.dark .table-container { border-color: rgba(255,255,255,0.06); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3); }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 600px; text-align: left; }
thead th { background: #f8fafc; color: #4b5563; padding: 16px 20px; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #e5e7eb; }
.dark thead th { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.6); border-bottom-color: rgba(255,255,255,0.1); }
tbody tr { transition: background 0.2s; }
tbody tr:nth-child(even) { background: #fdfdfd; }
.dark tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); }
tbody tr:active { background: rgba(38,156,145,0.1); }
@media (hover: hover) {
  tbody tr:hover { background: rgba(51,51,153,0.04); }
  .dark tbody tr:hover { background: rgba(255,255,255,0.04); }
}
tbody td { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.dark tbody td { border-bottom-color: rgba(255,255,255,0.04); }

/* Tabs */
.tab-bar { display: flex; gap: 0.5rem; border-bottom: 2px solid #e5e7eb; margin-bottom: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; padding-bottom: 0px;}
.tab-bar::-webkit-scrollbar { display: none; }
.dark .tab-bar { border-bottom-color: rgba(255,255,255,0.1); }
.tab {
    padding: 0.875rem 1rem; font-size: 0.95rem; color: #6b7280; font-weight: 600; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); min-height: 48px; display: flex; align-items: center; scroll-snap-align: start; margin-bottom: -2px; border-radius: 8px 8px 0 0;
}
.dark .tab { color: rgba(255,255,255,0.5); }
.tab:active { background: rgba(0,0,0,0.05); }
.dark .tab:active { background: rgba(255,255,255,0.05); }
@media (hover: hover) {
  .tab:hover:not(.active) { color: #111827; background: rgba(0,0,0,0.03); }
  .dark .tab:hover:not(.active) { color: #fff; background: rgba(255,255,255,0.03); }
}
.tab.active { border-bottom-color: var(--brand-purple); color: var(--brand-purple); }
.dark .tab.active { border-bottom-color: var(--brand-teal); color: var(--brand-teal); }

/* Badges */
.badge-admin     { background: rgba(51,51,153,0.1); color: #333399; border-radius: 999px; padding: 4px 12px; font-size: 0.75rem; font-weight: 700; border: 1px solid rgba(51,51,153,0.2); }
.dark .badge-admin { background: rgba(129,140,248,0.1); color: #818cf8; border-color: rgba(129,140,248,0.2);}
.badge-superadmin{ background: rgba(38,156,145,0.1); color: #269c91; border-radius: 999px; padding: 4px 12px; font-size: 0.75rem; font-weight: 700; border: 1px solid rgba(38,156,145,0.2); }
.dark .badge-superadmin { background: rgba(38,156,145,0.15); color: #5eead4; border-color: rgba(38,156,145,0.3); }
.badge-guest     { background: rgba(107,114,128,0.1); color: #4b5563; border-radius: 999px; padding: 4px 12px; font-size: 0.75rem; font-weight: 700; border: 1px solid rgba(107,114,128,0.2); }
.dark .badge-guest { background: rgba(255,255,255,0.05); color: #d1d5db; border-color: rgba(255,255,255,0.1);}

/* Navigation Items (Sidebar) */
.nav-item {
    display: flex; align-items: center; gap: 0.875rem; padding: 0.85rem 1.25rem; border-radius: 12px; color: rgba(255,255,255,0.7); font-weight: 600; font-size: 0.95rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: 0.35rem; min-height: 48px; border: 1px solid transparent;
}
.nav-item:active { transform: scale(0.97); }
@media (hover: hover) {
  .nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
}
.nav-item.active { background: var(--brand-purple); color: #fff; box-shadow: inset 4px 0 0 var(--brand-teal), 0 4px 12px rgba(51,51,153,0.4); border-color: rgba(255,255,255,0.1); }

/* Bottom Mobile Nav */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex; justify-content: space-around; align-items: stretch;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0,0,0,0.08);
    z-index: 50;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.04);
}
.dark .bottom-nav {
    background: rgba(18,18,42,0.92);
    border-top-color: rgba(255,255,255,0.08);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
.bottom-nav-item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #9ca3af; font-size: 0.65rem; font-weight: 700; gap: 4px;
    flex: 1; min-width: 0; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); text-decoration:none;
    padding: 0.25rem;
}
.dark .bottom-nav-item { color: #9ca3af; }
.bottom-nav-item:active { transform: scale(0.9); }
.bottom-nav-item.active { color: var(--brand-purple); transform: translateY(-2px); }
.dark .bottom-nav-item.active { color: var(--brand-teal); }
.bottom-nav-item::after {
    content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%) scaleX(0); width: 32px; height: 3px; background: var(--brand-purple); border-radius: 0 0 3px 3px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dark .bottom-nav-item::after { background: var(--brand-teal); }
.bottom-nav-item.active::after { transform: translateX(-50%) scaleX(1); }
.bottom-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; text-align: center; }
.bottom-nav-item svg { width: 24px; height: 24px; stroke-width: 2.2; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); flex-shrink: 0; }

/* Main Content Padding to unhide behind bottom nav */
@media (max-width: 767px) {
    .main-content-area { 
        padding-bottom: calc(var(--bottom-nav-h) + 40px + env(safe-area-inset-bottom)) !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Modals / Bottom Sheets */
.modal-overlay {
    background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}
.dark .modal-overlay { background: rgba(0,0,0,0.7); }
.modal-container {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
@media (max-width: 639px) {
    .modal-container {
        border-radius: 24px 24px 0 0 !important;
        margin: 0 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        width: 100% !important;
        max-width: 100% !important;
        position: absolute; bottom: 0; left: 0; right: 0;
        transform: translateY(100%);
    }
    .modal-drag-handle {
        width: 40px; height: 5px; background: #d1d5db; border-radius: 3px; margin: 8px auto 16px; display: block !important;
    }
    .dark .modal-drag-handle { background: rgba(255,255,255,0.2); }
}

/* Animations */
.animate-fade-in { animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.animate-slide-up { animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.animate-scale-in { animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* Skeleton Loading (Shimmer) */
.shimmer {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat; background-size: 800px 100%;
    animation: shimmerStart 2s infinite linear forwards;
}
.dark .shimmer {
    background: #1e1e38;
    background-image: linear-gradient(to right, #1e1e38 0%, #2a2a4a 20%, #1e1e38 40%, #1e1e38 100%);
}
@keyframes shimmerStart { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton { animation: shimmerStart 1.5s infinite linear; background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size: 200% 100%; border-radius: 8px; }
.dark .skeleton { background: linear-gradient(90deg,#1e1e38 25%,#2a2a4a 50%,#1e1e38 75%); background-size: 200% 100%; }

/* Pull to refresh */
.ptr-indicator { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: height 0.2s ease; opacity: 0; }
.ptr-indicator.active { height: 60px; opacity: 1; }

/* Currency image inline */
.currency-img { display: inline-block; height: 0.85em; width: auto; vertical-align: middle; }
.currency-img-white { display: inline-block; height: 0.85em; width: auto; vertical-align: middle; filter: invert(1); }

.dark .text-brand-purple,
.dark .text-brand-navy,
.dark .text-brand-deep {
    color: var(--brand-teal) !important;
}