/* ============================================================
   360eDash — Global styles
   Design tokens (dipakai lintas halaman, termasuk Battery
   Swapping Station di Project Overview) + reset dasar + atom
   UI yang dipakai ulang (button, pill, skeleton loading, toast).

   Catatan: layout shell (.edash-layout/.edash-main/.edash-content)
   TIDAK didefinisikan di sini karena sudah ada versi yang lebih
   lengkap (fixed header, hanya konten yang scroll) di dalam
   <style> inline pada index.html — supaya tidak dobel/konflik.
============================================================= */

:root{

    /* Brand */
    --primary:#0F6A71;
    --primary-dark:#0B4F54;
    --primary-header:#6DC3BB;
    --primary-soft:#E4F1F1;
    --accent:#FA891A;

    /* Status */
    --success:#2F9E6E;
    --success-soft:#E4F5EC;
    --warning:#E3A21A;
    --warning-soft:#FBF1DE;
    --danger:#D64545;
    --danger-soft:#FBE8E8;
    --info:#3E7CB1;
    --info-soft:#E7F0F8;

    /* Neutral & surface */
    --ink:#25343F;
    --muted:#7C8B8D;
    --border:#E7EDEE;
    --surface:#FFFFFF;

    /* Legacy tokens (dipakai index.html & halaman lain) */
    --page-bg:#F4F7F7;
    --text:#25343F;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

/* ---------- Responsive safety net ----------
   Applies everywhere without touching any page's own layout rules:
   stops stray wide content (images, embeds, long unbroken text) from
   ever forcing horizontal scroll/clipping on small screens. Page-
   specific rules (grids, tables, etc.) still control their own
   breakpoints as before. */
img, svg, video, canvas, iframe, embed, object{
    max-width:100%;
}
img, video{
    height:auto;
}
table{
    max-width:100%;
}


a{
    color:inherit;
}

:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
}

/* ---------- Shared atoms: buttons ---------- */

.btn{
    font-family:inherit;
    font-size:13.5px;
    font-weight:500;
    padding:10px 16px;
    border-radius:10px;
    border:1px solid transparent;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

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

.btn-secondary{
    background:var(--surface);
    color:var(--ink);
    border-color:var(--border);
}
.btn-secondary:hover:not(:disabled){
    background:var(--primary-soft);
    border-color:#D5EAEA;
    color:var(--primary-dark);
}

/* ---------- Shared atoms: pills / badges ---------- */

.pill{
    font-size:11.5px;
    font-weight:600;
    padding:5px 11px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
}
.pill-success{ background:var(--success-soft); color:var(--success); }
.pill-warning{ background:var(--warning-soft); color:var(--warning); }
.pill-danger{ background:var(--danger-soft); color:var(--danger); }
.pill-info{ background:var(--info-soft); color:var(--info); }

/* ---------- Shared atoms: skeleton loading ---------- */

.skeleton{
    position:relative;
    background:#EEF2F2;
    border-radius:8px;
    overflow:hidden;
    color:transparent !important;
}
.skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    animation:skeletonShine 1.3s infinite;
}
@keyframes skeletonShine{
    100%{ transform:translateX(100%); }
}

/* ---------- Shared atoms: toast (lihat showToast() di js/main.js) ---------- */

.edash-toast-host{
    position:fixed;
    bottom:22px;
    right:22px;
    z-index:200;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:calc(100vw - 32px);
}

.edash-toast{
    display:flex;
    align-items:center;
    gap:10px;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-left:3px solid var(--primary);
    border-radius:10px;
    padding:12px 16px;
    font-family:'Poppins', sans-serif;
    font-size:13px;
    font-weight:500;
    color:var(--ink);
    box-shadow:0 12px 28px rgba(11,79,84,.16);
    opacity:0;
    transform:translateY(8px);
    transition:opacity .2s ease, transform .2s ease;
}
.edash-toast.is-visible{
    opacity:1;
    transform:translateY(0);
}
.edash-toast i{ font-size:15px; }

.edash-toast-success{ border-left-color:var(--success); }
.edash-toast-success i{ color:var(--success); }
.edash-toast-info{ border-left-color:var(--info); }
.edash-toast-info i{ color:var(--info); }
.edash-toast-warning{ border-left-color:var(--warning); }
.edash-toast-warning i{ color:var(--warning); }
.edash-toast-danger{ border-left-color:var(--danger); }
.edash-toast-danger i{ color:var(--danger); }