/* assets/css/style.css */

/* General styles */
body { font-family: Arial; background:#f4f6f9; margin:0; padding-bottom:60px; }
header { display:flex; justify-content:space-between; align-items:center; padding:15px 20px; background:#fff; border-bottom:1px solid #ddd; }
.logo { max-height:40px; }
.logout { color:#dc3545; text-decoration:none; font-weight:bold; }

.main { max-width:1000px; margin:30px auto; padding:0 15px; }
h2 { text-align:center; margin-bottom:20px; }

.search { text-align:center; margin-bottom:25px; }
.search input { padding:12px; width:70%; max-width:320px; }
.search button { padding:12px 20px; background:#000; color:#fff; border:none; cursor:pointer; }

table.dataTable, table { border:1px solid #ddd; border-collapse: collapse; width:100%; background:#fff; }
th, td { padding:10px; border:1px solid #ddd; text-align:left; }
.status-badge { padding:4px 10px; border-radius:20px; font-size:13px; font-weight:600; }
.status-active { background:#e6f4ea; color:#28a745; }
.status-inactive { background:#fdecea; color:#dc3545; }

/* Footer fixed at bottom without line */
footer {
    text-align:center;
    padding:15px;
    font-size:14px;
    color:#555;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #f4f6f9;
}

/* Responsive Table */
@media screen and (max-width: 768px) {
    table, thead, tbody, th, td, tr { display: block; }
    thead tr { display: none; }
    tr { margin-bottom: 15px; border-bottom: 2px solid #ddd; padding-bottom: 10px; }
    td { text-align: right; padding-left: 50%; position: relative; }
    td::before { content: attr(data-label); position: absolute; left: 10px; width: 45%; padding-left: 10px; font-weight: bold; text-align: left; }
}

/* Login page styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    background: #f4f6f9;
}
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.login-container {
    text-align: center;
    width: 90%;
    max-width: 320px;
}
.login-container img {
    max-width: 180px;
    margin-bottom: 20px;
}
.login-container h2 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}
form { display: flex; flex-direction: column; }
input[type="password"] {
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}
input[type="submit"] {
    padding: 12px;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}
.error { color: #dc3545; margin-bottom: 15px; }