.ep-page { max-width:1400px; margin:auto; padding:24px; color:#142235; }
.ep-page h1,.ep-page h2,.ep-page h3,.ep-page p { margin:0; }
.ep-page button,.ep-receipt button { cursor:pointer; }
.ep-link { display:inline-flex; align-items:center; padding:8px 0; min-height:40px; color:#8c6400; font-size:13px; font-weight:600; background:transparent; border:0; text-decoration:none; }
.ep-hero { display:flex; justify-content:space-between; align-items:center; padding:28px 32px; margin-top:12px; background:linear-gradient(110deg,#142235,#294363); border-radius:14px; color:white; border-bottom:4px solid #ffbd13; }
.ep-eyebrow { font-size:10px; letter-spacing:1.5px; color:#ffce48; font-weight:700; }
#mainContent .ep-hero h1 { color:#fff; font-size:29px; font-weight:800; margin:8px 0; }.ep-hero p { color:#c2cede; font-size:13px; }.ep-hero-icon { font-size:48px; }
.ep-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }.ep-stats>div { padding:18px; display:flex; gap:16px; align-items:center; background:#edf4ff; border:1px solid #d2e0f3; border-radius:10px; }.ep-stats>div:nth-child(2) { background:#eaf8ef; border-color:#cdebd8; }.ep-stats>div:nth-child(3) { background:#fff5d8; border-color:#f1e1ab; }.ep-stats>div>span { font-size:28px; }.ep-stats small { font-size:11px; color:#607087; }.ep-stats strong { display:block; font-size:26px; font-weight:800; }
.ep-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:22px; align-items:start; }.ep-profile,.ep-section { background:#fff; border:1px solid #dce5ef; border-radius:12px; padding:24px; box-shadow:0 5px 22px #14223505; }.ep-profile { border-top:4px solid #ffbd13; }.ep-profile h2 { font-size:22px; font-weight:700; line-height:1.35; margin:12px 0 8px; overflow-wrap:anywhere; }.ep-profile>p { color:#718097; font-size:12px; line-height:1.7; }.ep-profile dl { margin:20px 0; padding:12px 0; border-block:1px solid #e1e8f0; }.ep-profile dl>div { padding:7px 0; }.ep-profile dt { color:#718097; font-size:10px; }.ep-profile dd { font-size:13px; font-weight:600; margin:3px 0 0; overflow-wrap:anywhere; }.ep-profile h3 { font-size:13px; font-weight:700; }
.ep-avatar { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:12px; flex-shrink:0; background:#142235; color:#ffcf51; font-size:15px; font-weight:700; overflow:hidden; }.ep-avatar img { width:100%; height:100%; object-fit:cover; display:block; }.ep-avatar.large { width:104px; height:104px; font-size:30px; border-radius:20px; border:3px solid #f5c44a; margin-bottom:14px; }.ep-state { display:block; width:fit-content; border-radius:5px; padding:4px 8px; font-size:10px; font-weight:600; }.ep-state.green { color:#237347; background:#e4f6eb; }.ep-state.amber { color:#986600; background:#fff1c7; }.ep-sizes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:12px 0; }.ep-sizes>div { text-align:center; padding:12px 5px; border-radius:7px; background:#edf3fa; }.ep-sizes small { font-size:10px; color:#657b95; }.ep-sizes strong { display:block; font-size:17px; margin-top:5px; }
.ep-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 14px; border:1px solid #d4dee9; border-radius:8px; background:white; font-size:12px; font-weight:600; color:#142235; text-decoration:none; text-align:center; }.ep-btn:hover { background:#f2f6fb; }.ep-btn.gold { background:#ffbd13; border-color:#ffbd13; }.ep-btn.gold:hover { background:#efad00; }.ep-btn:disabled { opacity:.45; cursor:not-allowed; }.ep-admin-actions { display:grid; gap:9px; margin-top:22px; padding-top:20px; border-top:1px solid #e1e8f0; }.ep-admin-actions .ep-link { text-align:center; justify-content:center; font-size:11px; }
.ep-content { min-width:0; }.ep-tabs { display:flex; gap:5px; background:#e5edf6; border-radius:10px; padding:5px; margin-bottom:18px; scroll-margin-top:85px; }.ep-tabs button { flex:1; min-height:43px; padding:8px; border:0; border-radius:7px; font-size:12px; font-weight:600; color:#61738c; background:transparent; }.ep-tabs [aria-current] { background:#ffbd13; color:#142235; box-shadow:0 2px 5px #1422350a; }.ep-section { margin-bottom:18px; }.ep-section-title { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:16px; }.ep-section-title h2 { font-size:17px; font-weight:700; }.ep-section-title>span { color:#718097; font-size:11px; }
.ep-assigned { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.ep-assigned article { display:flex; align-items:flex-start; gap:12px; background:#f6f9fd; padding:16px; border:1px solid #e0e8f2; border-radius:9px; }.ep-assigned article>span { font-size:25px; }.ep-assigned h3 { font-size:13px; font-weight:600; overflow-wrap:anywhere; }.ep-assigned p { font-size:11px; color:#718097; margin:6px 0; }.ep-history { display:flex; align-items:center; gap:14px; padding:18px 0; border-bottom:1px solid #eaf0f6; }.ep-history:last-child { border:0; }.ep-history-icon { display:grid; place-items:center; height:44px; width:44px; background:#edf3fa; border-radius:10px; font-size:23px; flex:none; }.ep-history>div { min-width:0; flex:1; }.ep-history small { font-size:10px; color:#718097; }.ep-history h3 { font-size:14px; font-weight:700; margin:5px 0; overflow-wrap:anywhere; }.ep-history p { font-size:11px; color:#718097; }.ep-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }.ep-tags span { padding:4px 7px; border-radius:4px; background:#edf4fc; color:#53708f; font-size:9px; }.ep-tags span:first-child { background:#eaf7ef; color:#318458; }.ep-pagination { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:16px; }.ep-pagination>span { font-size:11px; color:#718097; }
.ep-evidence-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.ep-evidence { min-width:0; border:1px solid #dce5ef; border-radius:9px; overflow:hidden; background:white; }.ep-evidence img { width:100%; height:180px; object-fit:cover; display:block; }.ep-evidence>div { padding:14px; }.ep-evidence small { font-size:10px; color:#996c00; }.ep-evidence h3 { font-size:13px; font-weight:600; margin:7px 0; overflow-wrap:anywhere; }.ep-evidence p { font-size:11px; color:#718097; margin:5px 0; overflow-wrap:anywhere; }.ep-evidence .ep-btn { margin-top:12px; width:100%; }.ep-document { display:grid; place-items:center; height:180px; background:#edf3fa; color:#647b98; }.ep-empty { padding:28px 14px; color:#718097; text-align:center; background:#f6f9fd; border-radius:8px; grid-column:1/-1; font-size:13px; }
.ep-receipt { color:#142235; }.ep-receipt h3 { font-weight:700; font-size:14px; margin:24px 0 12px; }.ep-receipt-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; padding:16px; border-radius:8px; background:#f0f5fb; }.ep-receipt-meta small { display:block; font-size:10px; color:#718097; }.ep-receipt-meta strong { display:block; font-size:12px; margin-top:4px; overflow-wrap:anywhere; }.ep-receipt-lines { border:1px solid #dce5ef; border-radius:8px; }.ep-receipt-lines article { display:flex; gap:12px; padding:14px; border-bottom:1px solid #e1e8f0; }.ep-receipt-lines article:last-child { border:0; }.ep-receipt-lines article>span { font-size:24px; }.ep-receipt-lines strong { font-size:13px; }.ep-receipt-lines p,.ep-receipt-lines small { display:block; font-size:11px; margin:4px 0; color:#718097; }.ep-notes { font-size:12px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }.ep-signature { text-align:center; padding:20px; border:1px solid #dce5ef; border-radius:8px; background:#f8fafc; }.ep-signature img { display:block; max-height:180px; max-width:100%; margin:auto; }.ep-signature p { font-size:12px; padding:18px 0; }.ep-signature small { font-size:10px; color:#718097; }
.ep-photo-editor { display:flex; align-items:center; gap:20px; background:#f1f6fc; border:1px dashed #c3d3e7; padding:16px; border-radius:10px; min-width:0; }.ep-photo-editor .ep-avatar { margin:0; }.ep-photo-editor>div { min-width:0; }.ep-photo-editor p { font-size:11px; color:#718097; margin:6px 0 10px; }.ep-photo-editor input { max-width:100%; font-size:12px; }.ep-photo-editor input::file-selector-button { border:1px solid #ccd8e7; background:white; border-radius:6px; padding:8px; margin-right:8px; cursor:pointer; }.ep-photo-editor #employeePhotoError { color:#b32940; }
@media(max-width:640px) { .ep-history { display:grid; grid-template-columns:44px minmax(0,1fr); }.ep-history>button { grid-column:2; margin-left:0; justify-self:start; }.ep-photo-editor { flex-direction:column; }.ep-photo-editor>div { width:100%; }.ep-photo-editor input { width:100%; padding:8px 0!important; }.ep-photo-editor>div:first-child { width:auto; } }
@media(max-width:1000px) { .ep-layout { grid-template-columns:260px minmax(0,1fr); gap:16px; }.ep-profile,.ep-section { padding:18px; }.ep-assigned { grid-template-columns:1fr; }.ep-history { flex-wrap:wrap; }.ep-history>button { margin-left:58px; } }
@media(max-width:640px) { .ep-page { padding:16px; }.ep-hero { padding:22px 20px; }.ep-hero h1 { font-size:24px; }.ep-hero-icon { display:none; }.ep-stats { gap:7px; margin:14px 0; }.ep-stats>div { padding:12px 8px; gap:5px; flex-direction:column; align-items:flex-start; }.ep-stats>div>span { font-size:18px; }.ep-stats small { font-size:9px; line-height:1.4; display:block; }.ep-stats strong { font-size:23px; }.ep-layout { grid-template-columns:1fr; }.ep-profile { display:grid; grid-template-columns:84px minmax(0,1fr); column-gap:14px; }.ep-profile>.ep-avatar.large { width:84px; height:84px; grid-row:1/4; margin:0; }.ep-profile>.ep-state { font-size:9px; align-self:start; }.ep-profile h2 { font-size:19px; margin:7px 0; }.ep-profile>p { font-size:11px; }.ep-profile dl,.ep-profile h3,.ep-sizes,.ep-admin-actions { grid-column:1/-1; }.ep-profile dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.ep-admin-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }.ep-admin-actions .gold,.ep-admin-actions .ep-link { grid-column:1/-1; }.ep-tabs button { font-size:11px; }.ep-evidence-grid { grid-template-columns:1fr; }.ep-photo-editor { align-items:flex-start; gap:12px; }.ep-photo-editor .ep-avatar.large { width:68px; height:68px; border-radius:12px; }.ep-photo-editor>div:first-child { flex:none; }.ep-receipt-meta { gap:10px; } }
@media(max-width:640px) { .ep-history>button { margin-left:0; } }