/* Custom styles have been moved into the tailwind.config script in index.html.
  This file is for global styles that are not covered by Tailwind's utility classes.
*/

* {
    touch-action: manipulation;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Base font and color settings */
body {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #f8fafc;
    color: #172940;
    font-size: 16px; /* Prevents zoom on iOS */
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

#app {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Base heading styles */
h1, h2, h3 {
    font-family: 'Playfair Display', serif;
}

button, a.button {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
}

/* Icon-only action buttons (table rows): the 44px tap-target minimum above
   made three of them ~174px wide and overflow their grid track onto the
   neighbouring column. Keep them compact but still comfortably tappable. */
button.icon-action {
    min-height: 0;
    min-width: 0;
    padding: 8px 10px;
    line-height: 1;
}

button:active {
    transform: scale(0.98);
}

input, select, textarea {
    font-size: 16px; /* Prevents zoom */
}

.modal-content {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dashboard-specific styles */
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
}

.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------------------
   App ground. The same warm field as the landing hero, so the marketing page
   and the app read as one product.

   The photograph is far fainter here (10% against the hero's 36%) and pinned
   with position:fixed rather than background-attachment:fixed, which is slow
   and janky on iOS Safari. It has to sit ABOVE the body's own background and
   BELOW the content: a z-index:-1 pseudo-element paints behind its parent's
   background and disappears entirely.
   --------------------------------------------------------------------------- */
.app-ground {
    background-color: #FCFBF9;
    background-image:
        radial-gradient(ellipse 60% 50% at 10% 0%, rgba(99, 161, 242, .10), transparent 60%),
        linear-gradient(to bottom, transparent 60%, rgba(166, 138, 86, .06));
}

.app-ground::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('../img/mujamma-compound-background.jpg') center 60% / cover;
    filter: saturate(.4) contrast(.85) brightness(1.12) sepia(.25) blur(2px);
    opacity: .055;
    /* Eased across the width, same reasoning as the hero: a two-stop ramp
       leaves a kink at each end that reads as a vertical line. */
    -webkit-mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 0%, rgba(0,0,0,.02) 16%, rgba(0,0,0,.07) 30%,
        rgba(0,0,0,.16) 42%, rgba(0,0,0,.30) 54%, rgba(0,0,0,.48) 66%,
        rgba(0,0,0,.62) 78%, rgba(0,0,0,.74) 90%, rgba(0,0,0,.8) 100%);
    mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 0%, rgba(0,0,0,.02) 16%, rgba(0,0,0,.07) 30%,
        rgba(0,0,0,.16) 42%, rgba(0,0,0,.30) 54%, rgba(0,0,0,.48) 66%,
        rgba(0,0,0,.62) 78%, rgba(0,0,0,.74) 90%, rgba(0,0,0,.8) 100%);
}

/* Content above the photograph layer. */
.app-ground > * {
    position: relative;
    z-index: 1;
}