@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

.body-landing {
    background-image: url('/assets/images/bg-landing.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    padding: 0 !important;
    margin: 0 !important;
}

.bg-glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    width: 100%;
    height: 100vh;
    position: relative;
}

.card-menu {
    padding: 3rem;
}

.landing-header {
    text-align: center;
    padding-top: 90px;
}

.landing-header h4 {
    font-size: 24px;
    color: #3A6AD6;
    font-weight: 300;
    margin-bottom: 18px;
}

.landing-header h4 span {
    font-weight: 600 !important;
}

.landing-header h5 {
    color: #000;
    font-size: 18px;
    font-weight: 600;
}

/* The Grid Container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns */
    gap: 24px;
    width: 100%;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 900px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

/* --- Card Styles --- */
.card {
    border-radius: 32px; /* Very round corners like image */
    padding: 32px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
    min-height: 200px;
}

.card:hover {
    transform: translateY(-5px);
}

/* Card Variants */
.card.light {
    background-color: #e9eff6; /* Light Blue-Gray */
    color: #333;
}

.card.blue {
    background-color: #1a60b5; /* Deep Blue */
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(26, 96, 181, 0.3);
}

/* --- Icon Circle Styles --- */
.icon-circle {
    background-color: white;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevents circle from squishing */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Icon Colors */
.icon-yellow { color: #f59e0b; }
.icon-blue   { color: #1a60b5; }
.icon-green  { color: #10b981; }

/* SVG Sizing */
.icon-circle svg {
    width: 32px;
    height: 32px;
}

/* --- Content Styles --- */
.content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.title {
    font-size: 1.25rem; /* ~20px */
    font-weight: 700;
    line-height: 1.2;
}

.description {
    font-size: 0.9rem; /* ~14px */
    line-height: 1.5;
}

/* Text colors for specific backgrounds */
.card.light .description {
    color: #555;
}

.card.blue .description {
    color: #dbeafe; /* Light blue text for contrast */
}

.footer-landing {
    width: 100%;
    height: 60px;
    background-color: #3A6AD6;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
}

.footer-landing h5 {
    color: #FFF;
    font-size: 16px;
    font-weight: 200;
}

.responsibility {
    position: absolute;
    bottom: 72px;
    color: #FFF;
    font-size: 14px;
    font-weight: 200;
    left: 3rem;
}

.button-login {
    background-color: #FFF;
    padding: 8px 2rem;
    color: #3A6AD6;
    font-size: 18px;
    font-weight: 200;
    position: absolute;
    right: 3rem;
    top: 90px;
    text-decoration: unset;
    width: 150px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button-login:hover {
    font-weight: 700;
    box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.6);
}

.landing-page-header {
    background-color: #FFF;
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    height: 70px;
    border-bottom: 1px solid #005CA8;
}

.landing-page-header .left-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 3rem;
}

.landing-page-header .left-section .left-desc h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #005CA8;
    margin: 0;
}

.landing-page-header .left-section .left-desc p {
    font-size: 12px;
    color: #3C9DED;
    font-weight: 300;
    margin: 0;
}

.right-section {
    padding-right: 3rem;
    display: flex;
    align-items: center;
    justify-content: end;
}

.bg-login {
    background-color: #005AB2;
    width: 100%;
    height: 100vh;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
}

.form-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.form-container .bg {
    position: relative;
    display: block;
}

.form-container img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card-login {
    background-color: #FFF;
    overflow: hidden;
    border-radius: 12px;
    padding: 12px 0;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(50%, -50%);
    width: 500px;
}

.card-header {
    border-bottom: 1px solid #3A6AD6;
    padding: 0 16px;
}

.card-header .card-title {
    font-size: 24px;
    font-weight: 700;
    color: #3A6AD6;
    margin-bottom: 8px;
}

.card-body {
    padding: 12px 16px;
}

/* --- Form Section --- */
:root {
    --primary-blue: #3b71ca;
    --input-bg: #f0f2f5;
    --text-dark: #333;
    --white: #ffffff;
}


.input-group {
    margin-bottom: 12px;
}

/* Labels */
.input-group label {
    display: block;
    margin-bottom: 10px;
    color: var(--primary-blue);
    font-weight: 500;
    font-size: 16px;
}

/* Inputs */
.input-group input {
    width: calc(100% - 24px);
    padding: 8px 12px;
    background-color: var(--input-bg);
    border: 1px solid var(--primary-blue);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-dark);
    outline: none; /* Removes default browser focus ring */
    transition: box-shadow 0.2s ease;
}

.input-group input:focus {
    /* Optional: adds a subtle glow on focus */
    box-shadow: 0 0 0 3px rgba(59, 113, 202, 0.2);
}

/* --- Button Section --- */
.button-group {
    display: flex;
    justify-content: flex-end; /* Aligns button to the right */
    margin-top: 30px;
}

.login-button {
    background-color: var(--primary-blue);
    color: var(--white);
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 12px; /* Space between text and icon */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.login-button:hover {
    background-color: #2a5cb0; /* Slightly darker blue on hover */
}

.login-button:active {
    transform: scale(0.98); /* Subtle click effect */
}

/* Icon styling */
.button-icon {
    width: 24px;
    height: 24px;
}

/* 1. The Error Message Text */
.error-msg {
    color: #dc2626; /* A clear, readable red */
    font-size: 0.85rem; /* Slightly smaller than label */
    margin-top: 6px;
    display: block; /* Ensures it sits on its own line */
    font-weight: 500;
}

/* 2. The Input Field when it has an error */
input.input-error {
    border-color: #dc2626 !important; /* Force red border */
    background-color: #fef2f2; /* Very light red background */
}

/* Optional: Add a subtle shake animation on error focus if you like */
input.input-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

.bg-dashboard {
    background-color: #FFF;
    width: 100%;
    height: 100vh;
    padding: 0 !important;
    margin: 0 !important;
}

.body-dashboard {
    display: flex;
    width: 100%;
}

.bg-left {
    background-image: url('/assets/images/bg-dashboard.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 30%;
    height: 100vh;
    padding: 0 !important;
    margin: 0 !important;
}

.content-left {
    padding-top: calc(70px + 3rem);
    padding-bottom: calc(70px + 3rem);
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
    height: calc(100vh - 300px);
}

.content-left h5 {
    font-size: 20px;
    font-weight: 300;
    color: #FFF;
}

.content-left b {
    font-weight: 700;
}

.content-left h3 {
    font-size: 28px;
    font-weight: 700;
    color: #FFF;
}

.content-left p {
    font-size: 14px;
    font-weight: 300;
    color: #FFF;
}

.content-left .footer-content {
    position: absolute;
    bottom: 20px;
    color: #FFF;
    width: 100%;
}

.content-left .footer-content h4 {
    font-size: 24px;
    font-weight: 300;
}

.content-left .footer-content h4 b {
    font-size: 24px;
    font-weight: 700;
}

.bg-right {
    width: 70%;
    height: 100vh;
    padding: 0 !important;
    margin: 0 !important;
}

.dashboard-container {
    padding-top: calc(70px + 3rem);
    padding-bottom: calc(70px + 3rem);
    padding-left: 4rem;
    padding-right: 4rem;
    height: calc(100vh - 300px);
}

/* --- Title Style --- */
.dashboard-title {
    color: #3b71ca; /* Blue color from image_9.png */
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: left;
}

/* --- Grid Layout --- */
.dashboard-grid {
    display: grid;
    /* 4 Columns by default */
    grid-template-columns: repeat(4, 1fr);
    gap: 60px; /* Space between cards */
}

/* --- Card Styles --- */
.dashboard-card {
    border-radius: 12px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    min-height: 120px; /* Ensures uniform height */
    text-decoration: unset;
}

/* Hover effect for cards */
.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Card Titles */
.dashboard-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
    line-height: 1.3;
}

/* Icon Container */
.icon-container {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-container svg {
    width: 100%;
    height: 100%;
    /* Ensure SVGs inherit the white color */
    fill: white;
}

/* --- Individual Card Colors (matching image_9.png) --- */
/* Row 1 */
.card-rektor { background-color: #00aedb; } /* Cyan */
.card-wra    { background-color: #ffc425; } /* Yellow/Orange */
.card-wrs    { background-color: #f37735; } /* Orange */
.card-wrp    { background-color: #4d8a53; } /* Green */

/* Row 2 */
.card-dekan  { background-color: #c1407a; } /* Magenta */
.card-su     { background-color: #86d717; } /* Lime Green */
.card-spm    { background-color: #7b6df7; } /* Purple */
.card-spi    { background-color: #005dcc; } /* Blue */


/* --- Responsive Design --- */
/* For Tablets (2 columns) */
@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* For Mobile Phones (1 column) */
@media (max-width: 576px) {
    .dashboard-title {
        text-align: center;
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .dashboard-card {
        min-height: 180px;
        padding: 25px 15px;
    }
}

/* 1. Container for the icon + menu */
.user-dropdown {
    position: relative; /* Anchor point for the absolute menu */
    display: inline-block;
    cursor: pointer;
    padding: 10px 0 10px 10px; /* Adds a little invisible "hover bridge" area */
}

/* 2. The Dropdown Menu Box */
.dropdown-content {
    /* Hidden State */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Starts slightly lower */
    transition: all 0.3s ease;

    /* Position & Style */
    position: absolute;
    right: 0; /* Aligns to the right edge of the icon */
    top: 100%; /* Pushes it directly below the container */
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 99;
    overflow: hidden;
}

/* 3. Show Menu on Hover (Magic Happens Here) */
/* When hovering .user-dropdown, change .dropdown-content styles */
.user-dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Moves up to natural position */
}

/* 4. Link Styling */
.dropdown-content a,
.dropdown-content button {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit; /* Matches your site font */
}

/* Hover effect for links */
.dropdown-content a:hover,
.dropdown-content button:hover {
    background-color: #f1f1f1;
    color: #004a99; /* Use your brand blue here */
}

.content-form {
    padding-top: calc(70px + 1rem);
    padding-bottom: calc(70px + 1rem);
    padding-left: 3rem;
    padding-right: 3rem;
    width: 100%;
}

.content-form h2 {
    font-size: 24px;
    font-weight: 700;
}


/* --- 1. The Card Container --- */
.table-card {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Soft shadow */
    padding: 24px;
    margin: 20px 0;
    font-family: 'Poppins', sans-serif;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.table-header h3 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.add-btn {
    background-color: #3b71ca; /* Brand Blue */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

.add-btn:hover {
    background-color: #2a5cb0;
}

/* --- 2. The Table Styling --- */
.table-responsive {
    overflow-x: auto; /* Makes table scrollable on mobile */
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Prevents squishing on small screens */
}

/* Header */
.custom-table thead tr {
    background-color: #f8f9fa;
    text-align: left;
}

.custom-table th {
    padding: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    border-bottom: 2px solid #eef2f6;
}

/* Body Rows */
.custom-table td {
    padding: 16px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #eef2f6;
}

/* Zebra Striping & Hover Effect */
.custom-table tbody tr:nth-child(even) {
    background-color: #fafbfc;
}

.custom-table tbody tr:hover {
    background-color: #f1f7ff; /* Light blue hover */
}

/* User Avatar Cell */
.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-cell img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* --- 3. Badges & Status --- */
.badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}
.badge-admin { background-color: #e0e7ff; color: #3b71ca; }
.badge-staff { background-color: #fce7f3; color: #db2777; }
.badge-user { background-color: #ecfccb; color: #65a30d; }

.status-dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.status-dot.active { background-color: #10b981; }
.status-dot.inactive { background-color: #ef4444; }

/* --- 4. Pagination Styling --- */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eef2f6;
}

.page-info {
    font-size: 13px;
    color: #666;
}

.pagination-buttons {
    display: flex;
    gap: 8px;
}

.page-btn {
    border: 1px solid #e0e0e0;
    background: white;
    color: #555;
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.page-btn:hover:not([disabled]) {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

/* Active Page Style */
.page-btn.active {
    background-color: #3b71ca;
    color: white;
    border-color: #3b71ca;
}

.page-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive Pagination for Mobile */
@media (max-width: 600px) {
    .pagination-container {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
}

/* --- Modal Overlay (Background) --- */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000; /* Sits on top of everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    backdrop-filter: blur(4px); /* Optional: Blurs background */
    align-items: center;
    justify-content: center;
}

/* --- Modal Box --- */
.modal-content {
    background-color: white;
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: slideDown 0.3s ease-out;
    font-family: 'Poppins', sans-serif;
}

/* Header */
.modal-header {
    background-color: #f8f9fa;
    padding: 20px 24px;
    border-bottom: 1px solid #eef2f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    color: #333;
    font-size: 18px;
}

.close-btn {
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
    font-weight: bold;
}
.close-btn:hover { color: #333; }

/* Body & Form Inputs */
.modal-body {
    padding: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
}

.form-group input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border 0.2s;
}

.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #3b71ca; /* Brand Blue */
    box-shadow: 0 0 0 3px rgba(59, 113, 202, 0.1);
}

/* Footer Buttons */
.modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #eef2f6;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-cancel {
    background: white;
    border: 1px solid #ddd;
    color: #555;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.btn-save {
    background: #3b71ca;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.btn-save:hover { background: #2a5cb0; }

/* Animation */
@keyframes slideDown {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.action-btn {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Space between icon and text */
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    color: #555;
}

.edit-btn:hover {
    background-color: #f0f7ff;
    border-color: #3b71ca;
    color: #3b71ca; /* Turns blue on hover */
}

/* Styling khusus tombol Password */
.pass-btn:hover {
    background-color: #fffbeb; /* Kuning muda */
    border-color: #f59e0b;     /* Oranye */
    color: #f59e0b;
}

/* Styling Alert Info di dalam modal */
.alert-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Styling tombol Delete di tabel */
.delete-btn:hover {
    background-color: #fef2f2; /* Merah sangat muda */
    border-color: #dc2626;     /* Merah */
    color: #dc2626;
}

/* Tombol Hapus di dalam modal saat di-hover */
.btn-save[style*="background-color: #dc2626"]:hover {
    background-color: #b91c1c !important; /* Merah lebih gelap */
}