/* ==========================================================
   MAYATAMA MAIL THEME
   Version : 1.0
   Stage   : 1
   ========================================================== */



/* ==========================================================
   COLOR VARIABLES
   ========================================================== */

:root{

    --primary:#0EA5E9; /* Diubah ke Biru Muda */
    --primary-hover:#0284C7; /* Diubah ke Biru Muda yang lebih gelap untuk hover */

    --secondary:#F0F9FF; /* Diubah ke tint biru muda yang sangat soft */

    --surface:#FFFFFF;

    --surface-2:#F8FAFC;

    --background:#EEF2F8;

    --border:#E5E7EB;

    --text:#1F2937;

    --text-light:#6B7280;

    --danger:#DC2626;

    --success:#16A34A;

    --warning:#F59E0B;

    --radius:14px;

    --radius-lg:18px;

    --radius-xl:24px;

    --shadow-sm:
        0 2px 8px rgba(15,23,42,.05);

    --shadow-md:
        0 8px 24px rgba(15,23,42,.08);

    --shadow-lg:
        0 18px 45px rgba(15,23,42,.12);

    --transition:.25s ease;
}



/* ==========================================================
   DARK MODE
   ========================================================== */

html.dark-mode{

    --surface:#1D2635;

    --surface-2:#263246;

    --background:#111827;

    --border:#344155;

    --text:#F8FAFC;

    --text-light:#CBD5E1;

    --secondary:#1E293B; /* Disesuaikan untuk dark mode */
}



/* ==========================================================
   GLOBAL
   ========================================================== */

html{

    scroll-behavior:smooth;
}

body{

    margin:0;

    padding:0;

    background:var(--background);

    color:var(--text);

    font-family:

        Inter,

        "Segoe UI",

        Roboto,

        Helvetica,

        Arial,

        sans-serif;

    font-size:14px;

    line-height:1.5;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;
}



*{

    box-sizing:border-box;
}



/* ==========================================================
   LINKS
   ========================================================== */

a{

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);
}

a:hover{

    color:var(--primary-hover);
}



/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar{

    width:9px;

    height:9px;
}

::-webkit-scrollbar-track{

    background:transparent;
}

::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:30px;
}

::-webkit-scrollbar-thumb:hover{

    background:#94A3B8;
}



/* ==========================================================
   LOGIN PAGE
   ========================================================== */

body.task-login{

    background:
        /* Gradient diubah dari ungu ke soft blue */
        radial-gradient(circle at top left,#E0F2FE,transparent 40%),

        radial-gradient(circle at bottom right,#BAE6FD,transparent 35%),

        var(--background);

}



/* Login Card */

body.task-login #layout-content,

body.task-login .box,

body.task-login .contentbox{

    background:var(--surface);

    border:none;

    border-radius:22px;

    box-shadow:var(--shadow-lg);

}



/* Logo */

body.task-login img{

    transition:all .35s ease;
}

body.task-login img:hover{

    transform:scale(1.05);
}



/* ==========================================================
   INPUT
   ========================================================== */

input,

textarea,

select{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:14px;

    color:var(--text);

    transition:all .25s ease;
}



input:focus,

textarea:focus,

select:focus{

    border-color:var(--primary);

    outline:none;

    box-shadow:

        0 0 0 4px

        rgba(14,165,233,.15); /* Diubah ke warna bayangan fokus biru muda */
}



/* Placeholder */

::placeholder{

    color:#9CA3AF;
}



/* ==========================================================
   BUTTON
   ========================================================== */

button,

input[type=submit],

.btn{

    border:none;

    border-radius:14px;

    cursor:pointer;

    transition:all .25s ease;

    font-weight:600;
}



button:hover,

input[type=submit]:hover,

.btn:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);
}



.btn-primary,

input.button.mainaction,

button.mainaction{

    background:

        linear-gradient(

        135deg,

        #0EA5E9, /* Gradient tombol biru muda */

        #38BDF8);

    color:white;
}



.btn-primary:hover,

input.button.mainaction:hover,

button.mainaction:hover{

    background:

        linear-gradient(

        135deg,

        #0284C7, /* Gradient hover tombol */

        #0EA5E9);
}



/* ==========================================================
   CARD
   ========================================================== */

.card,

.box,

.contentbox,

.frame{

    border-radius:18px;

    background:var(--surface);

    border:none;

    box-shadow:var(--shadow-md);
}



/* ==========================================================
   SELECTION
   ========================================================== */

::selection{

    background:#0EA5E9; /* Warna highlight seleksi teks diubah ke biru */

    color:white;
}



/* ==========================================================
   TRANSITION
   ========================================================== */

*{

    transition:

        background-color .20s,

        border-color .20s,

        color .20s,

        box-shadow .20s;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    border-radius:0 !important;
    overflow:hidden;
}

#layout{
    width:100%;
    height:100vh;
    min-height:100vh;
    margin:0;
    padding:0;
    border-radius:0 !important;
    background:var(--background);
}
/* ==========================================================
   MAYATAMA COMPOSE
   ========================================================== */

.ts-wrapper,
.ts-control,
.ts-control input,
.tokenfield,
.tokenfield input,
.form-control,
textarea,
input{

    border-radius:3px !important;

}

.ts-control{

    box-shadow:none !important;

}

.ts-wrapper.focus .ts-control{

    border-color:#0EA5E9 !important;

    box-shadow:0 0 0 2px rgba(14,165,233,.18)!important;

}
body.task-login{
    margin:0;
    padding:0;
    border-radius:0 !important;
}

body.task-login #layout,
body.task-login #layout-content{
    border-radius:0 !important;
}