/* style.css — PassportMS : Malaysian Immigration Portal Style */
@import url('https://fonts.googleapis.com/css2?family=Tahoma&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --header-top:    #1a4570;
    --header-bot:    #0f2d4a;
    --sidebar-bg:    #1e4d78;
    --content-bg:    #dce8f5;
    --panel-bg:      #ffffff;
    --panel-hdr:     #4a7aaa;
    --table-hdr:     #7aadd4;
    --border:        #aac4de;
    --border-dk:     #7a9fc0;
    --text:          #1a1a2e;
    --text-lbl:      #1a3a5c;
    --text-muted:    #556b88;
    --gold:          #f0c840;
    --blue-btn:      #1a5fa8;
    --red:           #cc0000;
    --green:         #006600;
    --font: Tahoma, Verdana, Arial, sans-serif;
}

html, body { font-family: var(--font); font-size: 12px; background: var(--content-bg); color: var(--text); min-height: 100vh; }
a { color: var(--blue-btn); text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, button { font-family: var(--font); font-size: 12px; }

/* ── TOP HEADER ─────────────────────────────────────────────── */
.top-header {
    background: linear-gradient(180deg, #2a6098 0%, #1a4570 40%, #0f2d4a 100%);
    border-bottom: 3px solid #08192a;
}
.top-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; min-height: 72px;
}
.logo-area { display: flex; align-items: center; gap: 12px; }
.logo-icon {
    width: 62px; height: 62px;
    background: radial-gradient(circle at 35% 35%, #f8d840, #c8980a);
    border-radius: 50%; border: 3px solid #dca820;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; box-shadow: 0 3px 8px rgba(0,0,0,.5); flex-shrink: 0;
}
.logo-text {}
.logo-dept {
    color: #fff; font-size: 15px; font-weight: bold;
    letter-spacing: .4px; text-shadow: 1px 1px 3px rgba(0,0,0,.6); line-height: 1.3;
}
.logo-dept span { color: var(--gold); }
.logo-sys {
    color: #7dd4f8; font-size: 19px; font-weight: bold;
    font-style: italic; text-shadow: 1px 1px 4px rgba(0,0,0,.5); line-height: 1.3;
}
.logo-sys em { color: var(--gold); font-style: normal; }

.hdr-right { text-align: right; }
.hdr-date { font-size: 13px; font-weight: bold; color: #fff; line-height: 1.5; }
.hdr-clock {
    font-size: 22px; font-weight: bold; color: var(--gold);
    font-family: 'Courier New', monospace; letter-spacing: 2px;
}

/* Sub-bar */
.sub-bar {
    background: linear-gradient(180deg, #3a7ab8, #2a5a90);
    border-bottom: 1px solid #1a4060;
    padding: 4px 14px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: #cce4ff;
}
.sub-bar .gold { color: var(--gold); font-weight: bold; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.page-wrap { display: flex; flex: 1; min-height: calc(100vh - 100px); }
.pub-body, .dash-body { display: flex; flex-direction: column; min-height: 100vh; }

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
    width: 178px; flex-shrink: 0;
    background: linear-gradient(180deg, #1e4d78, #12304f);
    border-right: 2px solid #0a2035;
    padding-top: 6px;
}
.sb-title {
    background: linear-gradient(90deg, #0a2035, #163d62);
    color: var(--gold); font-size: 11px; font-weight: bold;
    padding: 5px 10px; border-top: 1px solid #2a6098;
    border-bottom: 1px solid #081828;
    text-transform: uppercase; letter-spacing: .5px; margin-top: 2px;
}
.sb-nav { list-style: none; }
.sb-nav li a {
    display: flex; align-items: flex-start; gap: 5px;
    padding: 5px 10px 5px 12px; color: #cce4ff; font-size: 11px;
    border-bottom: 1px solid #1a4060; transition: background .1s; line-height: 1.35;
    text-decoration: none !important;
}
.sb-nav li a::before { content: '•'; color: #7aadd4; flex-shrink: 0; margin-top: 1px; }
.sb-nav li a:hover { background: #0f2d4a; color: var(--gold); }
.sb-nav li a.active { background: #081828; color: var(--gold); font-weight: bold; border-left: 3px solid var(--gold); padding-left: 9px; }
.sb-info { padding: 10px; font-size: 10px; color: #7aadd4; line-height: 1.5; border-top: 1px solid #2a5a8a; margin-top: 6px; }

/* ── CONTENT ────────────────────────────────────────────────── */
.content { flex: 1; padding: 10px; min-width: 0; }

/* ── NOTICE BAR ─────────────────────────────────────────────── */
.notice {
    font-weight: bold; font-size: 12px; padding: 6px 12px;
    border: 1px solid; margin-bottom: 8px; text-align: center;
}
.notice-err  { background: #ffdddd; border-color: #cc0000; color: #cc0000; }
.notice-ok   { background: #ddffdd; border-color: #006600; color: #006600; }
.notice-info { background: #ddeeff; border-color: #2266aa; color: #114488; }

/* ── PANEL ──────────────────────────────────────────────────── */
.panel { background: #fff; border: 1px solid var(--border-dk); margin-bottom: 10px; box-shadow: 1px 1px 4px rgba(0,0,0,.15); }
.panel-hdr {
    background: linear-gradient(180deg, #5b8fc0, #3f6f9f);
    color: #fff; font-size: 12px; font-weight: bold;
    padding: 6px 12px; border-bottom: 1px solid #2a5a8a;
}
.panel-body { padding: 12px; }

/* ── FILTER TABLE ───────────────────────────────────────────── */
.ftable { border-collapse: collapse; }
.ftable td { padding: 5px 8px; vertical-align: middle; font-size: 12px; }
.flabel { font-weight: bold; color: var(--text-lbl); white-space: nowrap; }
.ftable input[type=text],
.ftable input[type=date],
.ftable select {
    border: 1px solid #8aaac8; padding: 3px 6px;
    height: 24px; background: #fff; outline: none; color: var(--text);
    min-width: 155px; font-family: var(--font); font-size: 12px;
}
.ftable input[type=date] { color-scheme: light; }
.ftable input:focus, .ftable select:focus { border-color: #1a5fa8; background: #f0f7ff; }
.date-hint { color: #7a9ab8; font-size: 10px; margin-left: 3px; }

/* ── FORM GRID (add/edit) ───────────────────────────────────── */
.fgrid { width: 100%; border-collapse: collapse; }
.fgrid td { border: 1px solid #c8daf0; padding: 5px 8px; font-size: 12px; vertical-align: middle; }
.fgrid .lbl { background: #d8e8f5; font-weight: bold; color: var(--text-lbl); white-space: nowrap; width: 1%; }
.fgrid .val { background: #fff; }
.fgrid .val input,
.fgrid .val select {
    width: 100%; border: 1px solid #8aaac8; padding: 3px 6px;
    height: 24px; background: #fff; outline: none; color: var(--text);
    font-family: var(--font); font-size: 12px;
}
.fgrid .val input[type=date] { color-scheme: light; }
.fgrid .val input:focus, .fgrid .val select:focus { border-color: #1a5fa8; background: #f0f7ff; }
.req { color: var(--red); }
.sec-bar {
    background: linear-gradient(180deg, #5b8fc0, #3f6f9f);
    color: #fff; font-weight: bold; font-size: 12px;
    padding: 4px 10px; border: 1px solid #2a5a8a; margin: 10px 0 0;
}
.form-actions {
    background: #deeaf8; border: 1px solid var(--border-dk);
    border-top: 2px solid #4070a0; padding: 8px 12px;
    display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
    display: inline-block; padding: 4px 16px; font-size: 12px; font-weight: bold;
    cursor: pointer; border: 1px solid; border-radius: 2px;
    font-family: var(--font); height: 26px; line-height: 16px;
    vertical-align: middle; text-decoration: none !important; transition: opacity .1s;
}
.btn:hover { opacity: .88; }
.btn-search { background: linear-gradient(180deg,#2a7ad0,#1a5aaa); border-color: #0f3a80; color: #fff; }
.btn-reset  { background: linear-gradient(180deg,#8a9aaa,#6a7a8a); border-color: #4a5a6a; color: #fff; }
.btn-add    { background: linear-gradient(180deg,#2a9a2a,#1a7a1a); border-color: #0f5a0f; color: #fff; }
.btn-save   { background: linear-gradient(180deg,#2a9a2a,#1a7a1a); border-color: #0f5a0f; color: #fff; }
.btn-cancel { background: linear-gradient(180deg,#8a9aaa,#6a7a8a); border-color: #4a5a6a; color: #fff; }
.btn-logout { background: linear-gradient(180deg,#8a9aaa,#6a7a8a); border-color: #4a5a6a; color: #fff; padding: 3px 10px; font-size: 11px; }
.btn-edit   { background: linear-gradient(180deg,#2a7ad0,#1a5aaa); border-color: #0f3a80; color: #fff; padding: 2px 8px; font-size: 11px; height: 22px; }
.btn-del    { background: linear-gradient(180deg,#cc3333,#aa1111); border-color: #880000; color: #fff; padding: 2px 8px; font-size: 11px; height: 22px; }

/* ── DATA TABLE ─────────────────────────────────────────────── */
.dtable { width: 100%; border-collapse: collapse; font-size: 11px; }
.dtable thead tr { background: linear-gradient(180deg, #8ab8dc, #5e98c0); }
.dtable th {
    padding: 5px 8px; text-align: center; font-size: 11px; font-weight: bold;
    color: #0a2035; border: 1px solid var(--border-dk); white-space: nowrap; line-height: 1.35;
}
.dtable td { padding: 4px 8px; border: 1px solid #c0d4e8; font-size: 11px; vertical-align: middle; }
.dtable tbody tr:nth-child(odd)  { background: #f0f5fb; }
.dtable tbody tr:nth-child(even) { background: #ddeeff; }
.dtable tbody tr:hover { background: #c8dff5; }
.dtable .center { text-align: center; }
.dtable .muted  { color: var(--text-muted); }
.dtable .acts   { display: flex; gap: 3px; justify-content: center; }

.tbl-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 8px; background: #d0e2f5;
    border: 1px solid var(--border-dk); border-top: none;
    font-size: 11px; color: var(--text-lbl); font-weight: bold;
}
.pagination { display: flex; align-items: center; gap: 2px; }
.pgbtn {
    background: linear-gradient(180deg,#c8daf0,#a8c0e0); border: 1px solid #7a9fc0;
    color: #1a3a5c; padding: 2px 6px; font-size: 11px; cursor: pointer;
    font-family: var(--font); border-radius: 1px; display: inline-block;
    text-decoration: none !important;
}
.pgbtn:hover { background: linear-gradient(180deg,#a8c8e8,#88a8d0); }
.pgbtn.active { background: linear-gradient(180deg,#2a7ad0,#1a5aaa); color:#fff; border-color:#0f3a80; }
.pgbtn.disabled { opacity:.35; pointer-events:none; }
.pginput { width: 34px; text-align:center; border:1px solid #7a9fc0; padding:2px 3px; font-size:11px; height:22px; font-family:var(--font); }

/* ── BADGES ─────────────────────────────────────────────────── */
.badge { display:inline-block; padding:1px 6px; font-size:10px; font-weight:bold; border:1px solid; border-radius:2px; white-space:nowrap; }
.badge-approved   { background:#ccffcc; border-color:#006600; color:#006600; }
.badge-rejected   { background:#ffcccc; border-color:#cc0000; color:#cc0000; }
.badge-processing { background:#cce4ff; border-color:#1a5aaa; color:#1a3a80; }
.badge-pending    { background:#fff3cc; border-color:#cc7700; color:#885500; }
.badge-on-hold    { background:#f0ccff; border-color:#6600aa; color:#440077; }

/* ── EMPTY ──────────────────────────────────────────────────── */
.empty-td { text-align:center; padding:18px; color:var(--text-muted); font-style:italic; }

/* ── AUTH PAGE ──────────────────────────────────────────────── */
.auth-wrap { display:flex; align-items:center; justify-content:center; flex:1; padding:40px 15px; }
.auth-box { background:#fff; border:1px solid var(--border-dk); width:100%; max-width:380px; box-shadow:2px 2px 8px rgba(0,0,0,.2); }
.auth-box-hdr { background:linear-gradient(180deg,#5b8fc0,#3f6f9f); color:#fff; font-size:13px; font-weight:bold; padding:7px 12px; border-bottom:1px solid #2a5a8a; }
.auth-box-body { padding:20px; }
.auth-field { margin-bottom:12px; }
.auth-field label { display:block; font-size:12px; font-weight:bold; color:var(--text-lbl); margin-bottom:3px; }
.auth-field input { width:100%; border:1px solid #8aaac8; padding:4px 8px; font-size:12px; height:26px; outline:none; background:#fff; color:var(--text); font-family:var(--font); }
.auth-field input:focus { border-color:#2266aa; background:#f0f7ff; }
.auth-btns { margin-top:14px; display:flex; gap:8px; }
.auth-link { margin-top:10px; font-size:11px; color:var(--text-muted); text-align:center; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer { background:linear-gradient(180deg,#1a3a5c,#0f2035); border-top:2px solid #0a1828; color:#7aadd4; text-align:center; font-size:10px; padding:6px; }

/* ── FLASH AUTO-DISMISS ─────────────────────────────────────── */
.flash-msg { transition: opacity .4s, transform .4s; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:768px){
    .page-wrap, .dash-wrap { flex-direction:column; }
    .sidebar { width:100%; border-right:none; border-bottom:2px solid #0a2035; }
    .top-header-inner { flex-wrap:wrap; gap:6px; min-height:auto; }
    .dtable { font-size:10px; }
}