/* --- START: ROOT VARIABLES & GENERAL STYLES --- */
:root{
    --bg-dark:#1e202e;
    --bg-light:#2a2d42;
    --primary-accent: #00ffff;
    --primary-accent-hover: #00d1d1;
    --text-primary:#ffffff;
    --text-secondary:#a0a3c4;
    --border-color:#3a3e59;
    --green:#2ecc71;
    --orange:#f39c12;
    --red:#e74c3c
}
body{
    font-family:'Cairo',sans-serif;
    background: radial-gradient(circle at center, #0d0d0d, #000);
    color:var(--text-primary);
    margin:0;
    padding:0;
    overflow-x: hidden;
}
/* --- END: ROOT VARIABLES & GENERAL STYLES --- */

/* --- START: LOGIN SCREEN STYLES --- */
#login-screen {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 10;
    transition: opacity 1s, transform 1s;
}
#login-screen.fade-out {
    opacity: 0;
    transform: scale(0.9);
}
.login-container {
    position: relative;
    z-index: 2;
}
.animated-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #00ffff;
    border-left: 3px solid rgba(0, 255, 255, .75);
    white-space: nowrap;
    overflow: hidden;
    margin: 0 auto 30px;
    width: 12ch;
    animation:
        typing 2.5s steps(12),
        blink-caret .75s step-end infinite alternate;
}
.login-box {
    background: rgba(0, 0, 0, 0.6);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
    width: 300px;
    margin: auto;
}
.login-box button {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, #00bfff, #00ffff);
    color: #000;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.4s;
    font-family: 'Orbitron', sans-serif;
}
.login-box button:hover {
    background: linear-gradient(90deg, #00ffff, #00bfff);
    box-shadow: 0 0 20px #00ffff;
    transform: scale(1.05);
}
/* --- END: LOGIN SCREEN STYLES --- */

/* --- START: APP SCREEN STYLES & TRANSITIONS --- */
#app-screen {
    opacity: 0;
    transition: opacity 1s;
}
#app-screen.fade-in {
    opacity: 1;
}
.content-wrapper {
    position: relative;
    z-index: 2;
}
/* --- END: APP SCREEN STYLES & TRANSITIONS --- */

/* --- START: SHARED ANIMATION STYLES (Bubbles, Logo) --- */
.bubbles {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 0;
}
.bubbles span {
    position: absolute;
    bottom: -100px;
    width: 40px;
    height: 40px;
    background: rgba(0, 255, 255, 0.15);
    border-radius: 50%;
    animation: rise 15s infinite ease-in;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2), 0 0 20px rgba(0, 255, 255, 0.1);
}
.bubbles span:nth-child(1) { left: 10%; animation-delay: 0s; }
.bubbles span:nth-child(2) { left: 20%; width: 25px; height: 25px; animation-delay: 2s; animation-duration: 12s;}
.bubbles span:nth-child(3) { left: 40%; animation-delay: 4s; width: 50px; height: 50px;}
.bubbles span:nth-child(4) { left: 60%; width: 15px; height: 15px; animation-delay: 1s; animation-duration: 8s;}
.bubbles span:nth-child(5) { left: 80%; animation-delay: 3s; }
.bubbles span:nth-child(6) { left: 85%; width: 30px; height: 30px; animation-delay: 6s; animation-duration: 10s;}
.bubbles span:nth-child(7) { left: 50%; animation-delay: 7s; }
.bubbles span:nth-child(8) { left: 30%; width: 20px; height: 20px; animation-delay: 5s; animation-duration: 18s;}
.bubbles span:nth-child(9) { left: 70%; animation-delay: 9s; }
.bubbles span:nth-child(10) { left: 5%; width: 22px; height: 22px; animation-delay: 11s; animation-duration: 14s;}
.logo {
    animation: float 3s ease-in-out infinite, glow 2s alternate infinite;
}
#login-screen .logo {
     width: 200px;
     height: 200px;
     margin: 0 auto 20px;
}
#app-screen .logo {
    width: 70px;
    height: 70px;
}
/* --- END: SHARED ANIMATION STYLES --- */

/* --- START: KEYFRAME ANIMATIONS --- */
@keyframes rise {
    0% { transform: translateY(0) scale(1); opacity: 0.6; }
    100% { transform: translateY(-120vh) scale(1.5); opacity: 0; }
}
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}
@keyframes glow {
    from { filter: drop-shadow(0 0 4px #00bfff) drop-shadow(0 0 8px #00bfff); }
    to { filter: drop-shadow(0 0 10px #00ffff) drop-shadow(0 0 20px #00ffff); }
}
@keyframes typing {
    from { width: 0; }
}
@keyframes blink-caret {
    50% { border-color: transparent; }
}
/* --- END: KEYFRAME ANIMATIONS --- */

/* --- START: MAIN APP CSS --- */
.container{max-width:1200px;margin:0 auto;padding:2rem}
header{background-color: transparent; border-bottom:1px solid var(--border-color)}
header .container{display:flex;align-items:center;justify-content: center;gap:1rem;padding-top:1rem;padding-bottom:1rem}
header .header-content {display: flex;align-items: center;gap: 1.5rem;}
header h1{margin:0;font-size:1.8rem;font-family: 'Orbitron', sans-serif; text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);}
.summary-cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem}
.summary-card-small{background:rgba(42, 45, 66, 0.8); backdrop-filter: blur(5px); border-radius:8px;padding:1.5rem;display:flex;align-items:center;gap:1.5rem;border-right:4px solid var(--primary-accent)}
.summary-card-small .card-icon{font-size:2.5rem;color:var(--primary-accent)}
.summary-card-small .card-title{color:var(--text-secondary);font-size:1rem;margin-bottom:.5rem}
.summary-card-small .card-value{font-size:1.8rem;font-weight:700}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.search-wrapper{position:relative;flex-grow:1}
.search-wrapper .fa-search{position:absolute;top:50%;left:15px;transform:translateY(-50%);color:var(--text-secondary)}
.search-wrapper .btn-clear-search {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0 5px;
    line-height: 1;
}
.search-wrapper .btn-clear-search:hover { color: var(--text-primary); }
#search-input{width:100%;padding:.7rem 50px;background-color:var(--bg-light);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-family:'Cairo',sans-serif;font-size:1rem;box-sizing:border-box;min-width:250px}
.toolbar-actions{display:flex;gap:1rem;flex-wrap:wrap;}
#add-employee-btn, .secondary-btn {border:none;padding:.7rem 1.5rem;border-radius:8px;font-size:1rem;font-family:'Cairo',sans-serif;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition: all .3s ease}
#add-employee-btn{background-color:var(--primary-accent);color:var(--bg-dark);}
#add-employee-btn:hover{background-color:var(--primary-accent-hover); transform: scale(1.05); box-shadow: 0 0 15px var(--primary-accent);}
.secondary-btn{background-color:var(--bg-light);color:var(--text-secondary)}
.secondary-btn:hover{background-color:var(--border-color);color:var(--text-primary)}
.table-wrapper{background:rgba(42, 45, 66, 0.8); backdrop-filter: blur(5px); border-radius:8px;padding:1.5rem;box-shadow:0 10px 30px rgba(0,0,0,.2);overflow-x:auto}
#employees-table,#records-table, #daily-log-table, #deductions-table, #activity-log-table {width:100%;border-collapse:collapse}
#employees-table th,#employees-table td,#records-table th,#records-table td, #daily-log-table th, #daily-log-table td, #deductions-table th, #deductions-table td, #activity-log-table th, #activity-log-table td {padding:1rem;text-align:right;border-bottom:1px solid var(--border-color);vertical-align: top;}
#employees-table thead,#records-table thead, #daily-log-table thead, #deductions-table thead, #activity-log-table thead {border-bottom:2px solid var(--primary-accent)}
#employees-table th { position: relative; cursor: pointer; }
#employees-table th.sortable::after { content: ' ⇅'; color: var(--text-secondary); font-size: 0.8em; }
#employees-table th.sorted-asc::after { content: ' ▲'; color: var(--primary-accent); }
#employees-table th.sorted-desc::after { content: ' ▼'; color: var(--primary-accent); }
#employees-table th,#records-table th, #daily-log-table th, #deductions-table th, #activity-log-table th {font-weight:700;color:var(--text-secondary);font-size:.9rem;text-transform:uppercase}
#employees-table tbody tr:hover,#records-table tbody tr:hover, #daily-log-table tbody tr:hover, #deductions-table tbody tr:hover, #activity-log-table tbody tr:hover {background-color:#313552}
#employees-table tbody tr:last-child td,#records-table tbody tr:last-child td, #daily-log-table tbody tr:last-child td, #deductions-table tbody tr:last-child td, #activity-log-table tbody tr:last-child td {border-bottom:none}
.day-name { font-size: 0.8rem; color: var(--text-secondary); }.date-wrapper { display: flex; align-items: center; gap: 0.5rem; flex-grow: 1; }.date-wrapper input { flex-grow: 1; }
#records-table td > div, #daily-log-table td > div { margin-bottom: 0.5rem; }
#records-table td > div:last-child, #daily-log-table td > div:last-child { margin-bottom: 0; }.record-label { color: var(--text-secondary); font-size: 0.8rem; }.has-tooltip { border-bottom: 1px dotted var(--text-secondary); cursor: help; }
.actions{display:flex;gap:.5rem}.btn-icon{background:0 0;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.1rem;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.btn-icon:hover{background-color:rgba(255,255,255,.1)}
.btn-payroll-single:hover{color:var(--green)}
.btn-details:hover{color:var(--green)}
.btn-edit:hover{color:var(--orange)}
.btn-delete:hover{color:var(--red)}
.btn-payslip:hover{color:var(--primary-accent)}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:1000;overflow-y: auto; padding: 20px 0; backdrop-filter: blur(5px);}
.modal-content{background-color:var(--bg-light);padding:2.5rem;border-radius:12px;width:90%;max-width:500px;box-shadow:0 10px 40px rgba(0,0,0,.4);border-top:4px solid var(--primary-accent); margin: auto;}
.modal-content.modal-lg {max-width: 1000px;}.modal-content h2{margin-top:0;margin-bottom:2rem;text-align:center}
.form-group{margin-bottom:1.5rem}.form-group label, .form-group .form-hint {display:block;margin-bottom:.5rem;color:var(--text-secondary)}.form-group .form-hint {font-size: 0.8rem; margin-top: -0.8rem;}.form-group input, .form-group select {width:100%;padding:.8rem;background-color:var(--bg-dark);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-family:'Cairo',sans-serif;font-size:1rem;box-sizing:border-box}
.form-group input:focus, .form-group select:focus{outline:0;border-color:var(--primary-accent)}.form-actions{display:flex;justify-content:flex-start;gap:1rem;margin-top:2rem}
.form-actions button{padding:.7rem 1.8rem;border:none;border-radius:6px;font-family:'Cairo',sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}
.btn-save{background-color:var(--primary-accent);color:var(--bg-dark);}.btn-save:hover{background-color:var(--primary-accent-hover)}.btn-cancel{background-color:transparent;color:var(--text-secondary);border:1px solid var(--border-color)}
.btn-cancel:hover{background-color:var(--border-color);color:var(--text-primary)}
.back-btn{background:0 0;border:1px solid var(--border-color);color:var(--text-secondary);padding:.6rem 1.2rem;border-radius:8px;font-size:1rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;margin-bottom:2rem;transition:all .3s ease}
.back-btn:hover{background-color:var(--border-color);color:var(--text-primary)}
.card{background:rgba(42, 45, 66, 0.8); backdrop-filter: blur(5px); border-radius:8px;padding:1.5rem 2rem;box-shadow:0 10px 30px rgba(0,0,0,.2);margin-bottom:2rem}
.card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;border-bottom:1px solid var(--border-color);padding-bottom:1rem}
.card .card-header h3{margin:0;padding:0;border:0;display:flex;align-items:center;gap:.7rem}
.summary-grid, .employee-details-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.summary-grid .label, .employee-details-grid .label{color:var(--text-secondary);font-size:.9rem;display:block;margin-bottom:.2rem}
.summary-grid span:not(.label), .employee-details-grid span:not(.label){font-size:1.4rem;font-weight:700}.text-green{color:var(--green)}.text-red{color:var(--red)}.text-blue{color:var(--primary-accent)}.text-orange{color:var(--orange)}
#add-record-form .form-row{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap: wrap;}
#add-record-form select,#add-record-form input,#add-record-form button{width:100%;padding:.8rem;background-color:var(--bg-dark);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-family:'Cairo',sans-serif;font-size:1rem;box-sizing:border-box}
#add-record-form button{background-color:var(--primary-accent); color: var(--bg-dark); cursor:pointer;font-weight:700;transition:background-color .3s ease;margin-top:1rem}
#add-record-form button:hover{background-color:var(--primary-accent-hover)}
#dynamic-fields{margin-top:1.5rem;border-top:1px solid var(--border-color);padding-top:1.5rem}
.dynamic-field-group{margin-bottom:1rem}.dynamic-field-group label{margin-bottom:.5rem;display:block;color:var(--text-secondary);font-size:.9rem}
.dynamic-field-group input,.dynamic-field-group select{width:100%;padding:.8rem;background-color:var(--bg-dark);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-family:'Cairo',sans-serif;font-size:1rem;box-sizing:border-box}
.dynamic-field-group input:focus,.dynamic-field-group select:focus{outline:0;border-color:var(--primary-accent)}
.net-salary-wrapper{display:flex;align-items:center;gap:.5rem;background-color:var(--bg-dark);padding:.5rem 1rem;border-radius:8px;border:1px solid var(--border-color)}
.net-salary-wrapper .label{margin:0;white-space:nowrap}
.net-salary-input{width:100%;background:0 0;border:none;color:var(--primary-accent);font-size:1.6rem;font-weight:700;padding:.2rem;font-family:'Cairo',sans-serif}
.net-salary-input:focus{outline:0}

#toast-container{
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}
.toast{
    background-color: var(--bg-light);
    color: var(--text-primary);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,.3);
    margin-bottom: 1rem;
    border-right: 4px solid var(--primary-accent);
    opacity: 0;
    transform: translateX(120%);
    transition: all .5s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-width: 280px;
}
.toast.show{
    opacity: 1;
    transform: translateX(0);
}
.toast.success{ border-right-color: var(--green); }
.toast.error{ border-right-color: var(--red); }
.toast.warning{ border-right-color: var(--orange); }

.dynamic-field-group .deduction-options{display:flex;gap:1.5rem;background-color:var(--bg-dark);padding:.8rem;border-radius:6px;margin-top:.5rem}
.dynamic-field-group .deduction-options label{display:flex;align-items:center;gap:.5rem;color:var(--text-primary);cursor:pointer}
.work-days-group { display: flex; justify-content: space-around; background-color: var(--bg-dark); padding: 0.8rem; border-radius: 6px; flex-wrap: wrap; gap: 5px; }
.work-days-group label { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: var(--text-primary); cursor: pointer; padding: 5px; border-radius: 4px; transition: background-color 0.2s; }
.work-days-group label:hover { background-color: var(--border-color); }
.work-days-group input[type="checkbox"] { display: none; }
.work-days-group input[type="checkbox"]:checked + span { color: var(--primary-accent); font-weight: bold; }
.insurance-group { display: flex; gap: 0.5rem; align-items: center; }
.insurance-group .main-input { flex-grow: 1; }
.insurance-group .percent-input { width: 80px; text-align: center; }
.insurance-group .percent-sign { color: var(--text-secondary); }
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input[type=number] {-moz-appearance: textfield;}
.payslip-container{padding:2rem;background-color:#fff;color:#000;font-family: 'Cairo', sans-serif; direction: rtl;}
.payslip-header{text-align:center;margin-bottom:2rem;border-bottom:2px solid #ccc;padding-bottom:1rem}
.payslip-header h2{margin:0;color:#1e202e}
.payslip-header p{margin:5px 0;color:#555}
.payslip-employee-info{margin-bottom:2rem; text-align: right;}
.payslip-employee-info div{margin-bottom: .5rem;}
.payslip-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem;}
.payslip-table{width:100%;border-collapse:collapse;}
.payslip-table th,.payslip-table td{border:1px solid #ccc;padding:10px;text-align:right}
.payslip-table th{background-color:#f2f2f2}
.payslip-table .total-row td{font-weight:700; background-color: #e8e8e8;}
.payslip-table .net-salary-row td {font-weight: bold; font-size: 1.1rem; background-color: #d8d8d8;}
.payslip-footer{text-align:center;margin-top:3rem;color:#777;font-size: .9rem;}
.payslip-actions{padding: 1rem; background: var(--bg-light); margin-top: -2.5rem; display: flex; justify-content: flex-end; gap: 1rem; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}

.month-selector-wrapper { display: flex; align-items: center; gap: 0.5rem; }
.month-selector-wrapper label { color: var(--text-secondary); font-size: 0.9rem; }
.month-selector-wrapper input[type="month"] {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-family: 'Cairo', sans-serif;
    font-size: 0.9rem;
}

@media print {
    body * { visibility: hidden; }
    .modal-overlay, .payslip-modal-content, .payslip-container, .payslip-container * {
        visibility: visible;
        color: #000 !important;
    }
    .modal-overlay {
        position: absolute;
        left: 0;
        top: 0;
        padding: 0;
        background: #fff;
    }
    .payslip-modal-content {
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        border: none;
        padding: 1cm;
    }
    .payslip-actions { display: none; }
}
/* --- END: MAIN APP CSS --- */