/* ============================================================
   Smart Aquarium Admin — Global Stylesheet
   ============================================================ */

/* ── Google Fonts (fallback jika offline) ── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ── CSS Custom Properties ── */
:root {
    --color-primary:        #0058be;
    --color-primary-dark:   #003d8f;
    --color-secondary:      #855300;
    --color-tertiary:       #006947;
    --color-error:          #ba1a1a;
    --color-surface:        #f8f9fa;
    --color-surface-low:    #f3f4f5;
    --color-outline:        #727785;
    --font-body:            'Inter', sans-serif;
    --font-heading:         'Manrope', sans-serif;
    --radius-card:          1rem;
    --radius-btn:           0.75rem;
    --shadow-card:          0 2px 8px rgba(0,0,0,0.07);
    --shadow-btn:           0 4px 12px rgba(0,88,190,0.25);
    --transition-fast:      0.15s ease;
    --transition-normal:    0.3s ease;
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--color-surface);
    color: #191c1d;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Material Symbols ── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

/* ============================================================
   GRADIENTS
   ============================================================ */
.bg-liquid-primary  { background: linear-gradient(135deg, #0058be 0%, #2170e4 100%); }
.bg-liquid-secondary{ background: linear-gradient(135deg, #855300 0%, #fea619 100%); }
.bg-liquid-tertiary { background: linear-gradient(135deg, #006947 0%, #00a36a 100%); }
.bg-liquid-error    { background: linear-gradient(135deg, #ba1a1a 0%, #e53935 100%); }

/* ============================================================
   WATER LEVEL ANIMATIONS
   ============================================================ */
.water-fill-bar {
    transition: height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes waveSvg {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.wave-svg-anim {
    animation: waveSvg 3s linear infinite;
    width: 200%;
}

@keyframes waterPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.75; }
}
.water-pulse { animation: waterPulse 2s ease-in-out infinite; }

/* ============================================================
   PULSE / GLOW STATUS INDICATORS
   ============================================================ */
@keyframes statusPulse {
    0%   { box-shadow: 0 0 0 0   rgba(0,105,71,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(0,105,71,0); }
    100% { box-shadow: 0 0 0 0   rgba(0,105,71,0); }
}
.pulse-green  { animation: statusPulse 2s infinite; }

@keyframes statusPulseBlue {
    0%   { box-shadow: 0 0 0 0   rgba(0,88,190,0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(0,88,190,0); }
    100% { box-shadow: 0 0 0 0   rgba(0,88,190,0); }
}
.pulse-blue   { animation: statusPulseBlue 2s infinite; }

@keyframes statusPulseRed {
    0%   { box-shadow: 0 0 0 0   rgba(186,26,26,0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(186,26,26,0); }
    100% { box-shadow: 0 0 0 0   rgba(186,26,26,0); }
}
.pulse-red    { animation: statusPulseRed 2s infinite; }

/* ============================================================
   PUMP / SERVO ANIMATIONS
   ============================================================ */
@keyframes pumpActive {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.04); opacity: 0.85; }
}
.pump-active { animation: pumpActive 1s ease-in-out infinite; }

@keyframes servoRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.servo-spin { animation: servoRotate 0.6s linear infinite; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: #ffffff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.10); }

.card-iot {
    background: #ffffff;
    border-radius: var(--radius-card);
    padding: 1.25rem;
    border: 1.5px solid transparent;
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.card-iot:hover        { border-color: rgba(194,198,214,0.4); }
.card-iot.active-fill  { border-color: #0058be40; box-shadow: 0 0 0 3px #0058be18; }
.card-iot.active-drain { border-color: #ba1a1a40; box-shadow: 0 0 0 3px #ba1a1a18; }
.card-iot.active-servo { border-color: #85530040; box-shadow: 0 0 0 3px #85530018; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-btn);
    font-weight: 700;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    font-family: var(--font-body);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

.btn-primary   { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); }

.btn-secondary { background: linear-gradient(135deg,#855300,#fea619); color: #fff; }
.btn-secondary:hover:not(:disabled) { filter: brightness(0.92); }

.btn-danger    { background: var(--color-error); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #93000a; }

.btn-outline   { background: transparent; color: #424754; border: 1.5px solid #c2c6d6; }
.btn-outline:hover:not(:disabled) { background: #f3f4f5; }

.btn-ghost     { background: transparent; color: var(--color-primary); }
.btn-ghost:hover:not(:disabled) { background: #0058be0d; }

.btn-lg { padding: 1rem 2rem; font-size: 1rem; border-radius: 1rem; }
.btn-sm { padding: 0.4rem 0.875rem; font-size: 0.75rem; border-radius: 0.5rem; }

/* ── Spinning loader inside button ── */
.btn-loading::after {
    content: '';
    display: inline-block;
    width: 1em; height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spinBtn 0.7s linear infinite;
    margin-left: 0.5rem;
}
@keyframes spinBtn { to { transform: rotate(360deg); } }

/* ============================================================
   TOGGLE SWITCH (Relay)
   ============================================================ */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px; height: 28px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
    position: absolute; inset: 0;
    background: #c2c6d6;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-normal);
}
.toggle-track::before {
    content: '';
    position: absolute;
    height: 20px; width: 20px;
    left: 4px; bottom: 4px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--transition-normal);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.toggle-switch input:checked + .toggle-track { background: var(--color-primary); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(24px); }

/* ── Relay ON glow ── */
.relay-on { box-shadow: 0 0 0 3px rgba(0,88,190,0.25); }

/* ============================================================
   CHART BAR
   ============================================================ */
.chart-bar { transition: height 0.5s cubic-bezier(0.4,0,0.2,1); }

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */
#toast-container {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-radius: 0.875rem;
    background: #1e2328;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 260px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    pointer-events: all;
    animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
.toast.success { background: #006947; }
.toast.error   { background: #ba1a1a; }
.toast.warning { background: #855300; }
@keyframes toastIn {
    from { opacity:0; transform: translateY(20px) scale(0.95); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
    to { opacity:0; transform: translateY(10px) scale(0.95); }
}
.toast.hide { animation: toastOut 0.25s ease forwards; }

/* ============================================================
   MODAL OVERLAY
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    width: 90%; max-width: 480px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.2);
    transform: translateY(16px) scale(0.97);
    transition: transform var(--transition-normal);
}
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); }

/* ============================================================
   FORM INPUTS (global override)
   ============================================================ */
.form-control {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 1.5px solid #e1e3e4;
    background: #f3f4f5;
    font-size: 0.9375rem;
    color: #191c1d;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.form-control:focus {
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,88,190,0.12);
}
.form-control.error {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(186,26,26,0.1);
}
.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #727785;
    margin-bottom: 0.4rem;
}
.form-error {
    font-size: 0.75rem;
    color: var(--color-error);
    margin-top: 0.25rem;
    display: flex; align-items: center; gap: 0.25rem;
}

/* ============================================================
   SCROLL BAR (Webkit)
   ============================================================ */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #c2c6d6; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover  { background: #9aa0b2; }

/* ============================================================
   LOGIN / REGISTER PAGE
   ============================================================ */
.auth-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, #001a42 0%, #0058be 40%, #2170e4 70%, #00855b 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}
.auth-bg::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0,88,190,0.3) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(0,133,91,0.25) 0%, transparent 50%);
    pointer-events: none;
}
/* Floating bubbles */
.auth-bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    animation: floatBubble linear infinite;
    pointer-events: none;
}
@keyframes floatBubble {
    0%   { transform: translateY(0) scale(1);   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(-100vh) scale(1.2); opacity: 0; }
}

.auth-card {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(20px);
    border-radius: 1.75rem;
    padding: 2.5rem;
    width: 100%; max-width: 440px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.15),
        0 24px 64px rgba(0,0,0,0.35);
    position: relative; z-index: 1;
    animation: cardAppear 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes cardAppear {
    from { opacity:0; transform: translateY(30px) scale(0.96); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

.auth-logo {
    width: 3.5rem; height: 3.5rem;
    background: linear-gradient(135deg, #0058be, #2170e4);
    border-radius: 1rem;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(0,88,190,0.4);
}

/* ============================================================
   SIDEBAR NAV ACTIVE INDICATOR
   ============================================================ */
.nav-active {
    background: #fff;
    color: #0058be !important;
    font-weight: 600;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0,88,190,0.1);
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-gradient-primary {
    background: linear-gradient(90deg, #0058be, #2170e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.glass {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.4);
}
.badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.badge-primary   { background: rgba(0,88,190,0.12);  color: #0058be; }
.badge-success   { background: rgba(0,105,71,0.12);  color: #006947; }
.badge-warning   { background: rgba(133,83,0,0.12);  color: #855300; }
.badge-error     { background: rgba(186,26,26,0.12); color: #ba1a1a; }
.badge-neutral   { background: rgba(194,198,214,0.4);color: #424754; }

/* ── Page transition ── */
@keyframes pageIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
main { animation: pageIn 0.35s ease both; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .auth-card { padding: 1.75rem 1.5rem; border-radius: 1.25rem; }
    .card-iot  { padding: 1rem; }
}