:root {
  --color-primary: #1a7a4c;
  --color-primary-dark: #0f4c3a;
  --color-primary-light: #e8f5ee;
  --color-accent: #2f9e6b;
  --color-danger: #d0342c;
  --color-danger-light: #fbe9e8;
  --color-warning: #b8860b;
  --color-warning-light: #fff6e0;
  --color-text: #1c2521;
  --color-text-muted: #5b6b63;
  --color-border: #d7e4dc;
  --color-surface: #ffffff;
  --color-bg: #f3f8f5;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 10px 30px rgba(15, 76, 58, 0.10);
  --font-sans: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #eaf3ee;
    --color-text-muted: #a9beb3;
    --color-border: #24463a;
    --color-surface: #12241d;
    --color-bg: #0b1712;
    --color-primary-light: #163527;
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card{
    width:min(100%,480px);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding:clamp(1.5rem,4vw,2.25rem) clamp(1.25rem,4vw,2rem);
  animation: fadeSlideUp .35s ease both;
}

.auth-card.wide { max-width: 640px; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.brand-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.brand-row .brand-title { font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.brand-row .brand-sub { font-size: .8rem; color: var(--color-text-muted); }
.brand-crest {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-primary-light);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--color-primary);
}

h1.form-title { font-size: 1.4rem; margin: 0 0 .25rem; }
p.form-sub { color: var(--color-text-muted); margin: 0 0 1.5rem; font-size: .92rem; }

.form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
}

@media (min-width:560px){
    .form-grid{
        grid-template-columns:1fr 1fr;
    }
}
.field { margin-bottom: 1rem; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: .65rem .8rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.field-error { color: var(--color-danger); font-size: .8rem; margin-top: .3rem; }
.field-hint { color: var(--color-text-muted); font-size: .78rem; margin-top: .3rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: clamp(.7rem,2vw,.85rem)
             clamp(1rem,3vw,1.2rem);
    border-radius: var(--radius-md);
    border: none;
    font-size: clamp(.9rem,2vw,.95rem);
    font-weight: 600;
    cursor: pointer;
    transition: transform .1s ease,
                box-shadow .15s ease,
                background .15s ease;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: 0 6px 16px rgba(26,122,76,.3); }
.btn-primary:active { transform: scale(.98); }
.btn-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-light); }

.checkbox-row { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; margin-bottom: 1.25rem; }
.checkbox-row input { margin-top: .2rem; }

.divider-text {
  text-align: center; color: var(--color-text-muted); font-size: .85rem; margin: 1.25rem 0;
}
.auth-footer-link { text-align: center; font-size: .88rem; margin-top: 1.25rem; color: var(--color-text-muted); }
.auth-footer-link a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.auth-footer-link a:hover { text-decoration: underline; }

.alert {
  padding: .8rem 1rem; border-radius: var(--radius-md); font-size: .88rem; margin-bottom: 1.25rem;
}
.alert-danger { background: var(--color-danger-light); color: var(--color-danger); }
.alert-warning { background: var(--color-warning-light); color: var(--color-warning); }
.alert-success { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* Password strength meter */
.strength-meter { height: 6px; border-radius: 4px; background: var(--color-border); margin-top: .5rem; overflow: hidden; }
.strength-meter-fill { height: 100%; width: 0%; transition: width .25s ease, background .25s ease; }
.strength-label { font-size: .78rem; margin-top: .3rem; color: var(--color-text-muted); }

/* Resident ID upload */
.upload-box {
  border: 2px dashed var(--color-border); border-radius: var(--radius-md);
  padding: 1.25rem; text-align: center; cursor: pointer; transition: border-color .15s ease;
}
.upload-box:hover { border-color: var(--color-primary); }
.upload-preview { max-width: 100%; max-height: 160px; border-radius: var(--radius-md); margin-top: .75rem; display: none; }

/* Toast notifications (no ugly browser alerts) */
.toast-container { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 9999; display: flex; flex-direction: column; gap: .6rem; }
.toast {
  background: var(--color-surface); color: var(--color-text); border-left: 4px solid var(--color-primary);
  padding: .8rem 1rem; border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  min-width: 260px; font-size: .88rem; animation: toastIn .25s ease both;
}
.toast.error { border-left-color: var(--color-danger); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px);} to { opacity: 1; transform: translateX(0);} }

/* KBA question chips */
.kba-question-box { background: var(--color-primary-light); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem; }
.kba-question-box p { margin: 0 0 .5rem; font-weight: 600; }

@media (max-width: 560px) {
  
  .auth-card { padding: 1.75rem 1.25rem; }
}
.upload-box {
    border: 2px dashed #bfc7d1;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
    background: #fafafa;
}

.upload-box:hover {
    border-color: #2563eb;
    background: #f3f8ff;
}

.upload-preview {
    margin-top: 15px;
    max-width: 100%;
    max-height: 220px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.pdf-preview {
    margin-top: 15px;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
    font-weight: 600;
    color: #d32f2f;
}

#fileName {
    display: block;
    margin-top: 12px;
    color: #555;
    word-break: break-word;
}

.upload-success {
    border-color: #22c55e !important;
    background: #ecfdf5;
}


.activity-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.activity-item{
    padding:14px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fafafa;
}

.activity-title{
    font-weight:600;
    color:#1f2937;
}

.activity-details{
    margin-top:5px;
    color:#555;
}

.activity-date{
    margin-top:8px;
    font-size:12px;
    color:#888;
}


/* ===========================
   PROFILE ACTIVITIES
=========================== */

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

.panel-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.activity-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.activity-item{
    border:1px solid #dcdcdc;
    border-radius:10px;
    padding:15px;
    background:#fff;
    transition:.2s;
}

.activity-item:hover{
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.activity-title{
    font-size:16px;
    font-weight:600;
    color:#222;
}

.activity-details{
    margin-top:5px;
    color:#666;
    font-size:14px;
}

.activity-date{
    margin-top:8px;
    color:#888;
    font-size:13px;
}

.btn-danger{
    background:#dc3545;
    color:#fff;
    border:none;
}

.btn-danger:hover{
    background:#bb2d3b;
}

.btn-secondary{
    background:#6c757d;
    color:#fff;
    border:none;
}

.btn-secondary:hover{
    background:#5c636a;
}

.btn-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
}

.alert-success{
    background:#d1e7dd;
    border:1px solid #badbcc;
    color:#0f5132;
    padding:15px;
    border-radius:10px;
}

.alert-danger{
    background:#f8d7da;
    border:1px solid #f5c2c7;
    color:#842029;
    padding:15px;
    border-radius:10px;
}

/* Modal */

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:9999;
}

.modal-box{

    width:90%;
    max-width:750px;

    max-height:85vh;

    overflow-y:auto;

    background:#fff;

    border-radius:14px;

   padding:clamp(1rem,4vw,20px);

    box-shadow:0 20px 50px rgba(0,0,0,.35);

    animation:popup .25s ease;
}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;
}

.modal-body{

    max-height:65vh;

    overflow-y:auto;
}

@keyframes popup{

    from{

        opacity:0;

        transform:translateY(-30px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/* Recycle Bin buttons */

.recycle-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:20px;
    flex-wrap:wrap;
}

.recycle-actions .btn{
    min-width:180px;
}

@media (max-width:560px){

    .recycle-actions{

        flex-direction:column;

    }

    .recycle-actions .btn{

        width:100%;

        min-width:unset;

    }

}

/* Better activity rows */

.activity-item{
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
    margin-bottom:10px;
}

.activity-label{
    display:flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
}

.activity-details{
    margin-top:4px;
    color:#666;
}

.activity-date{
    margin-top:6px;
    font-size:.85rem;
    color:#888;
}