* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Noto Sans', 'Microsoft YaHei', sans-serif;
background: #f5f7fb;
color: #1e293b;
line-height: 1.5;
overflow-x: auto;
transition: background 0.2s;
}
:root {
--sidebar-bg: #0b3b2f;
--sidebar-hover: #1e5a4a;
--sidebar-active: #2d6a4f;
--sidebar-sub-bg: #072c22;
--sidebar-text: #ffffff;
--topbar-start: #0b3b2f;
--topbar-end: #40916c;
--btn-bg: #2d6a4f;
--btn-hover: #40916c;
--btn-text: white;
--link-color: #3b82f6;
--link-hover: #2563eb;
--focus-ring: #74c69d;
--btn-danger-bg: #c2410c;
--btn-danger-hover: #ea580c;
}
.app-layout {
display: flex;
min-height: 100vh;
}
@media (min-width: 769px) {
.sidebar {
display: block;
width: 220px;
background: var(--sidebar-bg);
overflow-y: auto;
flex-shrink: 0;
position: relative;
}
.sidebar.collapsed {
display: none;
}
.main-container {
margin-left: 0;
width: 100%;
flex: 1;
}
.sidebar-overlay {
display: none;
}
}
.top-bar {
height: 50px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
flex-shrink: 0;
width: 100%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
position: relative;
z-index: 10;
}
.breadcrumb {
font-size: 1rem;
display: flex;
align-items: center;
gap: 8px;
color: #1e293b;
}
.breadcrumb span {
color: #1e293b;
}
.breadcrumb .nav-icon {
font-size: 1.2rem;
}
.breadcrumb span:last-child {
font-weight: 600;
}
.user-info {
display: flex;
align-items: center;
gap: 12px;
color: #1e293b;
}
.user-icon {
font-size: 1rem;
opacity: 0.8;
}
.username {
font-weight: 500;
}
.content-wrapper {
flex: 1;
padding: 0;
background: #f5f7fb;
overflow-x: auto;
}
.card {
background: white;
border-radius: 0;
padding: 20px 30px;
margin: 0;
}
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-sm {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
font-weight: 500;
transition: all 0.2s;
text-decoration: none !important;
height: 32px;
padding: 0 16px;
font-size: 0.85rem;
border-radius: 6px;
line-height: 1;
white-space: nowrap;
}
.btn-primary, .btn, .btn-secondary {
background: var(--btn-bg);
color: var(--btn-text);
}
.btn-primary:hover, .btn:hover, .btn-secondary:hover {
background: var(--btn-hover);
transform: translateY(-1px);
}
.btn-danger {
background: #dc2626;
color: white !important;
}
.btn-danger:hover {
background: #b91c1c;
color: white !important;
}
.btn-sm {
height: 28px;
padding: 0 12px;
font-size: 0.75rem;
}
.link-btn, a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-danger) {
text-decoration: none !important;
color: var(--link-color);
}
.link-btn:hover,
a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-danger):hover {
text-decoration: none !important;
color: var(--link-hover);
}
.data-table a {
text-decoration: none !important;
}
.form-control, select.form-control, input.form-control {
width: 100%;
padding: 0 12px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 0.85rem;
background: white;
height: 32px;
box-sizing: border-box;
}
select.form-select {
height: 32px;
padding: 0 12px;
font-size: 0.85rem;
border-radius: 6px;
border: 1px solid #e2e8f0;
background: white;
}
.form-control:focus {
border-color: var(--btn-bg);
outline: none;
box-shadow: 0 0 0 2px var(--focus-ring);
}
.filter-bar, .action-bar {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-bottom: 20px;
justify-content: flex-start;
}
.filter-bar .btn, .filter-bar select, .filter-bar input:not([type="checkbox"]),
.filter-bar .form-control {
height: 32px;
padding: 0 12px;
}
.filter-bar select {
padding: 0 24px 0 12px;
}
.filter-bar :where(input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]):not([type="file"]),
select,
.form-control,
.form-select),
.action-bar :where(input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]):not([type="file"]),
select,
.form-control,
.form-select) {
width: 180px;
min-width: 160px;
max-width: 200px;
height: 32px;
vertical-align: middle;
}
input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select.form-select,
select.form-control {
max-width: 200px;
min-width: 160px;
height: 32px;
vertical-align: middle;
}
.filter-bar, .action-bar {
gap: 10px;
align-items: center;
row-gap: 10px;
}
.filter-bar .btn, .action-bar .btn {
height: 32px;
padding: 0 12px;
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.filter-bar label, .action-bar label {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
white-space: nowrap;
}
.data-table td input.form-control,
.data-table td select.form-select,
.data-table td select,
td input.form-control,
td select.form-select,
td select {
min-width: 0;
max-width: none;
width: 100%;
}
.filter-bar, .action-bar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px 10px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.filter-bar .filter-group,
.action-bar .filter-group {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.filter-bar .filter-actions,
.action-bar .filter-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-left: auto;
}
.filter-bar:has(> .filter-actions),
.action-bar:has(> .filter-actions) {
justify-content: space-between;
}
.filter-bar .filter-group--nowrap,
.action-bar .filter-group--nowrap {
flex-wrap: nowrap;
min-width: 0;
flex: 1 1 auto;
}
.filter-bar .filter-group--nowrap > .btn,
.filter-bar .filter-group--nowrap > label,
.filter-bar .filter-group--nowrap > a {
flex: 0 0 auto;
}
.filter-bar .filter-group--nowrap > .form-control,
.filter-bar .filter-group--nowrap > .form-select,
.filter-bar .filter-group--nowrap > select,
.filter-bar .filter-group--nowrap > input {
min-width: 0;
flex: 0 1 auto;
}
.filter-bar .filter-actions--block,
.action-bar .filter-actions--block {
flex-basis: 100%;
margin-left: 0;
justify-content: flex-start;
}
.filter-bar .filter-actions--block > .push-right,
.action-bar .filter-actions--block > .push-right {
margin-left: auto;
}
.filter-bar .filter-group > label,
.filter-bar .filter-actions > label {
white-space: nowrap;
}
:where(
select:not([multiple]),
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]),
input[type="date"],
input[type="month"],
input[type="time"],
input[type="number"]
) {
min-height: 32px;
box-sizing: border-box;
padding: 0 10px;
border: 1px solid #e2e8f0;
border-radius: 6px;
background: #fff;
color: #1e293b;
font-size: 0.85rem;
line-height: 1.2;
vertical-align: middle;
}
:where(.form-group input, .form-group select) {
height: auto;
min-height: 32px;
}
:where(select:not([multiple])) {
padding-right: 26px;
}
textarea.form-control {
width: 100%;
min-height: 90px;
padding: 8px 12px;
height: auto;
}
.filter-bar label {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
}
.filter-bar input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--btn-bg);
}
.filter-bar .search-group {
display: flex;
gap: 8px;
align-items: center;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
background: white;
}
.data-table th, .data-table td {
padding: 12px 8px;
text-align: center;
border-bottom: 1px solid #e2e8f0;
white-space: nowrap;
}
.data-table th {
background: #f8fafc;
font-weight: 600;
}
.data-table tr:hover {
background: #f1f5f9;
}
.pagination-wrapper,
.pagination {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 6px;
margin: 14px 0 3px;
padding-top: 12px;
border-top: 1px solid #eef2f7;
font-size: 0.8rem;
color: #7b8794;
}
.pagination-wrapper > span:first-child,
.pagination-wrapper > .info:first-child,
.pagination > span:first-child,
.pagination > .info:first-child {
color: #8a96a6;
font-size: 0.8rem;
margin-right: 2px;
}
.pagination-wrapper > div,
.pagination > div {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.pagination-wrapper button,
.pagination-wrapper a,
.pagination-wrapper .btn,
.pagination-wrapper .btn-sm,
.pagination button,
.pagination a,
.pagination .btn,
.pagination .btn-sm {
height: 30px;
min-width: 32px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #e6ebf3;
border-radius: 7px;
background: #fff;
color: #33475f;
font-size: 0.8rem;
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pagination-wrapper button:hover,
.pagination-wrapper a:hover,
.pagination button:hover,
.pagination a:hover {
border-color: #93c5fd;
background: #f5f9ff;
color: #1d4ed8;
box-shadow: 0 2px 6px -2px rgba(59, 130, 246, 0.35);
}
.pagination-wrapper button:active,
.pagination-wrapper a:active,
.pagination button:active,
.pagination a:active {
transform: translateY(1px);
}
.pagination-wrapper .active,
.pagination-wrapper .current,
.pagination-wrapper .is-active,
.pagination .active,
.pagination .current,
.pagination .is-active {
border-color: #2563eb;
background: linear-gradient(180deg, #3b82f6, #2563eb);
color: #fff;
box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.5);
}
.pagination-wrapper button:disabled,
.pagination-wrapper .disabled,
.pagination-wrapper [disabled],
.pagination button:disabled,
.pagination .disabled,
.pagination [disabled] {
color: #c2ccda;
background: #f8fafc;
border-color: #eef2f7;
box-shadow: none;
cursor: not-allowed;
}
.pagination-wrapper button:disabled:hover,
.pagination button:disabled:hover {
color: #c2ccda;
background: #f8fafc;
border-color: #eef2f7;
box-shadow: none;
}
.pagination-wrapper select,
.pagination-wrapper input,
.pagination select,
.pagination input {
height: 30px;
padding: 0 9px;
border: 1px solid #e6ebf3;
border-radius: 7px;
background: #fff;
color: #33475f;
font-size: 0.8rem;
}
.pagination-wrapper input {
width: 52px;
text-align: center;
}
.pagination-wrapper .pager-btns, .pagination .pager-btns {
display: flex;
align-items: center;
gap: 5px;
}
.pagination-wrapper .pager-btn, .pagination .pager-btn {
height: 30px;
min-width: 32px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #e6ebf3;
border-radius: 7px;
background: #fff;
color: #33475f;
font-size: 0.8rem;
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pagination-wrapper .pager-btn:hover, .pagination .pager-btn:hover {
border-color: #93c5fd;
background: #f5f9ff;
color: #1d4ed8;
box-shadow: 0 2px 6px -2px rgba(59, 130, 246, 0.35);
}
.pagination-wrapper .pager-btn.is-disabled, .pagination-wrapper .pager-btn.is-disabled:hover, .pagination .pager-btn.is-disabled, .pagination .pager-btn.is-disabled:hover {
color: #c2ccda;
background: #f8fafc;
border-color: #eef2f7;
box-shadow: none;
cursor: not-allowed;
}
.pagination-wrapper .pager-jump, .pagination .pager-jump {
display: inline-flex;
align-items: center;
gap: 5px;
color: #8a96a6;
font-size: 0.8rem;
white-space: nowrap;
}
.pagination-wrapper .pager-input, .pagination .pager-input {
width: 56px;
height: 30px;
padding: 0 5px;
text-align: center;
border: 1px solid #e6ebf3;
border-radius: 7px;
background: #fff;
color: #33475f;
font-size: 0.8rem;
-moz-appearance: textfield;
}
.pagination-wrapper .pager-input::-webkit-outer-spin-button, .pagination-wrapper .pager-input::-webkit-inner-spin-button, .pagination .pager-input::-webkit-outer-spin-button, .pagination .pager-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.pagination-wrapper .pager-input:focus, .pagination .pager-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.pagination-wrapper .pager-total, .pagination .pager-total {
color: #8a96a6;
font-size: 0.8rem;
white-space: nowrap;
}
.pagination-wrapper input[type="number"], .pagination input[type="number"], .pagination input[type="number"], .pagination input[type="number"] {
width: 56px;
height: 30px;
padding: 0 5px;
text-align: center;
border: 1px solid #e6ebf3;
border-radius: 7px;
background: #fff;
color: #33475f;
font-size: 0.8rem;
}
.pagination-wrapper input[type="number"]:focus, .pagination input[type="number"]:focus, .pagination input[type="number"]:focus, .pagination input[type="number"]:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.pagination-wrapper .pager-perpage select, .pagination .pager-perpage select {
height: 30px;
padding: 0 9px;
border: 1px solid #e6ebf3;
border-radius: 7px;
background: #fff;
color: #33475f;
font-size: 0.8rem;
}
.pagination-wrapper .page-num, .pagination .page-num {
min-width: 30px;
padding: 0 6px;
}
.nav-menu {
list-style: none;
padding: 0;
margin: 0;
}
.logo {
height: 50px;
line-height: 50px;
padding: 0 20px;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: white;
}
.nav-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-item > a {
display: flex;
align-items: center;
padding: 10px 20px;
color: white;
text-decoration: none;
transition: background 0.2s;
cursor: pointer;
}
.nav-item > a:hover {
background: var(--sidebar-hover);
}
.nav-item.active > a {
background: var(--sidebar-active);
border-left: 4px solid white;
}
.nav-item .icon {
width: 24px;
margin-right: 12px;
color: white;
}
.nav-item .text {
flex: 1;
color: white;
}
.nav-item .arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5em;
font-size: 1rem;
line-height: 1;
}
.nav-item .arrow::before {
content: "»";
transition: content 0.2s;
}
.nav-item.open .arrow::before {
content: "«";
}
.sub-menu {
list-style: none;
padding-left: 44px;
background: var(--sidebar-sub-bg);
display: none;
}
.nav-item.open .sub-menu {
display: block;
}
.sub-menu li a {
display: block;
padding: 8px 20px;
color: white !important;
text-decoration: none !important;
font-size: 0.85rem;
}
.sub-menu li a::before {
content: "📄";
margin-right: 8px;
opacity: 0.7;
}
.sub-menu li a:hover {
color: white !important;
background: transparent;
}
.sub-menu li a.active {
font-weight: bold !important;
color: white !important;
background: transparent;
}
.sidebar a,
.sidebar a:link,
.sidebar a:visited,
.sidebar a:hover,
.sidebar a:active,
.sidebar .sub-menu li a,
.sidebar .sub-menu li a:link,
.sidebar .sub-menu li a:visited,
.sidebar .sub-menu li a:hover,
.sidebar .sub-menu li a:active {
color: #ffffff !important;
text-decoration: none !important;
}
.toast-container {
position: fixed;
top: 115px;
right: 20px;
z-index: 99999;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 320px;
pointer-events: none;
}
.toast {
background: #fff;
border-radius: 12px;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-left: 4px solid;
pointer-events: auto;
transform: translateX(120%);
transition: transform 0.3s ease, opacity 0.2s ease;
opacity: 0;
}
.toast.show {
transform: translateX(0);
opacity: 1;
}
.toast-success {
border-left-color: var(--btn-bg, #2e7d32);
background: #f0fdf4;
}
.toast-error {
border-left-color: #dc2626;
background: #fef2f2;
}
.toast-warning {
border-left-color: #f59e0b;
background: #fffbeb;
}
.toast-info {
border-left-color: #3b82f6;
background: #eff6ff;
}
.toast-content {
flex: 1;
font-size: 0.9rem;
color: #1e293b;
}
.toast-close {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: #94a3b8;
padding: 0 4px;
}
.toast-close:hover {
color: #475569;
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
margin-right: 10px;
color: #1e293b;
}
@media (max-width: 768px) {
.menu-toggle {
display: inline-block;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 260px;
background: var(--sidebar-bg);
transform: translateX(-100%);
transition: transform 0.2s ease;
z-index: 1001;
overflow-y: auto;
}
.sidebar.show {
transform: translateX(0) !important;
}
.sidebar.open {
transform: translateX(0) !important;
}
.main-container {
width: 100%;
margin-left: 0;
}
.top-bar {
padding: 0 12px;
}
.filter-bar {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.filter-bar .search-group {
margin-left: 0;
display: flex;
gap: 8px;
}
.action-bar {
flex-wrap: wrap;
gap: 8px;
}
.action-bar .btn,
.action-bar .btn-primary,
.action-bar .btn-secondary,
.action-bar .btn-danger {
font-size: 0.75rem;
padding: 6px 12px;
height: auto;
}
.data-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.data-table {
min-width: 700px;
font-size: 0.75rem;
}
.data-table th,
.data-table td {
padding: 8px 4px;
white-space: nowrap;
}
.card {
padding: 12px;
}
.form-control, select.form-control {
min-height: 40px;
font-size: 0.85rem;
}
.pagination-wrapper {
flex-direction: column;
align-items: center;
gap: 12px;
}
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
display: none;
}
.sidebar-overlay.active {
display: block;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.filter-bar {
flex-wrap: wrap;
}
.data-table {
font-size: 0.8rem;
}
.data-table th,
.data-table td {
padding: 8px 6px;
}
}
.content-wrapper,
.card,
.teacher-table-container,
.student-table-container,
.exam-table-container,
.data-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100%;
}
@media (max-width: 768px) {
.data-table,
.data-table th,
.data-table td {
white-space: nowrap;
}
.data-table {
min-width: 600px;
}
}
.main-container {
overflow-x: auto;
}
.file-name,
.file-item .file-name,
.tree-node .file-name,
.package-file-list .file-name {
word-break: break-all;
white-space: normal;
line-height: 1.4;
display: inline-block;
max-width: 100%;
}
.download-table .file-name-cell {
word-break: break-word;
white-space: normal;
max-width: 300px;
}
.tree-node-content {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 4px;
}
.tree-node-content .file-name {
flex: 1;
min-width: 0;
}
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-danger { color: #e53e3e; }
.u-text-red { color: red; }
.u-w160 { width: 160px; }
.u-w150 { width: 160px; }
.u-w200 { width: 200px; }
.u-w60 { width: 60px; }
.u-h400 { height: 400px; }
.u-hidden { display: none; }
.u-inline { display: inline; }
.u-between { justify-content: space-between; }
.u-flex1 { flex: 1; }
.u-p20 { padding: 20px; }
.arr-badge {
display: inline-flex;
align-items: center;
gap: 5px;
height: 22px;
padding: 0 9px;
border-radius: 7px;
font-size: .72rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.arr-badge.draft     { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.arr-badge.confirmed { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.arr-badge.old       { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.arr-badge.warn      { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.arr-badge.err       { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.arr-steps {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin: 4px 0 18px;
}
.arr-steps .st {
display: inline-flex;
align-items: center;
gap: 7px;
color: #94a3b8;
font-size: .8rem;
}
.arr-steps .st .dot {
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .72rem;
font-weight: 700;
background: #f1f5f9;
color: #94a3b8;
border: 1px solid #e2e8f0;
}
.arr-steps .st.done .dot   { background: #10b981; color: #fff; border-color: #10b981; }
.arr-steps .st.active .dot { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.arr-steps .st.done, .arr-steps .st.active { color: #334155; font-weight: 600; }
.arr-steps .sep { width: 26px; height: 2px; background: #e8eef7; border-radius: 2px; }
.arr-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin: 6px 0 18px;
}
.arr-stat {
border: 1px solid #edf1f7;
border-radius: 12px;
padding: 12px 14px;
background: linear-gradient(140deg, #fff 50%, #f8fbff 100%);
}
.arr-stat .v { font-size: 1.35rem; font-weight: 700; color: #1b2432; font-variant-numeric: tabular-nums; }
.arr-stat .v small { font-size: .74rem; font-weight: 500; color: #7b8794; margin-left: 3px; }
.arr-stat .k { font-size: .74rem; color: #7b8794; margin-top: 3px; }
.arr-stat.bad .v { color: #b91c1c; }
.arr-stat.good .v { color: #047857; }
.arr-bar { height: 6px; border-radius: 4px; background: #eef2f7; overflow: hidden; margin-top: 8px; }
.arr-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #34d399, #10b981); }
.arr-table td, .arr-table th { vertical-align: middle; }
.arr-table tbody tr:nth-child(even) { background: #fbfdff; }
.arr-table tbody tr:hover { background: #f5faff; }
.arr-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.arr-table .ops { white-space: nowrap; }
.arr-table .ops .btn { height: 26px; padding: 0 10px; font-size: .74rem; margin-right: 4px; }
.arr-tabs { display: flex; gap: 6px; border-bottom: 1px solid #edf1f7; margin: 6px 0 12px; flex-wrap: wrap; }
.arr-tabs button {
height: 34px;
padding: 0 16px;
border: none;
background: transparent;
color: #64748b;
font-size: .85rem;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.arr-tabs button.active { color: #1d4ed8; border-bottom-color: #3b82f6; font-weight: 600; }
.arr-panel { display: none; }
.arr-panel.active { display: block; }
.arr-empty { padding: 36px 20px; text-align: center; color: #94a3b8; }
.arr-empty .ico { font-size: 2.2rem; margin-bottom: 8px; }
.chk-sec { margin: 14px 0 4px; }
.chk-h { font-size: .86rem; font-weight: 600; color: #1b2432; margin-bottom: 6px; }
.chk-note { font-weight: 400; font-size: .74rem; color: #94a3b8; margin-left: 8px; }
.chk-wrap { max-height: 300px; overflow: auto; border: 1px solid #edf1f7; border-radius: 10px; }
.chk-table { font-size: .8rem; }
.chk-table th { position: sticky; top: 0; background: #f8fafc; z-index: 1; }
.chk-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chk-tag { padding: 2px 10px; border-radius: 7px; font-size: .78rem; }
.chk-tag.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
:root {
--topbar-h: 56px;
--sidebar-w: 240px;
--sidebar-w-rail: 64px;
--shell-max: 1320px;
--border-soft: #e4ebf4;
--ink-strong: #16243a;
--ink-muted: #5f7387;
}
.top-bar {
height: var(--topbar-h);
padding: 0 18px;
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border-bottom: 1px solid var(--border-soft);
box-shadow: none;
}
.top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.icon-btn {
width: 34px; height: 34px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid transparent; border-radius: 9px;
background: transparent; color: #46596e; font-size: 1.05rem; cursor: pointer;
transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: #f2f7fc; border-color: #e4ebf4; }
.breadcrumb {
font-size: .9rem; color: var(--ink-muted);
display: flex; align-items: center; gap: 6px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.breadcrumb span:last-child { color: var(--ink-strong); font-weight: 600; }
.breadcrumb span { color: var(--ink-muted); }
.top-search {
position: relative; flex: 1 1 auto; max-width: 430px; margin: 0 4px;
min-width: 0;
}
.top-search .s-icon {
position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
font-size: .85rem; color: #93a2b5; pointer-events: none;
}
.top-search input {
width: 100%; height: 34px; box-sizing: border-box;
padding: 0 12px 0 32px;
border: 1px solid var(--border-soft); border-radius: 9px;
background: #f7fafd; color: var(--ink-strong); font-size: .84rem;
transition: background .15s, border-color .15s, box-shadow .15s;
}
.top-search input::placeholder { color: #9fafc0; }
.top-search input:focus {
outline: none; background: #fff; border-color: #2b62a0;
box-shadow: 0 0 0 3px rgba(43, 98, 160, .10);
}
.search-results {
display: none; position: absolute; left: 0; right: 0; top: 40px; z-index: 80;
background: #fff; border: 1px solid var(--border-soft); border-radius: 10px;
box-shadow: 0 12px 28px rgba(20, 45, 80, .14);
max-height: 320px; overflow: auto; padding: 6px;
}
.search-results.show { display: block; }
.search-results a {
display: block; padding: 8px 10px; border-radius: 7px;
color: #33475c; font-size: .85rem; text-decoration: none;
}
.search-results a:hover, .search-results a.on { background: #f2f7fc; color: #1f4a78; }
.search-results .sr-group { font-size: .72rem; color: #93a2b5; padding: 6px 10px 2px; }
.search-results .sr-empty { padding: 12px 10px; color: #93a2b5; font-size: .82rem; }
.top-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.user-menu { position: relative; }
.user-btn {
display: inline-flex; align-items: center; gap: 7px;
height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px;
background: transparent; color: #33475c; font-size: .86rem; cursor: pointer;
}
.user-btn:hover { background: #f2f7fc; border-color: #e4ebf4; }
.user-btn .caret { font-size: .7rem; color: #93a2b5; }
.user-dropdown {
display: none; position: absolute; right: 0; top: 40px; z-index: 90;
min-width: 160px; padding: 6px;
background: #fff; border: 1px solid var(--border-soft); border-radius: 10px;
box-shadow: 0 12px 28px rgba(20, 45, 80, .14);
}
.user-menu.open .user-dropdown { display: block; }
.user-dropdown a {
display: block; padding: 8px 10px; border-radius: 7px;
color: #33475c; font-size: .85rem; text-decoration: none;
}
.user-dropdown a:hover { background: #f2f7fc; color: #1f4a78; }
@media (min-width: 769px) {
.sidebar { width: var(--sidebar-w); }
.sidebar.collapsed { display: block; width: var(--sidebar-w-rail); }
.sidebar.collapsed .sidebar-brand { padding: 14px 0; text-align: center; }
.sidebar.collapsed .sidebar-brand .sb-sub { display: none; }
.sidebar.collapsed .nav-item > a { justify-content: center; padding: 12px 0; }
.sidebar.collapsed .nav-item .icon { margin-right: 0; }
.sidebar.collapsed .nav-item .text,
.sidebar.collapsed .nav-item .arrow { display: none; }
.sidebar.collapsed .sub-menu { display: none !important; }
}
.sidebar-brand {
padding: 16px 18px 12px;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sidebar-brand .sb-title {
font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: .5px;
}
.sidebar-brand .sb-sub {
margin-top: 3px; font-size: .72rem; color: rgba(255, 255, 255, .62);
letter-spacing: .5px;
}
.nav-menu { padding: 8px 0 16px; margin: 0; list-style: none; }
.nav-item { border-bottom: 0; }
.nav-item > a { padding: 11px 18px; border-radius: 0; }
.nav-item.has-active > a {
background: rgba(255, 255, 255, .08);
box-shadow: inset 3px 0 0 #7db4e2;
}
.sub-menu { padding-left: 46px; }
.sub-menu li a { padding: 8px 18px 8px 12px; border-radius: 0 16px 16px 0; }
.sub-menu li a.active {
background: rgba(255, 255, 255, .12) !important;
font-weight: 600 !important;
}
.content-wrapper { padding: 0; background: #fff; }
.page-shell {
max-width: none;
width: 100%;
min-height: calc(100vh - var(--topbar-h));
margin: 0;
padding: 18px 22px 30px;
box-sizing: border-box;
}
.card {
border-radius: 12px;
border: 1px solid #eaeff6;
box-shadow: 0 2px 8px rgba(20, 40, 70, .06);
margin-bottom: 16px;
}
.card:last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
.page-shell { padding: 16px 16px 26px; }
.top-search { max-width: 260px; }
}
@media (max-width: 768px) {
.top-search { display: none; }
.top-bar { padding: 0 12px; gap: 8px; }
.page-shell { padding: 14px 12px 24px; }
.sidebar-brand { padding: 14px 16px 10px; }
}
.sidebar {
background:
linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,.22) 100%),
var(--sidebar-bg);
}
.sidebar-brand {
display: flex; align-items: center; gap: 10px;
padding: 18px 14px 14px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.sb-mark {
width: 34px; height: 34px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
color: #fff; font-size: 15px; font-weight: 700;
}
.sb-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-title { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .5px; }
.sb-sub {
margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.55);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-menu { padding: 8px 0 18px; }
.nav-item > a {
margin: 2px 8px; padding: 8px 10px; border-radius: 9px;
gap: 8px; transition: background .15s ease;
}
.nav-item > a:hover { background: rgba(255,255,255,.08); }
.nav-item .icon {
width: 28px; height: 28px; flex: 0 0 auto; margin-right: 8px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px; background: rgba(255,255,255,.08);
font-size: 14px;
}
.nav-item .text { font-size: 14px; letter-spacing: .2px; }
.nav-item .arrow { width: 16px; opacity: .6; }
.nav-item .arrow::before {
content: '›'; font-size: 16px;
display: inline-block; transition: transform .18s ease;
}
.nav-item.open .arrow::before { transform: rotate(90deg); }
.nav-item.open > a { background: rgba(255,255,255,.08); }
.nav-item.has-active > a {
background: rgba(255,255,255,.12);
box-shadow: inset 3px 0 0 #8ec5ef;
}
.nav-item.has-active .icon { background: rgba(255,255,255,.16); }
.sub-menu {
background: transparent;
padding: 1px 8px 6px 46px;
}
.sub-menu li a {
padding: 7px 10px; border-radius: 8px;
font-size: 13px; color: rgba(255,255,255,.78) !important;
transition: background .15s ease, color .15s ease;
}
.sub-menu li a::before {
content: ''; display: inline-block;
width: 5px; height: 5px; border-radius: 50%;
background: rgba(255,255,255,.32);
margin-right: 8px; vertical-align: 2px;
}
.sub-menu li a:hover { background: rgba(255,255,255,.07); color: #fff !important; }
.sub-menu li a.active {
background: rgba(255,255,255,.14) !important;
color: #fff !important; font-weight: 600 !important;
}
.sub-menu li a.active::before { background: #8ec5ef; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
@media (min-width: 769px) {
.sidebar.collapsed .sidebar-brand { padding: 16px 0 12px; justify-content: center; }
.sidebar.collapsed .sb-meta { display: none; }
.sidebar.collapsed .nav-item > a { margin: 3px 8px; padding: 8px; justify-content: center; }
.sidebar.collapsed .nav-item .icon { margin-right: 0; width: 30px; height: 30px; }
}
@media (max-width: 1100px) {
.top-search { max-width: 220px; }
}
@media (max-width: 900px) {
.filter-bar, .action-bar { gap: 10px; }
.filter-bar .form-control,
.filter-bar .form-select,
.filter-bar input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.filter-bar select,
.action-bar .form-control,
.action-bar .form-select {
width: 100% !important;
max-width: none !important;
flex: 1 1 170px;
box-sizing: border-box;
}
.data-table td .btn, .data-table td a.btn, .data-table td button {
margin: 2px 4px 2px 0;
}
.data-table td:last-child { white-space: normal; }
}
@media (max-width: 680px) {
.filter-bar, .action-bar {
flex-direction: column; align-items: stretch;
}
.filter-bar > *, .action-bar > * { width: 100%; }
.filter-bar .btn, .action-bar .btn { width: 100%; }
.filter-bar label { width: auto; }
.card { padding: 14px 14px; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.table-responsive { scrollbar-width: thin; }
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: #cfdae8; border-radius: 4px; }
.table-responsive::-webkit-scrollbar-track { background: #f5f8fc; }
@media (max-width: 680px) {
.data-table { font-size: 12px; }
.data-table th, .data-table td { padding: 6px 8px; }
.data-table td .btn, .data-table td a.btn { height: 26px; padding: 0 8px; font-size: .72rem; }
}
.sidebar {
background:
linear-gradient(180deg, rgba(12,20,32,.28) 0%, rgba(12,20,32,.62) 100%),
var(--sidebar-bg);
box-shadow: inset -1px 0 0 rgba(255,255,255,.05);
}
.sidebar-brand {
display: flex; align-items: center; gap: 10px;
padding: 20px 18px 16px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.sb-mark {
width: auto; height: auto; flex: 0 0 auto;
background: none; border: 0; border-radius: 0;
font-size: 18px; font-weight: 600; color: rgba(255,255,255,.9);
letter-spacing: 0;
}
.sb-meta { line-height: 1.3; }
.sb-title { font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.94); letter-spacing: .4px; }
.sb-sub { margin-top: 2px; font-size: 11.5px; color: rgba(255,255,255,.42); letter-spacing: .5px; }
.nav-menu { padding: 10px 10px 20px; }
.nav-item > a {
margin: 0; padding: 9px 10px;
border-radius: 8px; gap: 10px;
transition: background .16s ease;
}
.nav-item > a:hover { background: rgba(255,255,255,.055); }
.nav-item.open > a { background: rgba(255,255,255,.045); }
.nav-item.has-active > a { background: rgba(255,255,255,.08); box-shadow: none; }
.nav-item .icon {
width: 20px; height: 20px; flex: 0 0 auto; margin-right: 9px;
display: inline-flex; align-items: center; justify-content: center;
background: none; border-radius: 0;
font-size: 15px; line-height: 1;
filter: saturate(.85);
opacity: .9;
}
.nav-item .text { font-size: 13.5px; letter-spacing: .2px; color: rgba(255,255,255,.82); }
.nav-item.has-active .text { color: #fff; }
.nav-item .arrow {
width: 14px; height: 14px; position: relative; opacity: 1;
}
.nav-item .arrow::before {
content: ''; position: absolute; left: 3px; top: 4px;
width: 5px; height: 5px;
border-right: 1.5px solid rgba(255,255,255,.45);
border-bottom: 1.5px solid rgba(255,255,255,.45);
transform: rotate(45deg);
transition: transform .2s ease, border-color .2s ease;
}
.nav-item.open .arrow::before {
transform: rotate(-135deg); top: 6px;
border-color: rgba(255,255,255,.7);
}
.sub-menu {
position: relative;
background: transparent;
padding: 2px 8px 8px 40px;
}
.sub-menu::before {
content: ''; position: absolute; left: 20px; top: 6px; bottom: 12px;
width: 1px; background: rgba(255,255,255,.10);
}
.sub-menu li a {
padding: 7px 10px; border-radius: 6px;
font-size: 13px; font-weight: 400;
color: rgba(255,255,255,.66) !important;
transition: background .15s ease, color .15s ease;
}
.sub-menu li a::before { content: none; }
.sub-menu li a:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.95) !important; }
.sub-menu li a.active {
background: rgba(255,255,255,.10) !important;
color: #fff !important; font-weight: 500 !important;
box-shadow: inset 2px 0 0 #7db4e2;
}
@media (min-width: 769px) {
.sidebar.collapsed .sidebar-brand { padding: 20px 0 16px; justify-content: center; }
.sidebar.collapsed .sb-meta { display: none; }
.sidebar.collapsed .sb-mark { font-size: 17px; }
.sidebar.collapsed .nav-item > a { padding: 9px; justify-content: center; }
.sidebar.collapsed .nav-item .icon { margin-right: 0; width: 22px; height: 22px; font-size: 16px; }
}
.sb-logo {
width: 30px; height: 30px; flex: 0 0 auto;
border-radius: 8px; object-fit: contain;
background: rgba(255,255,255,.06);
}
.sb-mark { display: none; }
.nav-item .arrow { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.nav-item .arrow::before {
content: '›'; position: static; width: auto; height: auto;
border: 0; transform: none; opacity: .55;
font-size: 15px; line-height: 1;
transition: transform .18s ease, opacity .18s ease;
}
.nav-item.open .arrow::before { content: '›'; transform: rotate(90deg); opacity: .85; }
@media (min-width: 769px) {
.sidebar.collapsed .sb-logo { width: 28px; height: 28px; margin: 0 auto; }
}
.nav-item .icon {
filter: grayscale(1) brightness(1.75);
opacity: .66;
transition: opacity .16s ease, filter .16s ease;
}
.nav-item > a:hover .icon,
.nav-item.open .icon,
.nav-item.has-active .icon {
opacity: .95;
}
.sidebar-brand { gap: 12px; }
.sb-logo { width: 32px; height: 32px; }
.nav-item .icon { opacity: .72; }
.sub-menu li a { line-height: 1.5; }
.nav-item + .nav-item { margin-top: 1px; }
.btn-danger { background: var(--btn-danger-bg); color: #fff; }
.btn-danger:hover { background: var(--btn-danger-hover); }
.data-table .btn-sm.btn-danger { background: var(--btn-danger-bg); }
.data-table .btn-sm.btn-danger:hover { background: var(--btn-danger-hover); }
:root {
--ui-gap: 16px;
--ui-radius: 12px;
--ui-border: #e4edf7;
--ui-ink: #16243a;
--ui-sub: #6b7f92;
--ui-bg-soft: #f7fbff;
--ui-primary: #2d6a4f;
}
.ui-page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.ui-page-header .ui-title-wrap { min-width: 0; }
.ui-page-header h1 {
margin: 0;
font-size: 1.22rem;
font-weight: 700;
color: var(--ui-ink);
line-height: 1.3;
}
.ui-page-header .ui-sub {
margin-top: 5px;
font-size: .8rem;
color: var(--ui-sub);
}
.ui-page-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ui-card {
background: #fff;
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius);
box-shadow: 0 4px 16px rgba(20, 50, 85, .05);
padding: 18px 20px;
}
.ui-card + .ui-card { margin-top: var(--ui-gap); }
.ui-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.ui-toolbar .form-select,
.ui-toolbar .form-control,
.ui-toolbar .form-input {
height: 32px;
font-size: .82rem;
}
.ui-toolbar .ui-toolbar-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ui-table-wrap {
width: 100%;
overflow-x: auto;
border: 1px solid var(--ui-border);
border-radius: 10px;
background: #fff;
}
.ui-table-wrap > table { margin: 0; }
.ui-empty {
padding: 36px 16px;
text-align: center;
color: #93a5b8;
font-size: .86rem;
}
.ui-empty .ui-empty-title {
font-size: .95rem;
color: #5f7387;
margin-bottom: 6px;
font-weight: 600;
}
.ui-empty .ui-empty-actions { margin-top: 14px; }
.ui-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 9px;
border-radius: 7px;
font-size: .75rem;
line-height: 1.6;
border: 1px solid transparent;
white-space: nowrap;
}
.ui-badge.ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.ui-badge.info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ui-badge.warn { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.ui-badge.muted { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
.ui-badge.danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.data-table-wrapper,
.student-table-container .data-table-wrapper {
border: 1px solid var(--ui-border);
border-radius: 10px;
overflow-x: auto;
background: #fff;
}
.data-table thead th {
background: #f7fafd;
color: #5f7387;
font-weight: 600;
font-size: .8rem;
white-space: nowrap;
}
.data-table tbody td { font-size: .84rem; }
@media (max-width: 760px) {
.ui-page-header { align-items: flex-start; }
.ui-page-header h1 { font-size: 1.08rem; }
.ui-page-actions { width: 100%; }
.ui-toolbar .ui-toolbar-right { margin-left: 0; width: 100%; }
.ui-card { padding: 14px; }
}
.data-table-wrapper .data-table th:last-child,
.data-table-wrapper .data-table td:last-child {
position: sticky;
right: 0;
z-index: 2;
}
.data-table-wrapper .data-table th:last-child {
background: #f7fafd;
box-shadow: -6px 0 10px -8px rgba(20, 50, 85, .25);
}
.data-table-wrapper .data-table td:last-child {
background: #fff;
box-shadow: -6px 0 10px -8px rgba(20, 50, 85, .18);
}
.data-table-wrapper .data-table tr:hover td:last-child { background: #f8fbff; }
.ui-form { width: 100%; }
.ui-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 24px;
}
.ui-form-row { margin-bottom: 20px; }
.ui-form-label {
display: block;
margin-bottom: 7px;
font-size: .86rem;
font-weight: 600;
color: #1f2937;
}
.ui-form-label .req { color: #dc2626; margin-left: 2px; }
.ui-form-control,
.ui-form select,
.ui-form input[type="text"],
.ui-form input[type="date"],
.ui-form input[type="number"] {
width: 100%;
min-height: 38px;
padding: 7px 12px;
border: 1px solid #e2e8f0;
border-radius: 9px;
font-size: .86rem;
color: #16243a;
background: #fff;
box-sizing: border-box;
}
.ui-form-control:focus,
.ui-form select:focus,
.ui-form input:focus {
outline: none;
border-color: #2d6a4f;
box-shadow: 0 0 0 3px rgba(45, 106, 79, .12);
}
.ui-form-help { margin-top: 5px; font-size: .74rem; color: #93a5b8; }
.ui-form-error { margin-top: 5px; font-size: .76rem; color: #dc2626; }
.ui-form-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 26px;
padding-top: 18px;
border-top: 1px solid #eef3f9;
}
@media (max-width: 760px) {
.ui-form-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 760px) {
.ui-cards table.data-table { display: block; width: 100%; min-width: 0 !important; }
.ui-cards thead { display: none; }
.ui-cards tbody { display: block; }
.ui-cards tbody tr {
display: block;
background: #fff;
border: 1px solid #e4edf7;
border-radius: 12px;
padding: 6px 14px;
margin-bottom: 12px;
box-shadow: 0 3px 10px rgba(20, 50, 85, .05);
}
.ui-cards tbody td {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
width: auto;
padding: 7px 0;
border: 0;
border-bottom: 1px dashed #eef3f9;
text-align: right;
white-space: normal;
position: static;
box-shadow: none;
background: transparent;
}
.ui-cards tbody td:last-child {
border-bottom: 0;
justify-content: flex-end;
flex-wrap: wrap;
gap: 6px;
padding-top: 10px;
}
.ui-cards tbody td::before {
content: attr(data-label);
flex: 0 0 auto;
max-width: 42%;
color: #8394a8;
font-weight: 600;
font-size: .78rem;
text-align: left;
}
.ui-cards tbody td:first-child::before { content: ''; }
.ui-cards tbody tr:hover td:last-child { background: transparent; }
}
@media (max-width: 900px) {
.filter-bar select,
.filter-bar .form-select,
.action-bar select,
.action-bar .form-select {
flex: 1 1 170px;
height: 32px;
}
}
@media (max-width: 680px) {
.filter-bar > *,
.action-bar > * {
width: 100%;
}
.filter-bar > select,
.filter-bar > .form-select,
.filter-bar > .form-control,
.filter-bar > input:not([type="checkbox"]):not([type="radio"]),
.action-bar > select,
.action-bar > .form-select,
.action-bar > .form-control {
flex: 0 0 auto !important;
width: 100% !important;
height: 32px !important;
min-height: 32px;
}
}
@media (max-width: 768px) {
.sidebar {
width: 272px;
transition: transform .24s cubic-bezier(.2, .8, .2, 1);
box-shadow: 24px 0 60px rgba(5, 25, 18, .28);
}
.sidebar-overlay {
display: block;
opacity: 0;
pointer-events: none;
background: rgba(5, 20, 15, .45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
transition: opacity .2s ease;
}
.sidebar-overlay.active {
opacity: 1;
pointer-events: auto;
}
body.drawer-open { overflow: hidden; }
}
.print-only { display: none; }
@media print {
@page { size: A4 landscape; margin: 10mm; }
.sidebar, .top-bar, .sidebar-overlay, .ui-page-header,
.filter-bar, .action-bar, .pagination-wrapper, .hm-tools,
.chart-dl, .no-print, .tab-nav, .tab-btn,
.hm-todo-bar, .hm-quality-actions, .hm-activity { display: none !important; }
body { background: #fff !important; padding: 0 !important; }
.main-container { margin-left: 0 !important; width: 100% !important; }
.page-shell, .content-wrapper { padding: 0 !important; max-width: none !important; }
.card, .ui-card {
box-shadow: none !important; border: 0 !important;
padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}
.print-only { display: block !important; }
.print-only .ph-school { font-size: 16pt; font-weight: 700; text-align: center; }
.print-only .ph-title { font-size: 11pt; text-align: center; margin-top: 3px; }
.print-only .ph-time { font-size: 8.5pt; text-align: right; color: #555; margin-top: 4px; }
table { width: 100% !important; font-size: 9.5pt; border-collapse: collapse; }
thead { display: table-header-group; }
tr { break-inside: avoid; page-break-inside: avoid; }
th, td { border: 1px solid #999 !important; padding: 4px 5px !important; }
th { background: #f2f2f2 !important; }
a { color: #000 !important; text-decoration: none !important; }
img { max-width: 100%; }
}
@media (max-width: 760px) {
.permission-group .group-children {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 10px;
}
.permission-item { min-width: 0; }
.permission-item label { font-size: .82rem; }
.permissions-tree { gap: 10px; }
}
@media (max-width: 460px) {
.permission-group .group-children { grid-template-columns: 1fr; }
}
.ui-form .is-invalid,
.ui-form-control.is-invalid,
.ui-form select.is-invalid,
.ui-form input.is-invalid {
border-color: #dc2626 !important;
background: #fff8f8 !important;
box-shadow: 0 0 0 2px rgba(220, 38, 38, .10) !important;
}
:root {
--ant-primary: #1677ff;
--ant-primary-hover: #4096ff;
--ant-primary-active: #0958d9;
--ant-border: #d9d9d9;
--ant-border-light: #f0f0f0;
--ant-text: rgba(0, 0, 0, .88);
--ant-text-secondary: rgba(0, 0, 0, .65);
--ant-bg-layout: #f5f5f5;
--btn-bg: #1677ff;
--btn-hover: #4096ff;
--link-color: #1677ff;
--link-hover: #4096ff;
--focus-ring: rgba(22, 119, 255, .18);
--sidebar-bg: #0b2a4a;
--sidebar-hover: #0b2b4a;
--sidebar-active: #1677ff;
--sidebar-sub-bg: #000c17;
--ui-primary: #1677ff;
}
body { background: var(--ant-bg-layout); color: var(--ant-text); }
.content-wrapper, .main-container { background: var(--ant-bg-layout); }
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-success,
.btn-info, .btn-warning, .btn-sm {
height: 32px;
padding: 0 15px;
border: 1px solid transparent;
border-radius: 6px;
font-size: 14px;
font-weight: 400;
box-shadow: none;
transform: none !important;
transition: background .2s, border-color .2s, color .2s;
}
.btn { background: #fff; border-color: var(--ant-border); color: var(--ant-text); }
.btn:hover { background: #fff; border-color: var(--ant-primary-hover); color: var(--ant-primary-hover); }
.btn-primary { background: var(--ant-primary); border-color: var(--ant-primary); color: #fff; }
.btn-primary:hover { background: var(--ant-primary-hover); border-color: var(--ant-primary-hover); color: #fff; }
.btn-secondary { background: #fff; border-color: var(--ant-border); color: var(--ant-text); }
.btn-secondary:hover { background: #fff; border-color: var(--ant-primary-hover); color: var(--ant-primary-hover); }
.btn-danger { background: #ff4d4f; border-color: #ff4d4f; color: #fff !important; }
.btn-danger:hover { background: #ff7875; border-color: #ff7875; color: #fff !important; }
.btn-success { background: #52c41a; border-color: #52c41a; color: #fff; }
.btn-success:hover { background: #73d13d; border-color: #73d13d; color: #fff; }
.btn-info { background: var(--ant-primary); border-color: var(--ant-primary); color: #fff; }
.btn-info:hover { background: var(--ant-primary-hover); border-color: var(--ant-primary-hover); }
.btn-warning { background: #faad14; border-color: #faad14; color: #fff; }
.btn-warning:hover { background: #ffc53d; border-color: #ffc53d; color: #fff; }
.btn-sm { height: 24px; padding: 0 8px; font-size: 12px; border-radius: 4px; }
.btn:disabled, .btn[disabled] { background: #f5f5f5; border-color: var(--ant-border); color: rgba(0,0,0,.25); cursor: not-allowed; }
.form-control, select.form-control, input.form-control,
select.form-select, textarea.form-control,
.ui-form input, .ui-form select, .ui-form textarea,
.ui-form .ui-form-control {
height: 32px;
padding: 0 11px;
border: 1px solid var(--ant-border);
border-radius: 6px;
background: #fff;
color: var(--ant-text);
font-size: 14px;
box-shadow: none;
outline: none;
}
textarea.form-control, .ui-form textarea { height: auto; min-height: 80px; padding: 6px 11px; }
.form-control:focus, select.form-select:focus, select.form-control:focus,
input.form-control:focus, textarea.form-control:focus,
.ui-form input:focus, .ui-form select:focus, .ui-form textarea:focus,
.ui-form .ui-form-control:focus {
border-color: var(--ant-primary-hover);
box-shadow: 0 0 0 2px rgba(5, 145, 255, .12);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ant-primary); }
.card, .ui-card {
background: #fff;
border: 1px solid var(--ant-border-light);
border-radius: 8px;
box-shadow: none;
}
.ui-page-header h1 { font-size: 20px; font-weight: 600; color: var(--ant-text); }
.ui-sub { color: var(--ant-text-secondary); }
.data-table { font-size: 13px; }
.data-table th, .data-table td { padding: 10px 8px; border-bottom: 1px solid var(--ant-border-light); }
.data-table th { background: #fafafa; color: var(--ant-text); font-weight: 600; }
.data-table tbody tr:hover > td { background: #fafafa; }
.pagination-wrapper button, .pagination-wrapper a, .pagination-wrapper .btn,
.pagination button, .pagination a, .pagination .btn {
border-radius: 6px; border-color: var(--ant-border); color: var(--ant-text);
box-shadow: none;
}
.pagination-wrapper button:hover, .pagination-wrapper a:hover,
.pagination button:hover, .pagination a:hover {
border-color: var(--ant-primary-hover); color: var(--ant-primary-hover); background: #fff;
}
.pagination-wrapper .active, .pagination-wrapper .current,
.pagination .active, .pagination .current {
background: var(--ant-primary) !important; border-color: var(--ant-primary) !important; color: #fff !important;
}
.ui-badge {
border-radius: 4px; background: #e6f4ff; color: var(--ant-primary); border: 1px solid #91caff;
}
.tab-btn.active { border-bottom-color: var(--ant-primary); color: var(--ant-primary); }
.sidebar {
background: linear-gradient(180deg, #232529 0%, #17181b 100%) !important;
box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
}
.sidebar .sub-menu { background: rgba(0,0,0,.18) !important; }
.sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.12); }
.nav-item > a:hover { background: rgba(255,255,255,.08); }
.nav-item.open > a { background: rgba(255,255,255,.06); }
.nav-item.has-active > a,
.nav-item.active > a {
background: transparent !important;
box-shadow: none !important;
}
.nav-item.active > a { position: relative; }
.nav-item.has-active > a .text,
.nav-item.active > a .text { color: #fff; }
.nav-item.has-active.open > a { background: transparent !important; }
.sub-menu li a.active {
background: transparent !important;
color: #ffffff !important;
font-weight: 600 !important;
}
.nav-item.has-active .text { color: #fff; }
.sub-menu li a.active {
background: transparent !important;
color: #ffffff !important;
}
.sub-menu li a.active::before { background: transparent; }
.top-bar { box-shadow: 0 1px 0 var(--ant-border-light); }
.login-card .form-control { border-color: var(--ant-border); border-radius: 6px; }
.login-card .btn-login { background: var(--ant-primary); border-radius: 6px; }
.login-card .btn-login:hover { background: var(--ant-primary-hover); }
[class*="form-container"],
.import-container,
.admin-form-container {
border: 1px solid var(--ant-border-light);
border-radius: 8px !important;
box-shadow: none !important;
}
.ui-form .form-control,
.ui-form select.form-select,
.ui-form select.form-control,
.ui-form input.form-control {
height: 32px !important;
min-height: 32px;
padding: 0 11px !important;
line-height: normal;
border-radius: 6px !important;
border-color: var(--ant-border);
box-shadow: none;
}
.ui-form select.form-select,
.ui-form select.form-control { padding-right: 26px !important; }
.ui-form textarea.form-control { height: auto !important; min-height: 80px; }
.ui-form .form-control:focus,
.ui-form select.form-select:focus,
.ui-form input.form-control:focus,
.ui-form textarea.form-control:focus {
border-color: var(--ant-primary-hover) !important;
box-shadow: 0 0 0 2px rgba(5, 145, 255, .12) !important;
}
.ui-form .ui-form-label,
.ui-form .form-label { font-weight: 500; color: var(--ant-text); }
.ui-form .ui-form-help { color: var(--ant-text-secondary); }
.hm-kpi, .hm-todo-bar, .hm-chart-card, .hm-quality {
border-radius: 8px !important;
border-color: #f0f0f0 !important;
box-shadow: none !important;
}
.hm-kpi::before { background: #1677ff !important; opacity: 1; }
.hm-tool, .hm-quality-actions a { border-radius: 6px !important; }
.pagination-wrapper {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
padding: 12px 0 2px;
border-top: 1px solid var(--ant-border-light);
color: #8c8c8c;
font-size: 13px;
}
.pager-summary { color: #8c8c8c; white-space: nowrap; }
.pager-btns {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.pagination-wrapper .pager-btn,
.pagination-wrapper button,
.pagination-wrapper a.pager-btn {
height: 32px;
min-width: auto;
padding: 0 12px;
border: 1px solid #d9d9d9;
border-radius: 6px;
background: #fff;
color: rgba(0, 0, 0, .88);
font-size: 13px;
font-weight: 400;
line-height: 1;
color: #1677ff;
box-shadow: none;
text-decoration: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pagination-wrapper .pager-btn:hover,
.pagination-wrapper button:hover:not(:disabled) {
border-color: #4096ff;
color: #0958d9;
background: #fff;
}
.pagination-wrapper .pager-btn.is-disabled,
.pagination-wrapper button:disabled {
color: rgba(0, 0, 0, .25);
background: #f5f5f5;
border-color: #d9d9d9;
cursor: not-allowed;
box-shadow: none;
}
.pager-jump-label { color: #8c8c8c; white-space: nowrap; }
.pager-input {
width: 56px;
height: 32px;
padding: 0 6px;
border: 1px solid #d9d9d9;
border-radius: 6px;
text-align: center;
font-size: 13px;
color: rgba(0, 0, 0, .88);
background: #fff;
box-shadow: none;
outline: none;
}
.pager-input:focus { border-color: #4096ff; box-shadow: 0 0 0 2px rgba(5, 145, 255, .12); }
.pager-go {
height: 32px;
padding: 0 12px;
border: 1px solid #d9d9d9;
border-radius: 6px;
background: #fff;
color: rgba(0, 0, 0, .88);
font-size: 13px;
cursor: pointer;
}
.pager-go:hover { border-color: #4096ff; color: #4096ff; }
.pager-per-page {
height: 32px;
padding: 0 8px;
border: 1px solid #d9d9d9;
border-radius: 6px;
background: #fff;
color: rgba(0, 0, 0, .88);
font-size: 13px;
}
@media (max-width: 640px) {
.pager-summary { width: 100%; }
.pager-btns { width: 100%; }
}
.pagination-wrapper .pager-per-page,
.pagination-wrapper #perPageSelect,
.pagination-wrapper select.pager-per-page {
width: 104px !important;
min-width: 104px !important;
max-width: 104px !important;
box-sizing: border-box;
}
.pagination-wrapper .pager-btn,
.pagination-wrapper button.pager-btn,
.pagination-wrapper a.pager-btn {
width: 64px;
min-width: 64px;
padding: 0;
}
.pager-input {
width: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
box-sizing: border-box;
}
.pager-go {
width: 48px;
min-width: 48px;
padding: 0;
box-sizing: border-box;
}
.sub-menu li a.active {
font-weight: 700 !important;
color: #69b1ff !important;
background: transparent !important;
box-shadow: none !important;
}
.sub-menu li a.active::before {
content: '';
display: inline-block;
width: 2px;
height: 14px;
margin-right: 8px;
vertical-align: -2px;
background: #1677ff;
border-radius: 1px;
}
.nav-item.active > a::before,
.nav-item.active > a::after { content: none !important; }
.nav-item.active > a { box-shadow: none !important; background: transparent !important; }
.nav-item.active > a .text { font-weight: 400; }
.nav-item.active > a {
border-left: 0 !important;
border-right: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.btn-info:hover,
.btn-success:hover,
.btn-warning:hover {
color: #fff !important;
}
body.modal-open { overflow: hidden; }
.app-modal {
display: none;
position: fixed;
inset: 0;
z-index: 3000;
background: rgba(0, 0, 0, .45);
align-items: center;
justify-content: center;
padding: 18px;
}
.app-modal.show { display: flex; }
.app-modal-panel {
width: min(860px, 94vw);
height: auto;
min-height: 300px;
max-height: 86vh;
background: #fff;
border-radius: 10px;
box-shadow: 0 18px 48px rgba(0, 0, 0, .25);
display: flex;
flex-direction: column;
overflow: hidden;
}
.app-modal-head {
height: 48px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
border-bottom: 1px solid #f0f0f0;
}
.app-modal-title { font-size: 16px; font-weight: 600; color: rgba(0, 0, 0, .88); }
.app-modal-close {
border: 0;
background: transparent;
font-size: 22px;
line-height: 1;
color: rgba(0, 0, 0, .45);
cursor: pointer;
padding: 4px 8px;
}
.app-modal-close:hover { color: #1677ff; }
.app-modal-body {
flex: 0 1 auto;
min-height: 0;
max-height: calc(86vh - 48px);
background: #fff;
position: relative;
overflow: hidden;
}
.app-modal-content {
max-height: calc(86vh - 48px);
overflow-y: auto;
background: #fff;
padding: 10px 14px;
box-sizing: border-box;
}
.modal-page { min-height: 0; }
.modal-error { padding: 40px 16px; text-align: center; color: #8c8c8c; font-size: 13px; }
.app-modal-panel.modal-xs { width: min(640px, 94vw); }
.app-modal-panel.modal-sm { width: min(700px, 94vw); }
.app-modal-panel.modal-md { width: min(820px, 94vw); }
.app-modal-panel.modal-lg { width: min(1000px, 96vw); }
.app-modal-panel.modal-xl { width: min(1240px, 97vw); }
.app-modal-body { position: relative; }
.app-modal-loading {
position: absolute;
inset: 0;
z-index: 2;
display: none;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(255, 255, 255, .92);
color: #8c8c8c;
font-size: 13px;
}
.app-modal-loading.active { display: flex; }
.app-modal-spinner {
width: 20px;
height: 20px;
border: 2px solid #e6f4ff;
border-top-color: #1677ff;
border-radius: 50%;
animation: appModalSpin .7s linear infinite;
}
@keyframes appModalSpin { to { transform: rotate(360deg); } }
.sidebar .sidebar-brand {
height: var(--topbar-h, 56px);
min-height: var(--topbar-h, 56px);
padding: 0 14px !important;
display: flex;
align-items: center;
gap: 10px;
box-sizing: border-box;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}