/* HR Documents Manager v2.2 */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

.hr-docs-wrap {
    font-family: 'Sarabun','Tahoma',sans-serif;
    font-size: 14px; color: #222;
    max-width: 100%; margin: 0 auto 24px;
}
.hr-header {
    background: linear-gradient(135deg,#00b4cc 0%,#0077aa 55%,#005580 100%);
    border-radius: 8px 8px 0 0;
}
.hr-header-inner { display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px; }
.hr-header-title { font-size:19px;font-weight:700;font-style:italic;color:#fff;letter-spacing:1px;text-shadow:1px 1px 3px rgba(0,0,0,.3); }
.hr-header-icon  { font-size:20px; }

/* ── Toolbar ── */
.hr-toolbar { display:flex;align-items:center;gap:10px;padding:10px 0;flex-wrap:wrap; }
.hr-search-wrap { position:relative;flex:1;min-width:180px;max-width:380px; }
.hr-search-icon { position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none; }
.hr-search-input {
    width:100%;box-sizing:border-box;padding:8px 34px 8px 32px;
    border:1px solid #b0d4e8;border-radius:20px;
    font-family:'Sarabun',sans-serif;font-size:13.5px;background:#f5fbff;
    transition:border-color .2s,box-shadow .2s;outline:none;
}
.hr-search-input:focus { border-color:#0099cc;box-shadow:0 0 0 3px rgba(0,153,204,.15);background:#fff; }
.hr-search-clear { position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;color:#999;line-height:1;padding:0 2px; }
.hr-search-clear:hover { color:#c0392b; }
.hr-search-note { font-size:13px;color:#0077aa;padding:4px 6px 6px; }
.hr-search-note strong { color:#c0392b; }
mark.hr-hl { background:#fff176;color:#c0392b;padding:0 1px;border-radius:2px;font-weight:700; }

/* ── Buttons ── */
.hr-btn { display:inline-flex;align-items:center;gap:5px;padding:7px 15px;border:none;border-radius:5px;cursor:pointer;font-family:'Sarabun',sans-serif;font-size:13px;font-weight:600;transition:all .18s;white-space:nowrap; }
.hr-btn-add    { background:linear-gradient(135deg,#00b4cc,#0077aa);color:#fff;box-shadow:0 2px 6px rgba(0,119,170,.3); }
.hr-btn-add:hover { background:linear-gradient(135deg,#00c8e0,#0099cc);transform:translateY(-1px); }
.hr-btn-save   { background:#28a745;color:#fff; }
.hr-btn-save:hover { background:#218838; }
.hr-btn-cancel { background:#6c757d;color:#fff; }
.hr-btn-cancel:hover { background:#5a6268; }
.hr-btn-delete { background:#dc3545;color:#fff; }
.hr-btn-delete:hover { background:#c82333; }
.hr-btn-edit   { background:#ffc107;color:#333;padding:4px 10px;font-size:12px;border-radius:4px; }
.hr-btn-edit:hover { background:#e0a800; }
.hr-btn-remove { background:#dc3545;color:#fff;padding:4px 10px;font-size:12px;border-radius:4px; }
.hr-btn-remove:hover { background:#c82333; }

/* ── Table ── */
.hr-table-wrapper { overflow-x:auto;border:1px solid #b8d8e8;border-radius:0 0 4px 4px; }
.hr-table { width:100%;border-collapse:collapse;background:#fff; }
.hr-table thead th { background:linear-gradient(135deg,#1a9ec8 0%,#0d7db0 100%);color:#fff;padding:10px 11px;text-align:center;font-weight:600;font-size:13px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.18); }
.hr-table thead th:last-child { border-right:none; }
.hr-table thead th.col-title { text-align:left; }
.hr-table tbody tr:nth-child(even) { background:#f0f8ff; }
.hr-table tbody tr:hover { background:#d9f0fa !important; }
.hr-table tbody td { padding:9px 11px;border-bottom:1px solid #cce4f0;border-right:1px solid #ddeef8;vertical-align:middle;font-size:13px; }
.hr-table tbody td:last-child { border-right:none; }
.col-no    { width:50px;  text-align:center; }
.col-type  { width:70px;  text-align:center; }
.col-title { text-align:left; }
.col-size  { width:90px;  text-align:center;white-space:nowrap; }
.col-views { width:60px;  text-align:center; }
.col-date  { width:145px; text-align:center;white-space:nowrap; }
.col-action{ width:130px; text-align:center;white-space:nowrap; }

.hr-type-badge { display:inline-block;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;padding:3px 7px;border-radius:4px;min-width:38px;text-align:center; }
.hr-type-url   { background:#16a085 !important; }
.hr-type-none  { color:#bbb; }
.hr-size-none  { color:#bbb; }
.hr-doc-link   { color:#0066aa;text-decoration:none;cursor:pointer;line-height:1.45; }
.hr-doc-link:hover { color:#004488;text-decoration:underline; }
.hr-ext-link   { display:inline-block;margin-left:4px;color:#0077bb;font-size:12px;text-decoration:none; }
.hr-ext-link:hover { color:#004488; }
.hr-no-file    { color:#999;font-size:12px; }
.hr-views-badge { display:inline-block;background:#e8f4fd;color:#0077aa;border-radius:12px;padding:1px 10px;font-weight:600;font-size:13px; }

/* ── Pagination ── */
.hr-pagination { margin-top:10px;font-size:13px;color:#555;display:flex;align-items:center;gap:4px;flex-wrap:wrap; }
.hr-paging-info { margin-right:6px; }
.hr-page-link { display:inline-block;padding:3px 10px;border:1px solid #ccc;background:#fff;color:#0077aa;border-radius:3px;cursor:pointer;text-decoration:none;transition:all .15s; }
.hr-page-link:hover,.hr-page-link.active { background:#0077aa;color:#fff;border-color:#0077aa; }
.hr-page-link.active { font-weight:700;cursor:default; }
.hr-loading,.hr-empty { text-align:center;color:#888;padding:30px !important;font-size:14px; }

/* ── Modal overlay ── */
.hr-modal-overlay {
    position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999;
    display:flex;align-items:center;justify-content:center;
    animation:hrFadeIn .2s ease;
}
@keyframes hrFadeIn { from{opacity:0}to{opacity:1} }
.hr-modal { background:#fff;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.25);width:90%;max-width:520px;animation:hrSlideUp .22s ease;overflow:hidden; }
.hr-modal-sm { max-width:400px; }
@keyframes hrSlideUp { from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1} }
.hr-modal-header { background:linear-gradient(135deg,#1a9ec8,#0d7db0);color:#fff;padding:13px 20px;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:space-between; }
.hr-header-danger { background:linear-gradient(135deg,#e74c3c,#c0392b); }
.hr-modal-close { background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1;opacity:.8;transition:opacity .15s; }
.hr-modal-close:hover { opacity:1; }
.hr-modal-body { padding:20px; }
.hr-modal-body p { margin:0 0 8px;line-height:1.6; }
.hr-warn-text { color:#dc3545;font-size:12px; }
.hr-modal-footer { padding:12px 20px;background:#f8f9fa;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid #e9ecef; }

/* ── Form fields ── */
.hr-field { margin-bottom:16px; }
.hr-field label { display:block;font-weight:600;margin-bottom:5px;color:#444;font-size:13px; }
.req { color:#dc3545; }
.hr-field input[type="text"] { width:100%;box-sizing:border-box;padding:8px 12px;border:1px solid #ced4da;border-radius:5px;font-family:'Sarabun',sans-serif;font-size:14px;transition:border-color .2s;outline:none; }
.hr-field input[type="text"]:focus { border-color:#0099cc;box-shadow:0 0 0 3px rgba(0,153,204,.15); }

/* Date selects */
.hr-date-selects { display:flex;gap:8px;flex-wrap:wrap; }
.hr-sel { flex:1;min-width:80px;padding:8px 10px;border:1px solid #ced4da;border-radius:5px;font-family:'Sarabun',sans-serif;font-size:14px;background:#fff;cursor:pointer;transition:border-color .2s;appearance:auto; }
.hr-sel:focus { outline:none;border-color:#0099cc;box-shadow:0 0 0 3px rgba(0,153,204,.15); }
.hr-sel:hover { border-color:#0099cc; }

/* Attach tabs */
.hr-attach-tabs { display:flex;gap:0;margin-bottom:10px;border-radius:6px;overflow:hidden;border:1px solid #b0d0e8;width:fit-content; }
.hr-tab-btn { background:#f0f8ff;border:none;padding:7px 16px;font-family:'Sarabun',sans-serif;font-size:13px;font-weight:600;color:#0077aa;cursor:pointer;transition:all .18s;border-right:1px solid #b0d0e8; }
.hr-tab-btn:last-child { border-right:none; }
.hr-tab-btn.active { background:linear-gradient(135deg,#1a9ec8,#0d7db0);color:#fff; }
.hr-tab-btn:not(.active):hover { background:#daeef8; }

/* File drop */
.hr-file-drop { position:relative;border:2px dashed #b0d0e8;border-radius:8px;background:#f0f8ff;text-align:center;padding:18px;cursor:pointer;transition:all .2s; }
.hr-file-drop:hover,.hr-file-drop.drag-over { border-color:#0099cc;background:#e0f2fb; }
.hr-file-drop-inner { display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none; }
.hr-file-icon { font-size:26px; }
.hr-file-label { font-size:13px;color:#0077aa;font-weight:600; }
.hr-file-drop small { color:#888;font-size:11px; }
.hr-file-drop input[type="file"] { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; }
.hr-current-file { margin-top:8px;display:flex;align-items:center;gap:6px;font-size:12.5px;color:#0077aa;background:#e8f4fd;padding:5px 10px;border-radius:5px; }
.hr-current-file-note { color:#888; }

/* URL field */
.hr-url-wrap { position:relative;display:flex;align-items:center; }
.hr-url-icon { position:absolute;left:10px;font-size:15px;pointer-events:none; }
.hr-field-url { width:100%;box-sizing:border-box;padding:9px 12px 9px 34px;border:1px solid #ced4da;border-radius:5px;font-family:'Sarabun',sans-serif;font-size:13.5px;transition:border-color .2s;outline:none; }
.hr-field-url:focus { border-color:#0099cc;box-shadow:0 0 0 3px rgba(0,153,204,.15); }
.hr-url-hint { color:#888;font-size:11.5px;margin-top:5px;display:block; }

/* Form message */
.hr-form-msg { padding:8px 12px;border-radius:5px;font-size:13px;margin-top:4px; }
.hr-form-msg.success { background:#d4edda;color:#155724;border:1px solid #c3e6cb; }
.hr-form-msg.error   { background:#f8d7da;color:#721c24;border:1px solid #f5c6cb; }

/* ── Responsive ── */
@media (max-width:640px){
    .col-date,.col-size { display:none; }
    .hr-search-wrap { max-width:100%; }
    .hr-toolbar { flex-direction:column;align-items:stretch; }
    .hr-btn-add { text-align:center;justify-content:center; }
}