/* HR Portal Styles */
#ptaa-hr-portal-app { font-family: 'Source Sans 3', Inter, Arial, sans-serif; color: #14213d; min-height: 600px; }

/* Login */
.hrp-login-wrap { display: flex; justify-content: center; align-items: center; min-height: 500px; padding: 40px 20px; }
.hrp-login-card { background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(9,38,74,.15); padding: 40px; max-width: 420px; width: 100%; }
.hrp-login-header { text-align: center; margin-bottom: 28px; }
.hrp-login-header .hrp-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.hrp-login-header h1 { font-size: 26px; font-weight: 900; color: #09264a; margin: 0 0 6px; }
.hrp-login-header p { color: #555; margin: 0; font-size: 14px; }
.hrp-login-card label { display: block; font-weight: 700; color: #0f2f57; margin: 14px 0 4px; font-size: 13px; }
.hrp-login-card input { width: 100%; padding: 10px 14px; border: 2px solid #dbeefb; border-radius: 10px; font-size: 15px; outline: none; transition: border-color .2s; }
.hrp-login-card input:focus { border-color: #1266a3; }
.hrp-input-wrap { position: relative; }
.hrp-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 18px; }
.hrp-error { color: #c0392b; font-size: 13px; margin-top: 10px; text-align: center; }

/* Layout */
.hrp-layout { display: flex; min-height: 600px; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 48px rgba(9,38,74,.12); border: 1px solid #dbeefb; }
.hrp-sidebar { width: 260px; background: linear-gradient(180deg, #09264a 0%, #0f3d6b 100%); color: #fff; display: flex; flex-direction: column; flex-shrink: 0; }
.hrp-sidebar-header { padding: 22px 20px; font-size: 18px; font-weight: 900; border-bottom: 1px solid rgba(255,255,255,.1); }
.hrp-nav { flex: 1; padding: 12px 0; }
.hrp-nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 20px; color: rgba(255,255,255,.75); text-decoration: none; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; border-left: 3px solid transparent; }
.hrp-nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.hrp-nav-item.active { background: rgba(255,255,255,.12); color: #fff; border-left-color: #f0c040; }
.hrp-nav-icon { font-size: 18px; }
.hrp-sidebar-footer { padding: 16px 20px; font-size: 11px; color: rgba(255,255,255,.4); border-top: 1px solid rgba(255,255,255,.08); }
.hrp-main { flex: 1; background: #f8fbff; display: flex; flex-direction: column; }
.hrp-topbar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid #e8f2fc; background: #fff; }
.hrp-user-name { font-weight: 700; color: #0f2f57; }
#hrp-content { padding: 28px; flex: 1; overflow-y: auto; }

/* Buttons */
.hrp-btn-primary { background: linear-gradient(135deg, #d4880f, #e6a020); color: #fff; border: none; padding: 11px 22px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .1s; }
.hrp-btn-primary:hover { transform: scale(1.02); }
.hrp-btn-primary:active { transform: scale(0.97); }
.hrp-btn-outline { background: #fff; color: #0f2f57; border: 2px solid #dbeefb; padding: 9px 18px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; }
.hrp-btn-outline:hover { border-color: #1266a3; }

/* Cards */
.hrp-list { margin-top: 18px; }
.hrp-card { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #e8f2fc; border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; transition: box-shadow .15s; }
.hrp-card:hover { box-shadow: 0 4px 16px rgba(15,47,87,.08); }
.hrp-card-body { flex: 1; }
.hrp-card-body strong { color: #09264a; font-size: 15px; }
.hrp-card-body small { color: #555; }
.hrp-card-body a { color: #1266a3; font-weight: 600; text-decoration: none; }
.hrp-card-actions { display: flex; gap: 6px; }
.hrp-card-actions button { background: none; border: none; cursor: pointer; font-size: 18px; padding: 4px 8px; border-radius: 6px; transition: background .15s; }
.hrp-card-actions button:hover { background: #eef4fb; }
.hrp-empty { color: #888; font-style: italic; padding: 20px 0; }
.hrp-loading { text-align: center; padding: 40px; color: #888; }

/* Badges */
.hrp-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: #eef4fb; color: #1266a3; }
.hrp-badge-green { background: #e6f9f0; color: #1a8a5c; }
.hrp-badge-red { background: #fde8e8; color: #c0392b; }

/* Forms */
.hrp-form { max-width: 600px; margin-top: 18px; }
.hrp-form label { display: block; font-weight: 700; color: #0f2f57; margin: 14px 0 4px; font-size: 13px; }
.hrp-form input, .hrp-form select, .hrp-form textarea { width: 100%; padding: 10px 14px; border: 2px solid #dbeefb; border-radius: 10px; font-size: 14px; outline: none; font-family: inherit; }
.hrp-form input:focus, .hrp-form select:focus, .hrp-form textarea:focus { border-color: #1266a3; }
.hrp-form textarea { resize: vertical; min-height: 80px; }
.hrp-form-actions { margin-top: 20px; display: flex; gap: 12px; }

/* Responsive */
@media (max-width: 768px) {
    .hrp-layout { flex-direction: column; }
    .hrp-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .hrp-nav { display: flex; flex-wrap: wrap; padding: 8px; }
    .hrp-nav-item { padding: 8px 12px; font-size: 12px; border-left: none; border-bottom: 2px solid transparent; }
    .hrp-nav-item.active { border-bottom-color: #f0c040; }
    .hrp-sidebar-footer { display: none; }
}