/* ==========================
   RILCAM HOME V2 LIST DESIGN
========================== */

:root {
    --main:#00897b;
    --dark:#00695c;
    --light:#e0f2f1;
}


/* BODY */

body {
    background:
    linear-gradient(
        135deg,
        #eefaf8,
        #d8efec
    );
}


/* MAIN CONTAINER */

.container {

    background:white;

    border-radius:20px;

    padding:15px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.15);

}


/* HEADER */

.header-row {

    background:
    linear-gradient(
    135deg,
    var(--dark),
    var(--main)
    );

    border-radius:16px;

    padding:15px;

    box-shadow:
    0 5px 15px rgba(0,0,0,.2);

}


/* BUTTONS */

.button,
button {

    background:
    linear-gradient(
    135deg,
    #00897b,
    #00695c
    );

    color:white!important;

    border-radius:12px!important;

    padding:9px 15px;

}


/* FILTER BLOCK */

.top-controls {

    background:#ffffff;

    border-radius:16px;

    padding:15px;

    box-shadow:
    0 5px 15px rgba(0,0,0,.08);

}


/* INPUTS */

input,
select {

    border-radius:12px!important;

    border:1px solid #ccc;

    padding:9px;

}


/* TABLE */

.table-wrapper {

    border-radius:15px;

    overflow:auto;

}


table {

    border-radius:15px;

    overflow:hidden;

}


thead th {

    background:
    linear-gradient(
    135deg,
    #00897b,
    #4db6ac
    )!important;

    color:white;

}


/* ROW HOVER */

tbody tr:hover {

    background:#e0f2f1!important;

}


/* ACTION BUTTONS */

.actions-bar button:nth-child(1){
    background:#42a5f5!important;
}

.actions-bar button:nth-child(2){
    background:#ef5350!important;
}

.actions-bar button:nth-child(3){
    background:#ab47bc!important;
}

.actions-bar button:nth-child(4){
    background:#26a69a!important;
}

.actions-bar button:nth-child(5){
    background:#ffa726!important;
}

.actions-bar button:nth-child(6){
    background:#66bb6a!important;
}

/* ==========================
   RILCAM HOME V2 THEME
========================== */


:root {

    --main: #00897b;
    --main-dark: #00695c;
    --light: #e0f2f1;

    --card: #ffffff;

    --text: #333;

    --shadow:
    0 8px 25px rgba(0,0,0,.15);

}



/* ==========================
   RESET
========================== */


* {

    box-sizing:border-box;

}



html,
body {

    margin:0;

    padding:0;

    width:100%;

    min-height:100%;

    font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

    color:var(--text);

}



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


.login-page {

    width:100%;

    height:100vh;


    display:flex;

    align-items:center;

    justify-content:center;


    background-image:

    url('../bg.jpg');


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}



/* LOGIN CARD */


.login-box {


    width:380px;


    padding:40px;


    background:
    rgba(255,255,255,.96);


    border-radius:22px;


    box-shadow:
    0 15px 40px rgba(0,0,0,.30);


    text-align:center;


}



/* LOGO */


.login-box img {


    width:120px;


    margin-bottom:20px;


}



/* TITLE */


.login-box h2 {


    margin:0 0 25px;


    color:var(--main-dark);


    font-size:26px;


}



/* INPUTS */


.login-box input {


    width:100%;


    padding:14px;


    margin:8px 0;


    border:

    1px solid #ccc;


    border-radius:12px;


    font-size:16px;


    outline:none;


}



.login-box input:focus {


    border-color:var(--main);


    box-shadow:

    0 0 8px rgba(0,137,123,.3);


}



/* LOGIN BUTTON */


.login-btn {


    width:100%;


    padding:14px;


    margin-top:15px;


    border:0;


    border-radius:14px;


    cursor:pointer;


    color:white;


    font-size:17px;


    font-weight:600;



    background:

    linear-gradient(

    135deg,

    var(--main),

    var(--main-dark)

    );


    transition:.2s;


}



.login-btn:hover {


    transform:translateY(-2px);


    opacity:.9;


}



/* ERROR */


.error {


    margin-top:15px;


    color:#d32f2f;


    font-weight:600;


}





/* ==========================
   HEADER
========================== */


.header-row {


    background:

    linear-gradient(

    135deg,

    var(--main-dark),

    var(--main)

    );


    box-shadow:

    0 4px 15px rgba(0,0,0,.2);


}



.header-row strong {


    font-size:22px;

    letter-spacing:.5px;


}



/* ==========================
   BUTTONS
========================== */


.button,
button,
.btn {


    border-radius:12px !important;


    box-shadow:

    0 4px 10px rgba(0,0,0,.15);


}



/* ==========================
   CONTAINERS
========================== */


.container {


    border-radius:18px;


}



/* ==========================
   CARDS
========================== */


.card {


    background:var(--card);


    border-radius:18px;


    padding:20px;


    box-shadow:var(--shadow);


}



/* ==========================
   FORMS
========================== */


input,
select,
textarea {


    border-radius:12px !important;


}



/* ==========================
   TABLE
========================== */


table {


    border-radius:15px;


    overflow:hidden;


}



thead th {


    background:

    linear-gradient(

    135deg,

    var(--main),

    #4db6ac

    );


    color:white;


}



/* TABLE ROW */


tbody tr {


    transition:.2s;


}



tbody tr:hover {


    transform:scale(1.002);


    background:#e0f2f1;


}



/* ==========================
   MOBILE
========================== */


@media(max-width:768px){


    .header-row strong {

        font-size:18px;

    }


    .login-box {

        width:90%;

        padding:25px;

    }


}
.lang-switch {
    margin-left:auto;
    display:flex;
    gap:8px;
    align-items:center;
}

.lang-switch a {
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    text-decoration:none;
    font-size:30px;
    box-shadow:0 3px 10px rgba(0,0,0,.18);
    transition:.2s;
}

.lang-switch a:hover {
    transform:scale(1.12);
}