/* ==========================================================================
   Global Page Zoom/Scale
   ========================================================================== */
html {
    zoom: 0.8;
    -moz-transform: scale(0.8);
    -moz-transform-origin: 0 0;
}

/* ==========================================================================
   Global Form Input Styles
   ========================================================================== */

/* Base form input styles with teal-800 focus */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="file"],
select,
textarea {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Focus state - Teal-800 border, thicker (2px) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: #115e59 !important; /* teal-800 */
    border-width: 3px !important;
    box-shadow: none !important;
    --tw-ring-shadow: none !important;
    --tw-ring-offset-shadow: none !important;
}

/* Disabled state */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Read-only state */
input[readonly],
textarea[readonly] {
    background-color: #f9fafb;
}

/* ==========================================================================
   Change-column trend animation (used by the Reporting indicator table)
   ========================================================================== */
@keyframes contentTrendUp {
    0%, 100% { transform: translateY(2px);  opacity: 0.6; }
    50%      { transform: translateY(-3px); opacity: 1; }
}
@keyframes contentTrendDown {
    0%, 100% { transform: translateY(-2px); opacity: 0.6; }
    50%      { transform: translateY(3px);  opacity: 1; }
}
.trend-up-anim   { display: inline-block; animation: contentTrendUp 1.5s ease-in-out infinite; }
.trend-down-anim { display: inline-block; animation: contentTrendDown 1.5s ease-in-out infinite; }