:root { --primary: #2fb64a; --hover: #2daf47; --black: #212121; --muted: #6b7280; --border: #e9edf3; --shadow: 0 8px 24px rgba(15,23,42,0.06); }
html { overflow: -moz-scrollbars-none; }
html, body { font-family: 'Poppins', sans-serif; margin: 0; overflow: hidden; height: 100%; font-size: 13px; background: #f7f7f7; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-light::-webkit-scrollbar { width: 5px; }
.scrollbar-none { scrollbar-width: none; overflow-y: auto; overflow-x: hidden; }
.scrollbar-light { scrollbar-width: thin; overflow-y: auto; overflow-x: hidden; }
a { color: var(--primary); text-decoration: none; }


.login-root { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; margin-bottom: 60px; }
.login-root .main { width: 100%; display: flex; flex-direction: column; align-items: center; }
.login-root .title-wrap .title { font-size: 20px; font-weight: 600; color: var(--primary); }
.login-root .title-wrap { display: flex; justify-content: center; padding-bottom: 24px; }
.login-root .form { min-width: 475px; border-radius: 10px; box-shadow: var(--shadow); background: #fff; }
.login-root .form .form-inner { padding: 48px; box-sizing: border-box; }
.login-root .form .form-inner .lead { display: block; font-size: 16px; color: var(--muted); padding-bottom: 25px; }
.login-root .form .form-inner .field { padding-bottom: 24px; width: 100%; }
.login-root .form .form-inner .field .label-row { display: block; margin-bottom: 8px; }
.login-root .form .form-inner .field .label-row label { margin-bottom: 10px; display: block; font-size: 14px; font-weight: 600; color: var(--black); }
.login-root .form .form-inner .field input { font-size: 16px; padding: 8px 16px; width: 100%; min-height: 44px; border: none; border-radius: 4px; outline-color: rgba(47,182,74,0.5); background-color: #fff; box-shadow: rgba(60, 66, 87, 0.16) 0px 0px 0px 1px; box-sizing: border-box; }
.login-root .form .form-inner .field .btn { cursor: pointer; padding: 12.5px 20px; text-align: center; background: var(--primary); color: #fff; font-weight: 600; display: inline-block; border-radius: 4px; }
.login-root .form .form-inner .field .btn:hover { background: var(--hover); }
.login-root .footer { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; padding: 15px; width: 100%; }
.login-root .footer .footer-listing { display: flex; gap: 15px; }
.login-root .footer .footer-listing span { margin: 0; font-weight: 500; }
.login-root .footer .footer-listing a { color: var(--muted); font-size: 13px; }
.login-root .footer .footer-listing a:hover { color: var(--primary); }

.files-root { max-width: 1000px; margin: 50px auto; padding: 0 15px; }
.files-root .files-header { margin-bottom: 20px; }
.files-root .files-header .files-title { margin-bottom: 10px; font-size: 20px; font-weight: 700; }
.files-root .files-header .files-subtitle { color: var(--muted); font-size: 13px; }
.files-root .files-container .department { background: #fff; padding: 25px; margin-bottom: 20px; box-shadow: var(--shadow); border-radius: 10px; }
.files-root .files-container .department .department-header { font-size: 16px; font-weight: 600; }
.files-root .files-container .department .category { padding-top: 20px; }
.files-root .files-container .department .category .category-header { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--text); }
.files-root .files-container .department .category .category-list { display: flex; flex-direction: column; gap: 15px; }
.files-root .files-container .department .category .category-list .file-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; overflow: hidden; gap: 10px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border); transition: box-shadow .12s ease, transform .08s ease; }
.files-root .files-container .department .category .category-list .file-row:hover { box-shadow: 0 12px 30px rgba(15,23,42,0.06); }
.files-root .files-container .department .category .category-list .file-row .file-row-left { display: flex; align-items: center; gap: 10px; }
.files-root .files-container .department .category .category-list .file-row .file-row-left .file-icon img { display: block; width: 28px; height: 28px; object-fit: contain; }
.files-root .files-container .department .category .category-list .file-row .file-row-left .file-title-wrap { min-width: 0; display: flex; flex-direction: column; }
.files-root .files-container .department .category .category-list .file-row .file-row-left .file-title-wrap .file-row-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.files-root .files-container .department .category .category-list .file-row .file-row-right { display: flex; align-items: center; gap: 20px; min-width: 220px; justify-content: flex-end; }
.files-root .files-container .department .category .category-list .file-row .file-row-right .file-meta { display: flex; gap: 15px; align-items: center; color: var(--muted); font-size: 13px; white-space: nowrap; }
.files-root .files-container .department .category .category-list .file-row .file-row-right .file-meta .file-meta-item { color: var(--muted); }
.files-root .files-container .department .category .category-list .file-row .file-row-right .btn-download { display: flex; align-items: center; background: var(--primary); color: #fff; padding: 8px 12px; border-radius: 6px; text-decoration: none; font-size: 13px; border: none; cursor: pointer; }
.files-root .files-container .department .category .category-list .file-row .file-row-right .btn-download:hover { background: var(--hover); }
.files-root .files-container .department .category .category-list .no-files { color: var(--muted); font-size: 14px; padding: 10px; }

.files-root .files-container .department form input, .files-root .files-container .department form select, .files-root .files-container .department form textarea, .files-root .files-container .department .category .category-form input, .files-root .files-container .department .category .category-form select, .files-root .files-container .department .category .category-form textarea, .login-root .form .form-inner .field input, .login-root .form .form-inner .field select, .login-root .form .form-inner .field textarea { font-size: 14px; padding: 10px 12px; width: 100%; min-height: 40px; border-radius: 6px; border: 1px solid var(--border); background-color: var(--input-bg); color: var(--black); box-shadow: none; box-sizing: border-box; transition: box-shadow .12s ease, border-color .12s ease, transform .06s ease; }
.files-root .files-container .department form input:focus, .files-root .files-container .department form select:focus, .files-root .files-container .department form textarea:focus, .login-root .form .form-inner .field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 6px var(--input-focus); }
.files-root .files-container .department form input:disabled, .files-root .files-container .department form select:disabled, .files-root .files-container .department form textarea:disabled { opacity: 0.6; cursor: not-allowed; }
.files-root .files-container .department form input[type="file"], .files-root .files-container .department .category-form input[type="file"] { padding: 8px; height: auto; }
.files-root .files-container .department form label, .files-root .files-container .department .category-form label, .login-root .form .form-inner .field .label-row label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--black); }
.files-root .files-container .department .category-form .category-list, .files-root .files-container .department form .category-list { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.files-root .files-container .department .category-form .btn-download, .login-root .form .form-inner .field .btn, .files-root .files-container .department .category .file-row .file-row-right .btn-download, .admin-root .btn-download { cursor: pointer; padding: 10px 14px; text-align: center; background: var(--primary); color: #fff; font-weight: 600; border-radius: 6px; border: 1px solid rgba(0,0,0,0.04); display: inline-flex; align-items: center; gap: 8px; justify-content: center; transition: transform .08s ease, box-shadow .12s ease, background .08s ease; }
.files-root .files-container .department .category-form .btn-download:hover, .login-root .form .form-inner .field .btn:hover, .files-root .files-container .department .category .file-row .file-row-right .btn-download:hover { background: var(--hover); box-shadow: 0 8px 20px rgba(47,182,74,0.12); }
.files-root .files-container .department .category-form .btn-ghost, .admin-root .btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.files-root .files-container .department .category-list .btn-del-dept, .files-root .files-container .department .category-list .btn-del-cat, .files-root .files-container .department .category-list .btn-del-file { background: transparent; cursor: pointer; color: var(--muted); border: 1px dashed rgba(0,0,0,0.06); padding: 6px 8px; border-radius: 6px; }
.files-root .files-container .department .category-list .btn-del-dept:hover, .files-root .files-container .department .category-list .btn-del-cat:hover, .files-root .files-container .department .category-list .btn-del-file:hover { background: var(--primary); color: #fff; }
.files-root .files-container .department .field .help, .files-root .files-container .department .category-form .help { font-size: 12px; color: var(--muted); margin-top: 6px; }
.files-root .files-container .department .msg-ok, .files-root .files-container .department .msg-err, .login-root .form .form-inner .msg-ok, .login-root .form .form-inner .msg-err { padding: 10px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.files-root .files-container .department .msg-ok, .login-root .form .form-inner .msg-ok { background: rgba(47,182,74,0.08); color: var(--primary); border: 1px solid rgba(47,182,74,0.12); }
.files-root .files-container .department .msg-err, .login-root .form .form-inner .msg-err { background: rgba(220,38,38,0.06); color: #c53030; border: 1px solid rgba(220,38,38,0.1); }
.files-root .files-container .department #departments-list ul, .files-root .files-container .department #categories-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.files-root .files-container .department #departments-list ul li, .files-root .files-container .department #categories-list ul li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--border); }
.files-root .files-container .department .category-form .field input, .files-root .files-container .department .category-form .field select, .files-root .files-container .department .category-form .field textarea { width: 320px; }
.files-root .files-container .department .muted { color: var(--muted); font-size: 13px; }
.files-root .files-container .department .small { font-size: 12px; color: var(--muted); }
.files-root .files-container .department *, .login-root .form .form-inner * { box-sizing: border-box; }