/* mobile-app.css */
:root {
    --primary-color: #4f46e5;
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --secondary-color: #10b981;
    --secondary-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --accent-color: #f43f5e;
    --background: #f8fafc;
    --surface-color: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.85);
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-color: rgba(226, 232, 240, 0.8);
    --radius-xl: 24px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --shadow-premium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.05);
    --nav-height: 82px;
    --header-height: 60px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #0f172a;
        --surface-color: #1e293b;
        --card-bg: rgba(30, 41, 59, 0.9);
        --text-primary: #f8fafc;
        --text-secondary: #94a3b8;
        --border-color: rgba(51, 65, 85, 0.6);
        --input-bg-alt: #1e293b;
    }
}

[data-theme="dark"] {
    --background: #0f172a;
    --surface-color: #1e293b;
    --card-bg: rgba(30, 41, 59, 0.9);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --border-color: rgba(51, 65, 85, 0.6);
    --input-bg-alt: #1e293b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    padding-bottom: calc(var(--nav-height) + 20px);
    padding-top: var(--header-height);
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: var(--background);
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
    line-height: 1.6;
}

/* Glassmorphism Header */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--card-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 10px;
    z-index: 2000;
}

.app-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: auto;
    max-width: 65%;
    z-index: 1;
}

.app-logo img {
    height: auto;
    max-height: calc(var(--header-height) - 8px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.menu-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    z-index: 2;
    position: relative;
    transition: background 0.2s ease;
}

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 2;
    position: relative;
}

.menu-toggle:active {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

/* Premium Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    background: var(--card-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 2000;
    border-radius: 20px 20px 0 0;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    height: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
}

.nav-item.active {
    color: var(--primary-color);
}

.nav-item.active i {
    transform: translateY(-5px);
    filter: drop-shadow(0 4px 6px rgba(79, 70, 229, 0.3));
}

/* Premium Cards */
.card-premium {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    padding: 24px;
    margin: 16px;
    box-shadow: var(--shadow-premium);
}

.btn-premium {
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: 16px 24px;
    font-weight: 700;
    font-size: 16px;
    width: 100%;
    box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.39);
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-premium:active {
    transform: scale(0.97);
}

/* Animations */
.fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Premium Notifications */
.notification-premium {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    padding: 16px;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-premium);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Fix for existing notification containers in print.html / track.html */
.notification-container,
#notificationContainer,
.modal-overlay,
#menuOverlay,
.side-menu,
#sideMenu {
    z-index: 10000 !important;
}

.notification-container,
#notificationContainer {
    top: 20px !important;
    bottom: auto !important;
    right: 20px !important;
    left: 20px !important;
    max-width: none !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 768px) {

    .notification-container,
    #notificationContainer {
        left: auto !important;
        right: calc(50% - 220px) !important;
        width: 350px !important;
    }
}

.notification-premium.success {
    border-left: 4px solid var(--secondary-color);
}

.notification-premium.error {
    border-left: 4px solid var(--accent-color);
}

/* Section styling */
.app-section {
    display: none;
}

.app-section.active {
    display: block;
}

/* Premium Form Styles */
.input-premium {
    background: #fff;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    color: var(--text-primary);
    width: 100%;
    font-size: 16px;
    transition: all 0.2s ease;
}

.input-premium:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

/* Hide desktop specific things on mobile */
@media (max-width: 768px) {

    .logo-container {
        display: none !important;
    }
}

/* Responsive constraints for desktop */
@media (min-width: 768px) {
    body {
        /* max-width: 480px; */
        /* margin: 0 auto; */
        border-left: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
        min-height: 100vh;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    }
}

/* Custom Premium Book Bag Loader Animations */
@keyframes bookDrop {
    0% {
        transform: translateY(-40px) scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(20px) scale(0.9);
        opacity: 0;
    }
}

/* ==========================================
   PREMIUM ANIMATED PRINT BUTTON STYLE
   ========================================== */
@keyframes printerVibrate {
  0% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-0.8px) rotate(-0.5deg); }
  50% { transform: translateY(0.8px) rotate(0.5deg); }
  75% { transform: translateY(-0.4px) rotate(0.2deg); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes paperFeed {
  0% { transform: translateY(0); }
  50% { transform: translateY(1.5px); }
  100% { transform: translateY(0); }
}

@keyframes spinBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.print-it-btn-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 100;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: -4px; /* Pulls it close to the card's border */
  margin-left: 6px;
  flex-shrink: 0;
  width: 36px;
}

.print-it-btn-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  z-index: 1;
}

/* Rotating conic-gradient premium border */
.print-it-btn-circle::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    #6366f1, #a855f7, #ec4899, #3b82f6, #06b6d4, #10b981, #6366f1
  );
  animation: spinBorder 4s linear infinite;
  z-index: -2;
}

/* Inner white circle for contrast */
.print-it-btn-circle::after {
  content: '';
  position: absolute;
  inset: 1.5px; /* Border thickness of 1.5px */
  background: #ffffff !important;
  border-radius: 50%;
  z-index: -1;
  border: 0.8px solid rgba(30, 41, 59, 0.08);
  transition: all 0.25s ease;
}

.print-it-btn-label {
  font-size: 7.5px;
  font-weight: 800;
  color: #1d4ed8; /* Royal blue */
  margin-top: 3px;
  text-transform: none; /* Keep Title Case "Print It" */
  letter-spacing: 0.1px;
  transition: all 0.25s ease;
  line-height: 1;
}

/* Dark Mode adaptation support */
[data-theme="dark"] .print-it-btn-circle::after {
  background: #ffffff !important; /* Keep white for superb contrast */
}

[data-theme="dark"] .print-it-btn-label {
  color: #38bdf8; /* Soft cyan-blue in dark mode */
}

/* Hover & Active States */
.print-it-btn-container:hover .print-it-btn-circle {
  transform: translateY(-1.5px) scale(1.08);
  box-shadow: 0 6px 12px rgba(99, 102, 241, 0.25), 0 3px 6px rgba(0, 0, 0, 0.12); /* Indigo colorful glow shadow */
}

[data-theme="dark"] .print-it-btn-container:hover .print-it-btn-circle {
  box-shadow: 0 6px 14px rgba(56, 189, 248, 0.35), 0 3px 6px rgba(0, 0, 0, 0.3); /* Cyan colorful glow shadow in dark theme */
}

.print-it-btn-container:hover .print-it-btn-circle::before {
  animation: spinBorder 1.5s linear infinite; /* Spin faster on hover! */
}

.print-it-btn-container:hover .print-it-svg {
  animation: printerVibrate 0.35s infinite linear;
}

.print-it-btn-container:hover .print-paper-bottom {
  animation: paperFeed 0.7s infinite ease-in-out;
}

.print-it-btn-container:hover .print-it-btn-label {
  color: #2563eb;
  transform: scale(1.03);
}

[data-theme="dark"] .print-it-btn-container:hover .print-it-btn-label {
  color: #38bdf8;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
  transform: scale(1.03);
}

.print-it-btn-container:active {
  transform: scale(0.92);
}

/* ==========================================
   PREMIUM ANIMATED PREVIEW BUTTON STYLE
   ========================================== */
.preview-btn-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 100;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 4px;
  margin-left: 6px;
  flex-shrink: 0;
  width: 36px;
}

.preview-btn-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  z-index: 1;
}

/* Rotating conic-gradient premium violet/pink border for Preview */
.preview-btn-circle::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    #a855f7, #ec4899, #f43f5e, #c084fc, #a855f7
  );
  animation: spinBorder 4s linear infinite;
  z-index: -2;
}

/* Inner white circle for contrast */
.preview-btn-circle::after {
  content: '';
  position: absolute;
  inset: 1.5px; /* Border thickness of 1.5px */
  background: #ffffff !important;
  border-radius: 50%;
  z-index: -1;
  border: 0.8px solid rgba(30, 41, 59, 0.08);
  transition: all 0.25s ease;
}

.preview-btn-label {
  font-size: 7.5px;
  font-weight: 800;
  color: #7e22ce; /* Purple */
  margin-top: 3px;
  text-transform: none; /* Keep Title Case "Preview" */
  letter-spacing: 0.1px;
  transition: all 0.25s ease;
  line-height: 1;
}

/* Dark Mode adaptation support */
[data-theme="dark"] .preview-btn-circle::after {
  background: #ffffff !important; /* Keep white for superb contrast */
}

[data-theme="dark"] .preview-btn-label {
  color: #c084fc; /* Soft purple-pink in dark mode */
}

/* Hover & Active States */
.preview-btn-container:hover .preview-btn-circle {
  transform: translateY(-1.5px) scale(1.08);
  box-shadow: 0 6px 12px rgba(168, 85, 247, 0.25), 0 3px 6px rgba(0, 0, 0, 0.12); /* Purple colored glow shadow */
}

[data-theme="dark"] .preview-btn-container:hover .preview-btn-circle {
  box-shadow: 0 6px 14px rgba(192, 132, 252, 0.35), 0 3px 6px rgba(0, 0, 0, 0.3); /* Purple colored glow shadow in dark theme */
}

.preview-btn-container:hover .preview-btn-circle::before {
  animation: spinBorder 1.5s linear infinite; /* Spin faster on hover! */
}

.preview-btn-container:hover .preview-svg {
  transform: scale(1.08);
}

.preview-btn-container:hover .preview-eye-iris {
  transform: scale(1.15);
  fill: #ec4899; /* Change iris to hot pink on hover! */
}

.preview-btn-container:hover .preview-btn-label {
  color: #a855f7;
  transform: scale(1.03);
}

[data-theme="dark"] .preview-btn-container:hover .preview-btn-label {
  color: #c084fc;
  text-shadow: 0 0 6px rgba(192, 132, 252, 0.4);
  transform: scale(1.03);
}

.preview-btn-container:active {
  transform: scale(0.92);
}