:root {
--danger-color: #e74c3c;
--text-color: #283252;
--group-primary: #4285f4;
--group-secondary: #50c878;
--group-light: #f8f9fa;
--group-border-radius: 12px;
--group-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
--group-accent: #f8d7da;
--group-boys: #5c9ce6;
--group-girls: #e87e79;
--group-transition: all 0.3s ease;
--group-text-dark: #2c3e50;
--group-text-light: #7f8c8d;
--text-muted: #7f8c8d;
--light-bg: #f2f3f8;
--white: #ffffff;
--border-color: #e0e5ec;
--border-radius-sm: 8px;
--shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
--spacing: 20px;
--reports-primary: #16a34a;
--reports-primary-hover: #4CAF50;
--reports-primary-light: #dcfce7;
--reports-success: #4CAF50;
--reports-warning: #ffcc00;
--reports-danger: #FF3B30;
--reports-info: #2196F3;
--reports-text: #283252;
--reports-text-light: #64748b;
--reports-text-muted: #94a3b8;
--reports-border: #e0e5ec;
--reports-bg-light: #f2f3f8;
--reports-white: #ffffff;
--reports-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
--reports-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
--reports-radius: 12px;
--reports-radius-sm: 8px;
--reports-transition: all 0.3s ease;
--info-color: #2196F3;
--radius: 12px;
--radius-sm: 8px;
--text-dark: #111;
--text-medium: #333;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--btn-size: 48px;
--radius-md: 12px;
--radius-lg: 16px;
--shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);
--shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.08);
--transition-fast: 0.2s ease;
--primary: #0071e3;
--primary-dark: #0059bb;
--secondary: #86868b;
--text: #1d1d1f;
--bg: #ffffff;
--border: #d2d2d7;
--system-font: -apple-system,BlinkMacSystemFont,"SF Pro Display",Helvetica,Arial,sans-serif;
font-size: 15px!important;
--bs-body-font-size: 1rem!important;
--primary-hover: #5a94f5;
--primary-active: #3367d6;
--accent-color: #50c878;
--dark-text: #2c3e50;
--light-text: #7f8c8d;
--bg-light: #ffffff;
--bg-hover: #f8f9fa;
--bg-active: #eef5fd;
--shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--menu-width: 300px;
--anim-time: 0.25s;
--menu-font-size: 15px;
--submenu-font-size: 14px;
--icon-size: 20px;
--primary-color: #2196F3;
--secondary-color: #4FC3F7;
--success-color: #4CAF50;
--warning-color: #FF9800;
--error-color: #F44336;
--text-primary: #2c3e50;
--text-secondary: #7f8c8d;
--background-light: #f8fafc;
--card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
--card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
--border-radius: 12px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--yellow-color: #FFBB33;
--yellow-light: #FFE8B9;
--green-color: #77CC77;
--green-light: #D6F0D6;
--blue-color: #5AC8FA;
--blue-light: #CCEEFA;
--purple-color: #9C6ADE;
--purple-light: #E9DEFF;
--gray-light: #F0F0F5;
--text-color: #333;
--text-muted: #777;
--border-radius: 12px;
}
.gender-avatars-wrapper {
margin: 0;
padding: 0;
text-align: center
}
.gender-avatars {
display: flex;
gap: 40px;
justify-content: center;
align-items: center
}
.radio-card {
position: relative;
min-width: 150px;
text-align: center
}
.radio-card input[type=radio] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 2
}
.gender-avatar {
width: 130px;
height: 130px;
display: inline-block;
position: relative;
cursor: pointer;
transition: all .3s ease;
border-radius: 50%;
overflow: visible
}
.gender-avatar::before {
display: none
}
.gender-avatar img {
width: 130px;
height: 130px;
border-radius: 50%;
transition: all .3s ease;
object-fit: cover;
box-shadow: 0 2px 5px rgba(0,0,0,.03);
border: 2px solid rgba(200,200,200,.15);
position: relative;
z-index: 1;
display: block
}
.gender-male img {
background-color: rgba(66,133,244,.05)
}
.gender-female img {
background-color: rgba(233,30,99,.05)
}
.gender-avatar:hover img {
transform: scale(1.05);
box-shadow: 0 0 0 3px rgba(0,0,0,.03),0 8px 15px rgba(0,0,0,.05)
}
.gender-male:hover img {
border-color: rgba(66,133,244,.2);
box-shadow: 0 0 0 3px rgba(66,133,244,.05),0 8px 15px rgba(66,133,244,.1)
}
.gender-female:hover img {
border-color: rgba(233,30,99,.2);
box-shadow: 0 0 0 3px rgba(233,30,99,.05),0 8px 15px rgba(233,30,99,.1)
}
input[type=radio]:checked + .gender-avatar img {
transform: scale(1.05);
border-width: 2px
}
input[type=radio]:checked + .gender-male img {
border-color: rgba(66,133,244,.2);
box-shadow: 0 0 0 4px rgba(66,133,244,.08),0 2px 8px rgba(66,133,244,.05)
}
input[type=radio]:checked + .gender-female img {
border-color: rgba(233,30,99,.2);
box-shadow: 0 0 0 4px rgba(233,30,99,.08),0 2px 8px rgba(233,30,99,.05)
}
.pulse {
animation: pulse .5s
}
@keyframes pulse {
0% {
transform: scale(1)
}
50% {
transform: scale(1.12)
}
100% {
transform: scale(1.08)
}
}
.gender-avatar::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 50%;
overflow: hidden;
pointer-events: none
}
.gender-avatar::before {
content: '';
position: absolute;
top: 0;
left: -200%;
z-index: 10;
height: 100%;
opacity: 0;
background: linear-gradient(135deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 35%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
pointer-events: none;
transform-origin: center
}
input[type=radio]:checked + .gender-avatar::before {
animation: childCardShine 3s ease-in-out infinite
}
@keyframes childCardShine {
0% {
left: -100%;
transform: translateX(0);
opacity: 0
}
10% {
opacity: 0
}
15% {
opacity: .7
}
40% {
left: 100%;
transform: translateX(0);
opacity: .7
}
45% {
opacity: 0
}
100% {
left: 100%;
opacity: 0
}
}
.gender-description {
margin-top: 15px
}
.gender-description p {
color: #777;
font-size: 13px
}
input[type=radio]:checked + .gender-avatar img {
transform: scale(1.08)!important;
box-shadow: 0 0 0 5px rgba(66,133,244,.8),0 5px 15px rgba(66,133,244,.3)!important;
animation: shine 2s infinite!important
}
input[type=radio]:checked + .gender-male img {
box-shadow: 0 0 0 5px rgba(66,133,244,.3),0 5px 15px rgba(66,133,244,.1)!important
}
input[type=radio]:checked + .gender-female img {
box-shadow: 0 0 0 5px rgba(233,30,99,.3),0 5px 15px rgba(233,30,99,.1)!important
}
@media (max-width:768px) {
.gender-avatars {
flex-direction: row;
gap: 30px;
justify-content: center;
align-items: center;
width: 100%;
}
.gender-avatar {
width: 100px;
height: 100px;
}
.gender-avatar img {
width: 100px;
height: 100px;
}
.gender-avatars-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.gender-description {
margin-top: 20px;
text-align: center;
}
.form-group.field-employee-gender {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
}
.form-group.field-employee-gender > * {
text-align: center !important;
}
.radio-card-group {
justify-content: center !important;
width: 100% !important;
}
.radio-card {
min-width: auto !important;
text-align: center !important;
}
}
n .employee-form-widget {
margin-bottom: 2rem
}
.employee-form-widget .form-section {
margin-bottom: 20px!important;
padding: 15px!important;
background-color: #f9f9f9!important;
border-radius: 5px!important;
border-left: 3px solid #3c8dbc!important;
transition: all .3s ease!important
}
.employee-form-widget .form-section:hover {
border-left-color: #2a6496!important;
box-shadow: 0 2px 5px rgba(0,0,0,.1)!important
}
.employee-form-widget .form-section-title {
margin-top: 0!important;
margin-bottom: 15px!important;
font-size: 16px!important;
font-weight: 600!important;
color: #333!important;
border-bottom: 1px solid #ddd!important;
padding-bottom: 8px!important
}
.gender-options-wrapper {
margin: 2rem 0!important;
padding: 15px!important
}
.radio-card-group {
display: flex!important;
gap: 40px!important;
justify-content: center!important;
align-items: center!important
}
.radio-card {
position: relative!important;
min-width: 150px!important;
text-align: center!important
}
.radio-card input[type=radio] {
opacity: 0!important;
position: absolute!important;
width: 100%!important;
height: 100%!important;
cursor: pointer!important;
z-index: 2!important
}
@keyframes shine {
0% {
box-shadow: 0 0 0 5px rgba(66,133,244,.8),0 5px 15px rgba(66,133,244,.3)!important
}
50% {
box-shadow: 0 0 20px 5px rgba(66,133,244,.8),0 5px 25px rgba(66,133,244,.5)!important
}
100% {
box-shadow: 0 0 0 5px rgba(66,133,244,.8),0 5px 15px rgba(66,133,244,.3)!important
}
}
input[type=radio]:checked + .gender-male img {
animation: shineMale 2s infinite!important
}
input[type=radio]:checked + .gender-female img {
animation: shineFemale 2s infinite!important
}
@keyframes shineMale {
0% {
box-shadow: 0 0 0 5px rgba(66,133,244,.8),0 5px 15px rgba(66,133,244,.3)!important
}
50% {
box-shadow: 0 0 20px 5px rgba(66,133,244,.8),0 5px 25px rgba(66,133,244,.5)!important
}
100% {
box-shadow: 0 0 0 5px rgba(66,133,244,.8),0 5px 15px rgba(66,133,244,.3)!important
}
}
@keyframes shineFemale {
0% {
box-shadow: 0 0 0 5px rgba(233,30,99,.8),0 5px 15px rgba(233,30,99,.3)!important
}
50% {
box-shadow: 0 0 20px 5px rgba(233,30,99,.8),0 5px 25px rgba(233,30,99,.5)!important
}
100% {
box-shadow: 0 0 0 5px rgba(233,30,99,.8),0 5px 15px rgba(233,30,99,.3)!important
}
}
.pulse {
animation: pulse .5s!important
}
@keyframes pulse {
0% {
transform: scale(1)!important
}
50% {
transform: scale(1.12)!important
}
100% {
transform: scale(1.08)!important
}
}
.org-badge {
background-color: #f0f7ff!important;
padding: 10px 15px!important;
border-radius: 5px!important;
border-left: 3px solid #3c8dbc!important;
margin-bottom: 10px!important;
font-weight: 600!important
}
.employee-groups-list,
.employee-positions-list {
margin-bottom: 15px!important
}
.employee-groups-list h5,
.employee-positions-list h5 {
font-weight: 600!important;
margin-top: 0!important;
margin-bottom: 10px!important
}
.employee-groups-list .list-group-item,
.employee-positions-list .list-group-item {
padding: 10px 15px!important;
margin-bottom: 5px!important;
border-radius: 4px!important
}
.system-info {
background-color: #f9f9f9!important;
padding: 10px!important;
border-radius: 5px!important;
border: 1px solid #eee!important
}
.system-info .info-item {
margin-bottom: 10px!important
}
.system-info .info-item label {
display: block!important;
font-weight: 600!important;
margin-bottom: 3px!important;
color: #666!important
}
.system-info .info-item p {
margin: 0!important;
color: #333!important
}
.group-link {
color: #3c8dbc!important;
text-decoration: none!important
}
.group-link:hover {
text-decoration: underline!important
}
.animate-fade {
animation: fadeIn .5s ease-in-out
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@media (max-width:767px) {
.radio-card-group {
flex-direction: column!important;
gap: 10px!important
}
.radio-card {
width: 100%!important
}
}
.employee-form-widget,
.group-form-widget,
.universal-form,
.user-form-widget,
.universal-form-widget {
margin-bottom: 2rem!important
}
.universal-form-widget .form-group {
margin-bottom: 0;
}
.employee-form-widget .form-section,
.group-form-widget .form-section,
.universal-form .form-section,
.universal-form-widget .form-section,
.user-form-widget .form-section {
margin-bottom: 20px!important;
padding: 15px!important;
background-color: #f9f9f9!important;
border-radius: 5px!important;
border-left: 3px solid #3c8dbc!important;
transition: all .3s ease!important
}
.employee-form-widget .form-section:hover,
.group-form-widget .form-section:hover,
.universal-form .form-section:hover,
.universal-form-widget .form-section:hover,
.user-form-widget .form-section:hover {
border-left-color: #2a6496!important;
box-shadow: 0 2px 5px rgba(0,0,0,.1)!important
}
.employee-form-widget .form-section-title,
.group-form-widget .form-section-title,
.universal-form .form-section-title,
.universal-form-widget .form-section-title,
.user-form-widget .form-section-title {
margin-top: 0!important;
margin-bottom: 15px!important;
font-size: 16px!important;
font-weight: 600!important;
color: #333!important;
border-bottom: 1px solid #ddd!important;
padding-bottom: 8px!important
}
.two-columns-layout .form-left-column,
.two-columns-layout .form-right-column {
padding: 0 15px!important
}
.lang-tabs {
margin-bottom: 15px!important
}
.lang-btn {
border: 1px solid #ddd!important;
background-color: #f8f8f8!important;
padding: 5px 10px!important;
margin-right: 5px!important;
border-radius: 3px!important;
cursor: pointer!important;
color: #333!important
}
.lang-btn:hover {
background-color: #f2f2f2!important
}
.lang-btn.active {
background-color: #3c8dbc!important;
color: #fff!important;
border-color: #367fa9!important
}
.lang-content {
display: none!important;
padding: 10px!important;
border: 1px solid #ddd!important;
border-radius: 3px!important;
margin-bottom: 15px!important
}
.lang-content.active {
display: block!important
}
.field-error {
color: #a94442!important;
background-color: #f2dede!important;
border: 1px solid #ebccd1!important;
padding: 5px 10px!important;
border-radius: 3px!important;
margin-top: 5px!important
}
.has-error .form-control {
border-color: #dd4b39!important;
box-shadow: 0 0 0 2px rgba(221,75,57,.2)!important
}
.has-error .control-label {
color: #dd4b39!important
}
.has-error .help-block {
color: #dd4b39!important;
font-size: 12px!important;
margin-top: 5px!important;
padding: 5px 10px!important;
background-color: #fdf2f2!important;
border: 1px solid #f5c6cb!important;
border-radius: 4px!important;
display: block!important
}
.has-success .form-control {
border-color: #00a65a!important
}
.has-success .help-block {
color: #3c763d!important
}
.hint-block {
color: #737373!important;
font-size: 12px!important;
margin-top: 5px!important;
font-style: italic!important
}
.has-error .hint-block {
display: none!important
}
.help-block-error {
color: #dd4b39!important;
font-size: 12px!important;
margin-top: 5px!important;
padding: 5px 10px!important;
background-color: #fdf2f2!important;
border: 1px solid #f5c6cb!important;
border-radius: 4px!important
}
.help-block-error:empty {
display: none!important
}
.help-block-error.has-tooltip,
.help-block.has-tooltip {
position: relative;
cursor: help;
text-decoration: underline dotted;
text-underline-offset: 2px
}
.help-block-error.has-tooltip::after,
.help-block.has-tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 0;
background: linear-gradient(135deg,#2c3e50 0,#34495e 100%);
color: #fff;
padding: 12px 16px;
border-radius: 8px;
font-size: 13px;
line-height: 1.6;
white-space: pre-line;
width: 380px;
max-width: 90vw;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease,visibility .25s ease,transform .25s ease;
transform: translateY(5px);
box-shadow: 0 4px 20px rgba(0,0,0,.3);
margin-bottom: 8px;
font-style: normal;
text-decoration: none;
text-align: left;
border: 1px solid rgba(255,255,255,.1)
}
.help-block-error.has-tooltip::before,
.help-block.has-tooltip::before {
content: '';
position: absolute;
bottom: 100%;
left: 20px;
border: 8px solid transparent;
border-top-color: #34495e;
margin-bottom: -8px;
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease,visibility .25s ease
}
.help-block-error.has-tooltip:hover::after,
.help-block.has-tooltip:hover::after {
opacity: 1;
visibility: visible;
transform: translateY(0)
}
.help-block-error.has-tooltip:hover::before,
.help-block.has-tooltip:hover::before {
opacity: 1;
visibility: visible
}
.help-block-error.has-tooltip::marker,
.help-block.has-tooltip .tooltip-icon {
margin-left: 5px
}
.box-header .box-tools {
display: flex!important;
gap: 8px!important;
align-items: center!important
}
.box-header .box-tools .btn {
padding: 5px 12px!important;
font-size: 13px!important;
border-radius: 4px!important;
transition: all .2s ease!important
}
.btn-info:active,
.btn-info:focus,
.btn-info:hover {
background-color: #3f51b5!important;
border-color: #3f51b5!important;
box-shadow: 0 2px 5px rgba(63,81,181,.3)!important;
color: #fff!important
}
.box-header .box-tools .btn-default {
background-color: #f4f4f4!important;
border-color: #ddd!important;
color: #444!important
}
.box-header .box-tools .btn-default:hover {
background-color: #e7e7e7!important;
box-shadow: 0 2px 5px rgba(0,0,0,.1)!important
}
.form-buttons {
margin-top: 20px!important;
text-align: center!important
}
.form-buttons .btn {
margin-right: 10px!important
}
.animate-fade {
animation: fadeIn .5s ease-in-out!important
}
@keyframes fadeIn {
from {
opacity: 0!important;
transform: translateY(10px)!important
}
to {
opacity: 1!important;
transform: translateY(0)!important
}
}
@media (max-width:767px) {
.two-columns-layout .form-left-column,
.two-columns-layout .form-right-column {
padding: 0!important
}
}
n body {
font-family: 'SF Pro Display',Roboto,-apple-system,sans-serif;
background-color: var(--light-bg);
color: var(--text-color);
line-height: 1.5;
padding: 0
}
.content {
padding-top: 80px;
margin: 0 25px!important
}
.container {
max-width: 1280px;
padding: 0 var(--spacing)
}
.page-header {
padding: 20px 25px;
border-radius: var(--border-radius);
margin-bottom: 25px
}
.page-header p {
margin-bottom: 0
}
.stats-container {
gap: var(--spacing);
}
.total-children {
color: var(--primary-color)
}
.total-boys {
color: #3498db
}
.total-girls {
color: var(--danger-color)
}
.stat-icon {
position: absolute;
right: 20px;
top: 10px;
font-size: 50px;
opacity: .1
}
.progress-thin {
margin-top: 10px;
border-radius: 3px
}
.progress-thin .progress-bar {
height: 100%
}
.card,
.info-card {
background-color: var(--white);
border-radius: var(--border-radius);
margin-bottom: 25px;
overflow: hidden;
transition: var(--transition)
}
.card:hover,
.info-card:hover {
transform: translateY(-5px)
}
.card-header,
.info-header {
padding: 18px 20px;
font-weight: 600;
display: flex;
align-items: center
}
.primary-header {
background: linear-gradient(135deg,#4a89dc 0,#5b9bd5 100%);
color: #fff
}
.info-header {
background: linear-gradient(135deg,#5bafdc 0,#73c0e6 100%);
color: #fff
}
.success-header {
background: linear-gradient(135deg,#2ecc71 0,#27ae60 100%);
color: #fff
}
.danger-header {
background: linear-gradient(135deg,#e74c3c 0,#c0392b 100%);
color: #fff
}
.card-body,
.info-body {
padding: var(--spacing);
background-color: var(--white)
}
.info-tile {
background-color: #f8f9fa;
border-radius: var(--border-radius-sm);
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,.05);
margin-bottom: var(--spacing);
transition: var(--transition)
}
.info-tile:hover {
background-color: #f1f3f5;
box-shadow: 0 4px 8px rgba(0,0,0,.08)
}
.info-tile h4 {
margin-top: 0;
margin-bottom: 5px;
font-weight: 600;
color: var(--text-color);
display: flex;
align-items: center
}
.info-tile h4 i,
.info-tile h4 svg {
margin-right: 8px;
opacity: .7
}
.info-tile p {
margin: 0;
color: var(--text-muted);
font-size: 13px
}
.child-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 5px
}
.child-table th {
padding: 12px 15px;
color: var(--text-muted);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
border-bottom: 1px solid #eee
}
.child-table td {
padding: 12px 15px;
vertical-align: middle
}
.child-row {
background-color: var(--white);
box-shadow: 0 2px 8px rgba(0,0,0,.04);
border-radius: var(--border-radius-sm);
transition: var(--transition)
}
.child-name {
color: var(--text-color);
display: flex;
align-items: center;
gap: 8px
}
.child-name a {
color: var(--text-color);
transition: color .2s ease
}
.child-name a:hover {
color: var(--primary-color)
}
.gender-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 20px;
font-size: 13px;
font-weight: 600
}
.badge-male {
background-color: rgba(52,152,219,.15);
color: #3498db
}
.badge-female {
background-color: rgba(231,76,60,.15);
color: var(--danger-color)
}
.age-badge {
display: inline-block;
padding: 2px 8px;
background-color: #f8f9fa;
border-radius: 20px;
font-size: 12px;
color: var(--text-muted)
}
.action-buttons {
display: flex;
gap: 5px;
justify-content: center
}
.left-border {
margin-bottom: 25px!important;
background-color: #f8f9fa!important;
border-radius: var(--reports-radius-sm)!important;
border-left: 4px solid var(--reports-primary)!important;
box-shadow: 0 2px 8px rgba(0,0,0,.03)!important
}
.top-border {
margin-bottom: 25px!important;
background-color: #f8f9fa!important;
border-radius: var(--reports-radius-sm)!important;
border-top: 4px solid var(--reports-primary)!important;
box-shadow: 0 2px 8px rgba(0,0,0,.03)!important
}
.empty-state {
padding: 50px var(--spacing)
}
.empty-icon {
color: #dfe6e9;
margin-bottom: var(--spacing)
}
.empty-title {
font-size: 20px;
color: var(--text-color)
}
.empty-desc {
color: var(--text-muted);
margin-bottom: var(--spacing);
max-width: 500px;
margin-left: auto;
margin-right: auto
}
.btn-floating {
transition: var(--transition)
}
.btn {
border-radius: var(--border-radius-sm)
}
.btn-light {
background-color: #fff;
border: 1px solid var(--border-color);
color: var(--text-color)
}
.btn-light:hover {
background-color: #f8f9fc
}
.form-control {
border-radius: var(--border-radius-sm);
transition: var(--transition)
}
.form-control:focus {
outline: 0
}
.form-group label {
color: #555
}
.group-list {
display: flex;
flex-direction: column;
gap: 15px
}
.group-item {
border-radius: var(--border-radius-sm);
transition: var(--transition);
background: var(--white)
}
.group-icon {
border-radius: 50%;
margin-right: 15px;
color: #555
}
#itemList.group-list .group-details {
margin-left: 25px;
}
.group-details h5 {
margin-bottom: 5px
}
.group-details p {
margin-bottom: 0;
color: var(--text-muted);
font-size: 13px
}
.group-children {
margin-left: 15px;
background: #f1f1f1;
padding: 3px 15px;
border-radius: 20px;
font-weight: 600;
color: #333
}
.category-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 12px;
font-size: 11px;
margin-left: 8px;
color: #fff
}
.teacher-avatar {
background-color: #f1f1f1
}
.animate__fadeInRight {
animation: fadeInRight .6s ease-in-out
}
@keyframes fadeInRight {
from {
transform: translateX(20px);
opacity: 0
}
to {
transform: translateX(0);
opacity: 1
}
}
@media (max-width:1199px) {
.stats-container {
flex-wrap: wrap
}
}
@media (max-width:991px) {
.container {
padding: 0 15px
}
.page-header h1 {
font-size: 24px
}
.group-icon {
width: 40px;
height: 40px;
font-size: 16px
}
.stat-value {
font-size: 28px
}
}
@media (max-width:767px) {
.filter-buttons {
flex-wrap: wrap
}
.card-header,
.info-header {
flex-direction: column;
align-items: flex-start;
gap: 10px
}
.group-item {
flex-direction: column;
align-items: flex-start;
gap: 10px
}
.group-icon {
margin-right: 0
}
.group-children {
margin-left: 0
}
.action-buttons {
margin-top: 10px
}
}
@media (max-width:576px) {
.page-header {
padding: 15px
}
.card-body,
.info-body {
padding: 15px
}
.btn {
padding: 6px 12px;
font-size: 12px
}
.child-table td,
.child-table th {
padding: 8px
}
}
.boy-icon,
.girl-icon {
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
margin-right: 5px
}
.boy-icon-large,
.girl-icon-large {
width: 50px;
height: 50px
}
.boy-icon-small,
.girl-icon-small {
width: 18px;
height: 18px;
margin-right: 3px
}
@keyframes slideInChart {
from {
opacity: 0;
transform: translateY(30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.chart-container {
animation: slideInChart .8s ease-out
}
.breadcrumb {
display: flex;
flex-wrap: wrap
}
.breadcrumb > li + li:before {
content: "/";
padding: 0 5px
}
.breadcrumb > li > a {
color: var(--primary-color);
text-decoration: none
}
.breadcrumb > li > a:hover {
text-decoration: underline
}
.table-responsive {
border-radius: var(--border-radius)
}
body {
font-family: 'SF Pro Display',Roboto,-apple-system,sans-serif;
background-color: #ffffff;
color: #283252
}
.wrapper {
background-color: #f2f3f8
}
.content-wrapper {
background-color: #f2f3f8;
padding: 15px 20px
}
.main-header {
box-shadow: 0 1px 15px rgba(0,0,0,.04);
background: #fff;
border: none
}
.main-header .logo {
background-color: #1976d2;
color: #fff;
height: 50px;
font-weight: 600;
letter-spacing: .5px;
transition: all .2s ease
}
.main-header .logo:hover {
background-color: #1565c0
}
.main-header .navbar {
background-color: #fff;
height: 50px;
border: none
}
.main-sidebar {
background-color: #fff;
box-shadow: 0 0 25px rgba(0,0,0,.06);
padding-top: 50px
}
.sidebar-menu {
margin-top: 10px
}
.sidebar-menu .header {
color: #8a9099;
background: 0 0;
padding: 10px 15px 5px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px
}
.sidebar-menu li a {
padding: 8px 15px;
border-left: 3px solid transparent;
color: #283252;
font-weight: 500;
font-size: 13px
}
.sidebar-menu li a:hover {
background-color: #f8f9fc;
color: #1976d2;
border-left-color: #1976d2
}
.sidebar-menu li.active > a {
color: #1976d2;
background-color: #e3f2fd;
border-left-color: #1976d2
}
.sidebar-menu .treeview-menu {
background-color: #f9fafc;
padding-left: 3px
}
.sidebar-menu .treeview-menu > li > a {
padding: 6px 5px 6px 16px;
font-size: 12px
}
.user-panel {
padding: 12px;
border-bottom: 1px solid #f1f2f6;
margin-bottom: 5px
}
.user-panel .image img {
border: 2px solid #e3f2fd;
height: 35px;
width: 35px
}
.user-panel .info {
padding: 3px 3px 3px 12px
}
.user-panel .info p {
margin-bottom: 2px;
font-size: 13px;
font-weight: 600
}
.box,
.card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(20,20,50,.06);
border: none;
margin-bottom: 20px;
background-color: #fff;
transition: all .3s ease;
overflow: hidden
}
.box:hover,
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,.1)
}
.box-header,
.card-header {
padding: 15px!important;
background: #f9fbfd!important;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center
}
.box-header .box-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
font-size: 16px;
font-weight: 600;
color: #283252;
margin: 0
}
.box-body,
.card-body {
padding: 15px
}
.box-footer,
.card-footer {
border-top: 1px solid #f5f6fa;
background-color: transparent;
padding: 12px 15px
}
.table,
.table-bordered {
border: none;
margin-bottom: 0
}
.table > tbody > tr > td,
.table > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th {
border: none;
border-bottom: 1px solid #f1f2f6;
padding: 10px 8px;
font-size: 13px
}
.table > thead > tr > th,
.table-bordered > thead > tr > th {
color: #5c6c7c;
font-weight: 600;
border-bottom: 2px solid #f1f2f6;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .5px
}
.table > tbody > tr:hover,
.table-hover > tbody > tr:hover {
background-color: #f8f9fc
}
.btn {
border-radius: 6px;
font-size: 13px;
text-transform: none;
transition: all .3s ease;
box-shadow: 0 1px 3px rgba(20,20,50,.04)
}
.btn-success {
background: linear-gradient(45deg,#43a047,#66bb6a)
}
.btn-success:hover {
background: linear-gradient(45deg,#2e7d32,#43a047)
}
.btn-primary {
background: linear-gradient(45deg,#1e88e5,#42a5f5)
}
.btn-primary:hover {
background: linear-gradient(45deg,#1565c0,#1e88e5)
}
.btn-warning {
background: linear-gradient(45deg,#fb8c00,#ffb74d)
}
.btn-warning:hover {
background: linear-gradient(45deg,#e65100,#fb8c00)
}
.btn-danger {
background: linear-gradient(45deg,#e53935,#ef5350)
}
.btn-danger:hover {
background: linear-gradient(45deg,#c62828,#e53935)
}
.btn-default {
border-color: #e8eaf1;
color: #283252
}
.btn-default:hover {
border-color: #e8eaf1
}
.btn-xs {
padding: 2px 8px;
line-height: 1.5;
border-radius: 4px
}
.btn-floating {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
background: linear-gradient(45deg,#6a11cb,#2575fc);
color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
transition: all .3s ease;
z-index: 100
}
.btn-floating:hover {
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(0,0,0,.3);
color: #fff
}
.category-badge,
.label,
.modern-badge,
.report-status,
.tag {
display: inline-block;
padding: 3px 10px;
font-size: 11px;
font-weight: 600;
border-radius: 20px
}
.label-success,
.tag-success {
background-color: #00d0a8
}
.label-warning,
.tag-warning {
background-color: #ffb545
}
.label-danger,
.tag-danger {
background-color: #ff5758
}
.tag-user {
background-color: #e3f2fd;
color: #1565c0
}
.tag-group {
background-color: #e8f5e9;
color: #2e7d32
}
.tag-category {
background-color: #fff8e1;
color: #f57f17
}
.report-status {
background-color: #f1f1f1;
color: #555
}
.report-status.in-progress {
background-color: #ffecb3;
color: #e65100
}
.report-status.completed {
background-color: #c8e6c9;
color: #2e7d32
}
.form-control {
height: 36px;
border: 1px solid #e8eaf1;
box-shadow: none;
border-radius: 6px;
padding: 8px 12px;
font-size: 13px;
transition: all .2s ease
}
.form-control:focus {
border-color: #1976d2;
box-shadow: 0 0 0 .2rem rgba(25,118,210,.1)
}
.progress {
height: 6px;
margin-bottom: 10px;
box-shadow: none;
background-color: #f1f2f6;
border-radius: 10px
}
.progress-thin {
height: 6px
}
.progress-bar {
background-color: #1565c0;
box-shadow: none
}
.progress-bar-success {
background-color: #73aef8
}
.progress-bar-warning {
background-color: #ffb545
}
.progress-bar-danger {
background-color: #ff5758
}
.action-column a {
margin-right: 5px;
color: #8a9099;
transition: color .2s ease
}
.action-column a:hover {
color: #1976d2
}
.table-responsive {
border-radius: 10px;
overflow: hidden
}
.chart-container {
margin-bottom: 30px
}
.modal-content {
border-radius: 12px;
border: none;
box-shadow: 0 10px 40px rgba(0,0,0,.15);
overflow: hidden
}
.modal-header {
background: #fff;
color: var(--text-color, #283252);
border-bottom: 1px solid #eee;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between
}
.modal-header .modal-title {
font-size: 16px;
font-weight: 600;
margin: 0;
text-align: left;
flex: 1
}
.modal-header .close,
.modal-header .btn-close {
background: none;
border: none;
font-size: 24px;
color: #999;
opacity: 1;
padding: 0;
margin: 0 0 0 auto;
line-height: 1;
cursor: pointer;
transition: color 0.2s;
flex-shrink: 0
}
.modal-header .close:hover,
.modal-header .btn-close:hover {
color: #333;
opacity: 1
}
.modal-body {
padding: 20px
}
.modal-footer {
border-top: 1px solid #eee;
padding: 12px 20px;
background: #fafafa
}
.empty-state {
padding: 30px
}
.empty-state i {
font-size: 48px;
color: #ddd;
margin-bottom: 15px
}
.empty-state h4 {
color: #777;
margin-bottom: 10px
}
.empty-state p {
color: #999;
max-width: 400px;
margin: 0 auto
}
.toast#toast {
position: fixed !important;
top: 20px;
right: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,.1);
padding: 15px 20px;
z-index: 9999;
display: flex;
align-items: center;
max-width: 350px;
transform: translateY(-100px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all .5s ease
}
.toast#toast.show {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto
}
.toast .toast-icon {
margin-right: 15px;
font-size: 20px
}
.toast.success {
border-left: 4px solid #43a047
}
.toast.success .toast-icon {
color: #43a047
}
.toast.error {
border-left: 4px solid #e53935
}
.toast.error .toast-icon {
color: #e53935
}
.toast-content h4 {
margin: 0 0 5px;
font-size: 16px;
font-weight: 600
}
.toast-content p {
margin: 0;
color: #777;
font-size: 14px
}
.group-item {
cursor: pointer;
transition: all .2s ease;
border-left: 5px solid transparent;
margin-bottom: 0px;
background: #fff
}
.group-item:hover {
background: #f9f9f9;
transform: translateX(5px)
}
.group-item .group-icon {
background: #f0f0f0;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
color: #555;
font-size: 20px
}
.group-item .group-details {
flex: 1
}
.group-item .group-details h5 {
margin-bottom: 5px
}
.group-item .group-details p {
margin-bottom: 0;
color: #777;
font-size: 13px
}
.group-item .group-children {
margin-left: 15px;
font-weight: 600;
width: 100px;
background-color: #66bB6A20;
color: #66bb6a;
display: inline-block;
padding: 3px 10px;
border-radius: 20px
}
@media (max-width:767px) {
.content-wrapper {
padding: 10px 15px
}
.box,
.card {
margin-bottom: 15px
}
.box-header,
.card-header {
padding: 12px
}
.box-body,
.card-body {
padding: 12px
}
.page-header h1 {
font-size: 24px
}
.chart-container {
height: 250px
}
.modal-dialog {
margin: 10px
}
}
.input-icon {
position: relative
}
.input-icon i {
position: absolute;
top: 12px;
left: 15px;
color: #aaa
}
.input-icon select {
padding-left: 40px
}
.glow-hover:hover {
box-shadow: 0 0 15px rgba(106,17,203,.5)
}
.ribbon {
top: 0;
right: 150px;
padding: 5px 10px;
background: #439d42;
color: #fff;
font-weight: 700;
transform: translateX(-30%) rotate(20deg) translateY(0);
transform-origin: top left;
box-shadow: 0 3px 10px rgba(0,0,0,.55);
opacity: .8
}
.main-footer {
background-color: #fff;
padding: 12px 20px;
border-top: 1px solid #f1f2f6;
font-size: 13px;
color: #8a9099
}
.breadcrumb {
background-color: transparent;
padding: 0;
margin-bottom: 15px;
font-size: 13px
}
.breadcrumb > li + li:before {
color: #d1d3dc
}
.content-header {
padding: 0 0 15px 0
}
.content-header h1 {
font-size: 22px;
font-weight: 600;
margin: 0;
color: #283252
}
.teacher-avatar {
width: 30px;
height: 30px;
margin-right: 8px;
background-color: #e9ecef;
color: #495057;
font-size: 14px;
font-weight: 600
}
.img-circle {
border-radius: 10px
}
body {
margin: 0;
padding: 0
}
.light-header {
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,.1);
padding: 25px 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000
}
.container {
max-width: 1200px;
padding: 0 15px
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center
}
.download-btn {
background-color: #00c853;
color: #fff;
padding: 8px 20px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
transition: background-color .3s;
font-family: Roboto,sans-serif
}
.download-btn:hover {
background-color: #009d41;
color: #fff
}
.content {
padding-top: 10px
}
body {
font-family: Montserrat,sans-serif;
color: #3c4858;
font-size: 14px;
line-height: 28px;
overflow-x: hidden
}
p {
font-family: Roboto,sans-serif;
letter-spacing: .8px
}
@media (min-width:1400px) {
.container {
max-width: 1600px!important
}
}
@media (min-width:1800px) {
.container {
max-width: 1800px!important
}
}
.row > * {
position: relative
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600!important
}
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
.bg-dark {
background: #24272c!important
}
.list-inline-item:not(:last-child) {
margin-right: 0;
margin-bottom: 5px
}
.text-primary {
color: #16a34a!important
}
a.text-primary:focus,
a.text-primary:hover {
color: #15803d!important
}
.btn-primary {
background: #16a34a!important;
box-shadow: 0 3px 5px 0 rgba(83,41,196,.1);
border-color: #16a34a!important
}
.btn-outline-primary {
color: #5329c4;
background-color: transparent;
border-color: #16a34a
}
.btn-outline-primary.active,
.btn-outline-primary.focus,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
background: #16a34a!important;
color: #fff!important;
border-color: #16a34a;
box-shadow: 0 3px 5px 0 rgba(83,41,196,.1)
}
.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
background: #15803d!important;
border-color: #15803d!important
}
.btn-link-primary {
color: #16a34a
}
.btn-link-primary.active,
.btn-link-primary.focus,
.btn-link-primary:active,
.btn-link-primary:focus,
.btn-link-primary:hover,
.btn-link-primary:not(:disabled):not(.disabled):active {
color: #e04000!important
}
.btn {
padding: 8px 20px;
outline: 0;
font-size: 15px;
letter-spacing: .5px;
-webkit-transition: all .3s;
transition: all .3s;
border-radius: 7px
}
.btn:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important
}
.shadow {
-webkit-box-shadow: 0 0 3px rgba(22,28,45,.15)!important;
box-shadow: 0 0 3px rgba(22,28,45,.15)!important
}
.shadow-large {
-webkit-box-shadow: 0 10px 25px rgba(60,72,88,.15)!important;
box-shadow: 0 10px 25px rgba(60,72,88,.15)!important
}
.rounded {
border-radius: 8px!important
}
.rounded-top {
border-top-left-radius: 8px!important;
border-top-right-radius: 8px!important
}
.rounded-left {
border-top-left-radius: 8px!important;
border-bottom-left-radius: 8px!important
}
.rounded-bottom {
border-bottom-left-radius: 8px!important;
border-bottom-right-radius: 8px!important
}
.rounded-right {
border-top-right-radius: 8px!important;
border-bottom-right-radius: 8px!important
}
#topnav .navbar-toggle .navigation-menu > li > a:hover,
#topnav .navbar-toggle:focus,
#topnav .navbar-toggle:hover {
background-color: transparent
}
.bg-home-half {
position: relative;
padding: 260px 0
}
@media (max-width:768px) {
.bg-home-half {
padding: 150px 0
}
}
.overview-home {
animation: animate-left-to-right 60s linear infinite
}
@keyframes animate-left-to-right {
from {
background-position: 0 0
}
to {
background-position: 100% 0
}
}
.key-feature {
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.key-feature .content .title {
font-size: 18px
}
.key-feature .icon {
height: 40px;
width: 40px;
line-height: 40px;
font-size: 24px;
background: -webkit-gradient(linear,left top,right top,from(transparent),to(rgba(22,163,74,.15)));
background: linear-gradient(90deg,transparent,rgba(22,163,74,.15))
}
.key-feature:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
box-shadow: 0 5px 13px rgba(60,72,88,.2)!important
}
.danger {
color: #d9534f
}
.home-danger {
font-size: 45px
}
.text-custom {
color: #16a34a
}
a {
text-decoration: none!important
}
a.text-custom:hover {
color: #f7911d!important
}
.home-center {
display: table;
width: 100%;
height: 100%
}
.home-desc-center {
display: table-cell;
vertical-align: middle
}
.section-title h3 {
font-size: 22px;
font-weight: 700
}
.section-title h2 {
font-size: 26px;
letter-spacing: 1px;
font-weight: 600
}
.section-title .line-bot {
display: inline-block;
width: 50px;
height: 2px;
border-radius: 30px;
margin: 15px 0 10px;
background: #5a5757
}
.bg-overlay {
background-color: rgba(35,37,47,.8);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%
}
.bg-gradient-primary {
background: #16a34a!important
}
.section {
padding: 100px 0;
position: relative
}
.mt-100 {
margin-top: 60px
}
@media (max-width:768px) {
.mt-60 {
margin-top: 30px
}
.section {
padding: 60px 0!important
}
}
.padding-ten {
padding-left: 10%;
padding-right: 10%
}
.demo-box {
padding: 20px 0 50px 0;
text-align: center
}
.demo-box img {
width: 100%;
height: auto;
position: relative;
top: 0;
box-shadow: 0 0 10px rgba(0,0,0,.1);
transition: all .4s ease-in-out
}
.demo-box img:hover {
box-shadow: 0 5px 15px rgba(0,0,0,.1);
transform: translateY(-10px)
}
.demo-box h4 {
font-weight: 600;
letter-spacing: 1px;
font-size: 16px
}
.demo-box h4 span {
text-transform: capitalize;
font-weight: 400;
font-size: 80%
}
.demos-box {
position: relative;
z-index: 1;
transition: all .5s ease
}
.demos-box:hover {
transform: translateY(-6px)
}
.ribbon.ribbon-primary span {
background-color: #4f46e5!important
}
.ribbon.ribbon-primary span:before {
border-left-color: #4338ca;
border-top-color: #4338ca
}
.ribbon.ribbon-primary span:after {
border-right-color: #4338ca;
border-top-color: #4338ca
}
.ribbon.ribbon-secondary span {
background-color: #5a6d90!important
}
.ribbon.ribbon-secondary span:before {
border-left-color: #465571;
border-top-color: #465571
}
.ribbon.ribbon-secondary span:after {
border-right-color: #465571;
border-top-color: #465571
}
.ribbon.ribbon-success span {
background-color: #2eca8b!important
}
.ribbon.ribbon-success span:before {
border-left-color: #25a06e;
border-top-color: #25a06e
}
.ribbon.ribbon-success span:after {
border-right-color: #25a06e;
border-top-color: #25a06e
}
.ribbon.ribbon-warning span {
background-color: #f17425!important
}
.ribbon.ribbon-warning span:before {
border-left-color: #d55b0e;
border-top-color: #d55b0e
}
.ribbon.ribbon-warning span:after {
border-right-color: #d55b0e;
border-top-color: #d55b0e
}
.ribbon.ribbon-info span {
background-color: #17a2b8!important
}
.ribbon.ribbon-info span:before {
border-left-color: #117a8b;
border-top-color: #117a8b
}
.ribbon.ribbon-info span:after {
border-right-color: #117a8b;
border-top-color: #117a8b
}
.ribbon.ribbon-danger span {
background-color: #e43f52!important
}
.ribbon.ribbon-danger span:before {
border-left-color: #d21e32;
border-top-color: #d21e32
}
.ribbon.ribbon-danger span:after {
border-right-color: #d21e32;
border-top-color: #d21e32
}
.ribbon.ribbon-dark span {
background-color: #3c4858!important
}
.ribbon.ribbon-dark span:before {
border-left-color: #272f3a;
border-top-color: #272f3a
}
.ribbon.ribbon-dark span:after {
border-right-color: #272f3a;
border-top-color: #272f3a
}
.ribbon.ribbon-muted span {
background-color: #8492a6!important
}
.ribbon.ribbon-muted span:before {
border-left-color: #68788f;
border-top-color: #68788f
}
.ribbon.ribbon-muted span:after {
border-right-color: #68788f;
border-top-color: #68788f
}
.ribbon.ribbon-light span {
background-color: #f8f9fc!important
}
.ribbon.ribbon-light span:before {
border-left-color: #d4daed;
border-top-color: #d4daed
}
.ribbon.ribbon-light span:after {
border-right-color: #d4daed;
border-top-color: #d4daed
}
.ribbon.ribbon-blue span {
background-color: #4f46e5!important
}
.ribbon.ribbon-blue span:before {
border-left-color: #4338ca;
border-top-color: #4338ca
}
.ribbon.ribbon-blue span:after {
border-right-color: #4338ca;
border-top-color: #4338ca
}
.ribbon.ribbon-footer span {
background-color: #202942!important
}
.ribbon.ribbon-footer span:before {
border-left-color: #0f131f;
border-top-color: #0f131f
}
.ribbon.ribbon-footer span:after {
border-right-color: #0f131f;
border-top-color: #0f131f
}
.ribbon {
top: -5px;
width: 80px;
height: 80px;
z-index: 2
}
.ribbon.ribbon-right {
right: -5px
}
.ribbon.ribbon-right span {
right: -21px;
padding: 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.ribbon.ribbon-left {
left: -5px
}
.ribbon.ribbon-left span {
left: -21px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.ribbon span {
position: absolute;
top: 17px;
width: 100px;
color: #fff
}
.ribbon span:after,
.ribbon span:before {
content: "";
position: absolute;
top: 100%;
z-index: -1;
border: 3px solid transparent
}
.ribbon span:before {
left: 0
}
.ribbon span:after {
right: 0
}
footer {
color: #adb5bd
}
.social-icon li a {
color: #24272c;
border: 1px solid #24272c;
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
width: 32px;
transition: all .4s ease;
overflow: hidden;
position: relative
}
.social-icon li a .fea-social {
stroke-width: 2
}
.social-icon li a:hover {
background-color: #16a34a;
border-color: #16a34a!important;
color: #fff!important
}
.social-icon li a:hover .fea-social {
fill: #16a34a
}
.social-icon.tagline-social li a {
border: none;
height: auto;
width: auto;
padding-left: 8px
}
.social-icon.tagline-social li a i {
color: #8492a6
}
.social-icon.tagline-social li a i:hover {
color: #16a34a!important
}
.social-icon.tagline-social li a:hover {
background: 0 0
}
.social-icon.tagline-social.social-white li a i {
color: #fff
}
.social-icon.tagline-social.social-dark li a i {
color: #24272c
}
.social-icon.social li a {
color: #adb5bd;
border-color: #adb5bd
}
.social-icon.foot-social-icon li a {
color: #adb5bd;
border-color: #283353
}
.copy-rights {
font-size: 15px;
color: #adb5bd!important
}
.border {
height: 4px;
width: 60px;
border-radius: 5px;
margin: 0 auto 30px;
background-color: #16a34a
}
.title {
margin-bottom: 15px;
font-size: 22px
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 99;
width: 33px;
height: 33px;
line-height: 31px;
display: none;
color: #29292d;
background-color: #dee2e6;
-webkit-transition: all .5s ease;
transition: all .5s ease
}
.back-to-top i {
font-size: 16px
}
.back-to-top:hover {
background-color: #16a34a;
border-color: #16a34a!important;
color: #fff
}
.twentytwenty-after-label,
.twentytwenty-before-label {
display: none!important
}
.twentytwenty-overlay:hover {
background: rgba(60,72,88,.05)
}
.twentytwenty-handle {
background: #16a34a;
border-color: #f1f3f9!important
}
.reports-form .report-info,
.reports-statistics .report-info,
.reports-summary .report-info {
margin-bottom: 25px;
padding: 20px;
background-color: #f8f9fa;
border-radius: var(--reports-radius-sm);
border-left: 4px solid var(--reports-primary);
box-shadow: 0 2px 8px rgba(0,0,0,.03)
}
.reports-form .report-info .row,
.reports-statistics .report-info .row,
.reports-summary .report-info .row {
margin: 0 -10px
}
.reports-form .report-info .col-md-3,
.reports-statistics .report-info .col-md-3,
.reports-summary .report-info .col-md-3 {
padding: 5px 10px
}
.reports-form .report-info strong,
.reports-statistics .report-info strong,
.reports-summary .report-info strong {
font-weight: 600;
color: var(--reports-text)
}
.nav-tabs {
display: flex;
border-bottom: 2px solid var(--reports-primary);
margin-bottom: 20px;
overflow: hidden;
flex-wrap: nowrap;
scrollbar-width: thin;
padding-top: 10px
}
.nav-tabs::-webkit-scrollbar {
height: 5px
}
.nav-tabs::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 5px
}
.nav-tabs::-webkit-scrollbar-thumb {
background-color: var(--reports-text-muted);
border-radius: 5px
}
.nav-tabs > li {
position: relative;
margin-bottom: -2px;
list-style: none;
margin-right: 5px
}
.nav-tabs > li > a {
display: flex;
align-items: center;
padding: 10px 15px;
border-radius: 8px 8px 0 0;
color: var(--reports-text);
text-decoration: none;
font-weight: 500;
border: 1px solid transparent;
transition: var(--reports-transition);
white-space: nowrap
}
.nav-tabs > li > a:hover {
background-color: rgba(22,163,74,.05);
color: var(--reports-primary)
}
.nav-tabs > li > a.active,
.nav-tabs > li > a.active:focus,
.nav-tabs > li > a.active:hover,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
border: 1px solid var(--reports-primary)!important;
border-bottom-color: var(--reports-white);
background: linear-gradient(to bottom,#f5f9ff,#fff);
color: var(--reports-primary);
font-weight: 600
}
.nav-tabs > li:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background-color: transparent;
z-index: 5;
transition: var(--reports-transition)
}
.nav-tabs > li.active:before {
background-color: var(--reports-primary)
}
.nav-tabs > li.category-complete:before {
background-color: var(--reports-success)
}
.category-icon {
display: inline-block;
margin-right: 5px;
font-size: 14px
}
.reports-form .box,
.reports-statistics .box,
.reports-summary .box {
background-color: var(--reports-white);
border-radius: var(--reports-radius);
box-shadow: var(--reports-shadow);
margin-bottom: 30px;
transition: var(--reports-transition);
overflow: hidden;
border: 1px solid rgba(0,0,0,.03)
}
.reports-form .box:hover,
.reports-statistics .box:hover,
.reports-summary .box:hover {
transform: translateY(-5px);
box-shadow: var(--reports-shadow-lg)
}
.reports-form .box-primary,
.reports-statistics .box-primary,
.reports-summary .box-primary {
border-top: 3px solid var(--reports-primary)
}
.reports-form .box-header,
.reports-statistics .box-header,
.reports-summary .box-header {
padding: 18px 20px;
border-bottom: 1px solid var(--reports-border);
background: linear-gradient(to right,#f9fafb,#fff);
display: flex;
justify-content: space-between;
align-items: center
}
.reports-form .box-title,
.reports-statistics .box-title,
.reports-summary .box-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--reports-text)
}
.reports-form .box-body,
.reports-statistics .box-body,
.reports-summary .box-body {
padding: 20px;
background-color: var(--reports-white)
}
.reports-form .box-footer,
.reports-statistics .box-footer,
.reports-summary .box-footer {
padding: 15px 20px;
border-top: 1px solid var(--reports-border);
background-color: #f9fafb;
display: flex;
justify-content: flex-end;
gap: 10px
}
.nav-tabs-custom {
margin-bottom: 20px
}
.nav-tabs-custom .nav-tabs {
border-bottom: 2px solid var(--reports-primary)
}
.nav-tabs-custom .nav-tabs > li > a {
font-size: 14px;
padding: 8px 15px
}
.tab-content {
padding: 5px 0
}
.tab-pane {
display: none;
margin-top: 15px
}
.tab-pane.active {
display: block;
animation: reports-fadeIn .5s ease
}
.tab-pane.fade {
opacity: 0;
transition: opacity .15s linear
}
.tab-pane.fade.show {
opacity: 1
}
.reports-table-container {
overflow: auto;
margin-top: 20px;
position: relative;
cursor: grab;
border-radius: var(--reports-radius);
box-shadow: var(--reports-shadow);
background-color: var(--reports-white);
max-height: 100vh
}
.reports-form .reports-table-container.grabbing {
cursor: grabbing!important
}
.reports-form .reports-table-container::-webkit-scrollbar {
width: 8px;
height: 8px
}
.reports-form .reports-table-container::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 6px
}
.reports-form .reports-table-container::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom,#c5d6e6,#a0c4e6);
border-radius: 6px
}
.reports-form .reports-table-container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(to bottom,#a0c4e6,#64b5f6)
}
.reports-form .reports-table {
border-collapse: collapse;
width: 100%;
font-size: 13px;
background-color: var(--reports-white)
}
.reports-form .reports-table td,
.reports-form .reports-table th {
border: 1px solid #dee2e6;
padding: 0;
position: relative;
vertical-align: middle;
text-align: center
}
.reports-form .reports-table th {
background-color: #f8f9fa;
position: sticky;
top: 0;
z-index: 10;
padding: 8px;
min-height: 80px;
height: auto;
vertical-align: bottom
}
.reports-form .reports-table th.fixed-left {
position: sticky;
left: 0;
z-index: 20;
background-color: #f8f9fa
}
.reports-form .reports-table th.fixed-left.fixed-top {
z-index: 30
}
.reports-form .reports-table td.fixed-left {
position: sticky;
left: 0;
background-color: #f8f9fa;
z-index: 5;
padding: 5px
}
.reports-form .name-column {
min-width: 250px;
text-align: left!important;
padding: 10px!important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.reports-form .question-column {
max-width: 250px;
min-width: 250px
}
.reports-form .result-column {
min-width: 100px;
position: relative
}
.reports-form .high-count {
background-color: var(--reports-success)!important;
color: #fff
}
.reports-form .medium-count {
background-color: var(--reports-warning)!important;
color: #000
}
.reports-form .low-count {
background-color: var(--reports-danger)!important;
color: #fff
}
.reports-form .result-header {
position: relative;
height: 150px;
min-width: 50px
}
.reports-form .result-header-text {
position: absolute;
width: 120px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(-90deg);
white-space: nowrap;
font-weight: 700;
font-size: 13px;
text-align: center;
letter-spacing: .5px;
z-index: 5
}
.reports-form .reports-table th.result-column {
height: 150px;
vertical-align: middle
}
.reports-form .high-header {
background-color: var(--reports-success)!important;
color: #fff
}
.reports-form .medium-header {
background-color: var(--reports-warning)!important;
color: #000
}
.reports-form .low-header {
background-color: var(--reports-danger)!important;
color: #fff
}
.reports-form .question-header {
white-space: nowrap;
font-weight: 700;
font-size: 12px
}
.reports-form .question-description {
margin-top: 5px;
font-size: 11px;
padding: 5px;
display: block;
line-height: 1.2;
height: 70px;
overflow: hidden;
text-overflow: ellipsis;
color: var(--reports-text-light)
}
.reports-form .answer-cell {
padding: 0!important;
height: 33px!important;
vertical-align: middle;
text-align: center
}
.reports-form .answer-option {
display: block;
width: 100%;
height: 100%;
padding: 8px 0;
cursor: pointer;
border: none;
background: 0 0;
text-align: center;
transition: var(--reports-transition)
}
.reports-form .answer-option:hover {
background-color: rgba(0,0,0,.05)
}
.reports-form .answer-high.selected {
background-color: var(--reports-success)!important;
color: #fff
}
.reports-form .answer-medium.selected {
background-color: var(--reports-warning)!important;
color: #000
}
.reports-form .answer-low.selected {
background-color: var(--reports-danger)!important;
color: #fff
}
.reports-form .answer-options-container {
display: flex;
flex-direction: row;
border-style: none
}
.reports-form .answer-column {
flex: 1;
border-right: 1px solid #dee2e6;
text-align: center;
padding: 0;
position: relative;
transition: var(--reports-transition)
}
.reports-form .answer-column:last-child {
border-right: none
}
.reports-form .reports-table th .answer-options-container .answer-column:first-child::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: var(--reports-success)
}
.reports-form .reports-table th .answer-options-container .answer-column:nth-child(2)::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: var(--reports-warning)
}
.reports-form .reports-table th .answer-options-container .answer-column:nth-child(3)::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: var(--reports-danger)
}
.reports-form .answer-text {
display: block;
padding: 5px;
font-size: 11px;
white-space: normal;
word-wrap: break-word;
font-style: italic;
font-weight: 400;
line-height: 1.1;
position: absolute;
height: 60px;
width: 140px;
top: 50%;
left: 50%;
margin-left: -70px;
margin-top: -30px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(270deg);
color: var(--reports-text-light)
}
.reports-form .answer-row {
height: 40px
}
.reports-form .reports-table th .answer-options-container {
height: 150px!important
}
.reports-form .reports-table tbody .answer-options-container {
height: 46px!important
}
.reports-form .selected-high,
.reports-form .selected-low,
.reports-form .selected-medium {
position: relative
}
.reports-form .selected-high {
background-color: rgba(76,175,80,.3)
}
.reports-form .selected-medium {
background-color: rgba(255,204,0,.3)
}
.reports-form .selected-low {
background-color: rgba(255,59,48,.3)
}
.reports-form .selected-high:after,
.reports-form .selected-low:after,
.reports-form .selected-medium:after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 16px;
color: #fff;
font-weight: 700;
opacity: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: rgba(0,0,0,.3);
display: flex;
align-items: center;
justify-content: center;
animation: reports-checkmark-appear .5s cubic-bezier(.175,.885,.32,1.275) forwards
}
.reports-form .answer-column.faded {
background-color: #e6e6e6!important;
opacity: .8
}
.reports-form .category-header,
.reports-form .subcategory-header {
text-align: center;
border: 1px solid #dee2e6;
padding: 8px
}
.reports-form .category-header {
background-color: #e9ecef;
font-weight: 700;
font-size: 14px
}
.reports-form .subcategory-header {
font-weight: 400;
font-size: 12px;
background-color: #b8cce4!important
}
.reports-form #children-list {
border-radius: var(--reports-radius);
box-shadow: 0 4px 20px rgba(0,0,0,.08);
overflow: hidden;
background: linear-gradient(145deg,#f9f9f9,#fff);
padding: 8px;
position: relative;
margin-bottom: 20px
}
.reports-form #children-list:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,rgba(33,150,243,.05) 0,rgba(33,150,243,0) 70%);
z-index: 0
}
.reports-form #children-list .list-group-item {
border-left: 4px solid transparent;
padding: 5px 20px;
transition: all .4s cubic-bezier(.165, .84, .44, 1);
position: relative;
overflow: hidden;
z-index: 1;
border-top: none;
border-right: none;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 4px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,.02);
text-decoration: none;
color: var(--reports-text);
display: block
}
.reports-form #children-list .child-list-item-content {
display: flex;
align-items: center;
gap: 15px
}
.reports-form #children-list .child-list-item-info {
flex: 1;
min-width: 0
}
.reports-form #children-list .child-list-item-name {
font-weight: 600;
margin-bottom: 4px
}
.reports-form #children-list .list-group-item:last-child {
border-bottom: none;
margin-bottom: 0
}
.reports-form #children-list .list-group-item:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: linear-gradient(90deg,#e8f4fe,rgba(232,244,254,.5));
z-index: -1;
transition: width .5s cubic-bezier(.165, .84, .44, 1)
}
.reports-form #children-list .list-group-item:hover:before {
width: 100%
}
.reports-form #children-list .list-group-item.active {
background: linear-gradient(90deg,var(--reports-primary),var(--reports-primary-hover));
color: #fff;
border-left-color: var(--reports-primary-hover);
transform: translateX(8px) scale(1.02);
box-shadow: 0 5px 15px rgba(22,163,74,.3);
border-bottom: none
}
.reports-form #children-list .list-group-item.active:before {
display: none
}
.reports-form #children-list .list-group-item.active .small {
color: rgba(255,255,255,.8)
}
.reports-form #children-list .list-group-item:after {
content: '\f105';
font-family: FontAwesome;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: all .3s ease
}
.reports-form #children-list .list-group-item:hover:after {
opacity: .5;
right: 15px
}
.reports-form #children-list .list-group-item.active:after {
opacity: 1;
right: 15px;
color: #fff
}
.reports-form .child-tab-content {
padding: 30px;
border-radius: var(--reports-radius);
box-shadow: 0 10px 40px rgba(0,0,0,.06);
background-color: #fff;
overflow: hidden;
border: 1px solid rgba(0,0,0,.03);
position: relative
}
.reports-form .child-tab-content:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: radial-gradient(circle,rgba(33,150,243,.03) 0,rgba(255,255,255,0) 70%);
border-radius: 0 0 0 100%;
z-index: 0
}
.reports-form .child-tab-header {
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
font-size: 28px;
color: var(--reports-text);
font-weight: 600;
animation: reports-slideInDown .5s ease;
position: relative;
z-index: 1;
letter-spacing: -.5px
}
.reports-form .child-tab-header:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 80px;
height: 2px;
background: linear-gradient(90deg,var(--reports-primary),#64b5f6);
animation: reports-growWidth .8s ease;
border-radius: 2px
}
.reports-form .subcategory-panel {
margin-bottom: 25px;
border-radius: var(--reports-radius);
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,.05);
transform: translateY(20px);
opacity: 0;
animation: reports-fadeInUp .5s cubic-bezier(.165,.84,.44,1) forwards;
border: 1px solid rgba(0,0,0,.04);
transition: all .3s ease;
position: relative;
z-index: 1
}
.reports-form .subcategory-panel:hover {
box-shadow: 0 8px 25px rgba(0,0,0,.08);
transform: translateY(-2px)
}
.reports-form .subcategory-panel:first-child {
animation-delay: .1s
}
.reports-form .subcategory-panel:nth-child(2) {
animation-delay: .2s
}
.reports-form .subcategory-panel:nth-child(3) {
animation-delay: .3s
}
.reports-form .subcategory-panel:nth-child(4) {
animation-delay: .4s
}
.reports-form .subcategory-panel:nth-child(5) {
animation-delay: .5s
}
.reports-form .subcategory-heading {
background: linear-gradient(to right,#f5f9ff,#fff);
padding: 18px 20px;
cursor: pointer;
position: relative;
transition: all .4s cubic-bezier(.165, .84, .44, 1);
border-left: 4px solid #a0c4e6;
display: flex;
align-items: center
}
.reports-form .subcategory-heading:hover {
background: linear-gradient(to right,#e9f5ff,#f7fbff)
}
.reports-form .accordion-button {
background: transparent;
border: none;
width: 100%;
text-align: left;
padding: 0;
font-size: 16px;
font-weight: 500;
color: var(--reports-text)
}
.reports-form .accordion-button:focus {
box-shadow: none;
outline: none
}
.reports-form .subcategory-heading h4 {
margin: 0;
font-size: 16px;
font-weight: 500;
color: var(--reports-text)
}
.reports-form .subcategory-heading a {
color: var(--reports-text);
text-decoration: none;
display: block;
padding-right: 30px;
width: 100%
}
.reports-form .subcategory-heading a:after {
content: '\f107';
font-family: FontAwesome;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
transition: all .3s ease;
color: #7b8aa0
}
.reports-form .subcategory-heading a[aria-expanded=true]:after {
transform: translateY(-50%) rotate(180deg);
color: var(--primary-color)
}
.reports-form .subcategory-heading.incomplete {
border-left-color: #a0c4e6
}
.reports-form .subcategory-heading.partially-complete {
border-left-color: var(--reports-warning)
}
.reports-form .subcategory-heading.completing {
animation: reports-pulseBackground .6s ease
}
.reports-form .subcategory-heading.complete {
border-left-color: var(--reports-success);
background: linear-gradient(to right,#f5fff0,#fff)
}
.reports-form .progress-indicator {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: rgba(0,0,0,.05);
overflow: hidden
}
.reports-form .progress-indicator-bar {
height: 100%;
background: linear-gradient(90deg,var(--reports-warning),#ffd740);
width: 0;
transition: width .5s cubic-bezier(.165, .84, .44, 1)
}
.reports-form .completion-check {
position: absolute;
right: 60px;
top: 50%;
transform: translateY(-50%) scale(0);
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--reports-success);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
opacity: 0;
transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
box-shadow: 0 2px 8px rgba(126,211,33,.4);
z-index: 10;
pointer-events: none
}
.reports-form .completion-check i {
padding: 20%
}
.reports-form .completion-check.show {
transform: translateY(-50%) scale(1);
opacity: 1;
z-index: 10
}
.reports-form .subcategory-heading:hover .completion-check.show {
opacity: 1
}
.reports-form .subcategory-content {
padding: 25px;
border-top: 1px solid rgba(0,0,0,.05);
background-color: #fcfdff;
position: relative
}
.reports-form .subcategory-content:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(to right,rgba(33,150,243,.05),rgba(255,255,255,0))
}
.reports-form .question-row {
display: flex;
align-items: center;
padding: 15px;
border-radius: 10px;
margin-bottom: 15px;
background-color: #fff;
box-shadow: 0 3px 10px rgba(0,0,0,.04);
transition: all .3s cubic-bezier(.165, .84, .44, 1);
animation: reports-fadeIn .5s ease;
border-left: 3px solid transparent;
position: relative;
overflow: hidden
}
.reports-form .question-row.vertical-layout {
flex-direction: column;
align-items: stretch;
padding: 25px
}
.reports-form .question-row.vertical-layout .question-header {
display: flex;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid rgba(33,150,243,.1)
}
.reports-form .question-row.vertical-layout .question-code {
flex-shrink: 0
}
.reports-form .question-row.vertical-layout .question-text {
padding: 0 20px;
flex: 1;
font-size: 15px;
font-weight: 600;
color: #333
}
.reports-form .question-row.vertical-layout .question-answer {
width: 100%;
min-width: auto
}
.reports-form .question-row:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
background: linear-gradient(to bottom,rgba(33,150,243,.3),rgba(33,150,243,0));
opacity: 0;
transition: opacity .3s ease
}
.reports-form .question-row:hover {
box-shadow: 0 5px 15px rgba(0,0,0,.08);
transform: translateX(5px) scale(1.01)
}
.reports-form .question-row:hover:before {
opacity: 1
}
.reports-form .question-code {
width: 80px;
font-weight: 600;
color: var(--primary-color);
font-size: 15px;
background: rgba(33,150,243,.05);
padding: 5px 10px;
border-radius: 6px;
text-align: center
}
.reports-form .question-text {
flex: 1;
padding: 0 20px;
color: var(--reports-text);
line-height: 1.6;
font-size: 14px
}
.reports-form .question-answer {
width: 100%
}
.reports-form .answer-btn-group {
display: flex;
gap: 15px;
margin-bottom: 15px;
perspective: 1000px;
width: 100%
}
.reports-form .answer-btn {
flex: 0 0 calc(33.333% - 10px)!important;
max-width: calc(33.333% - 10px)!important;
min-width: 0!important;
width: calc(33.333% - 10px)!important;
box-sizing: border-box!important;
text-align: center;
padding: 12px 10px!important;
border: 2px solid transparent;
background-color: #fff;
cursor: pointer;
transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
font-size: 13px;
position: relative;
overflow: hidden!important;
color: #555;
border-radius: 16px;
min-height: 60px;
display: flex!important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
line-height: 1.3;
word-wrap: break-word!important;
overflow-wrap: break-word!important;
word-break: break-word!important;
hyphens: auto!important;
white-space: normal!important;
box-shadow: 0 4px 15px rgba(0,0,0,.08);
font-weight: 500;
opacity: .7
}
.reports-form .answer-btn.high {
background: linear-gradient(135deg,#e8f5e9 0,#fff 100%);
border-color: #c8e6c9
}
.reports-form .answer-btn.medium {
background: linear-gradient(135deg,#fff8e1 0,#fff 100%);
border-color: #ffe082
}
.reports-form .answer-btn.low {
background: linear-gradient(135deg,#ffebee 0,#fff 100%);
border-color: #ffcdd2
}
.reports-form .answer-btn::before {
content: '';
font-family: FontAwesome;
font-size: 20px;
display: block;
margin-bottom: 2px;
transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
animation: float 3s ease-in-out infinite
}
.reports-form .answer-btn.high::before {
content: '\f058';
color: #4caf50;
text-shadow: 0 2px 8px rgba(76,175,80,.3)
}
.reports-form .answer-btn.medium::before {
content: '\f192';
color: #ffa726;
text-shadow: 0 2px 8px rgba(255,167,38,.3)
}
.reports-form .answer-btn.low::before {
content: '\f119';
color: #ef5350;
text-shadow: 0 2px 8px rgba(239,83,80,.3)
}
.reports-form .answer-btn:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 12px 35px rgba(0,0,0,.15)
}
.reports-form .answer-btn.high:hover {
background: linear-gradient(135deg,#c8e6c9 0,#e8f5e9 100%);
border-color: #81c784
}
.reports-form .answer-btn.medium:hover {
background: linear-gradient(135deg,#ffe082 0,#fff8e1 100%);
border-color: #ffd54f
}
.reports-form .answer-btn.low:hover {
background: linear-gradient(135deg,#ffcdd2 0,#ffebee 100%);
border-color: #ef9a9a
}
.reports-form .answer-btn:hover::before {
transform: scale(1.2) rotate(5deg);
animation: bounce .6s ease-in-out
}
.reports-form .answer-btn.active {
color: #fff;
font-weight: 600;
box-shadow: 0 8px 30px rgba(0,0,0,.25);
transform: translateY(-5px) scale(1.05);
border-width: 3px;
opacity: 1
}
.reports-form .answer-btn.high.active {
background: linear-gradient(135deg,#66bb6a 0,#43a047 100%);
border-color: #4caf50;
box-shadow: 0 10px 40px rgba(76,175,80,.5)
}
.reports-form .answer-btn.high.active::before {
color: #fff;
transform: scale(1.3);
animation: pulse 1.5s ease-in-out infinite
}
.reports-form .answer-btn.medium.active {
background: linear-gradient(135deg,#ffa726 0,#ff9800 100%);
border-color: #fb8c00;
box-shadow: 0 10px 40px rgba(255,167,38,.5)
}
.reports-form .answer-btn.medium.active::before {
color: #fff;
transform: scale(1.3);
animation: pulse 1.5s ease-in-out infinite
}
.reports-form .answer-btn.low.active {
background: linear-gradient(135deg,#ef5350 0,#e53935 100%);
border-color: #f44336;
box-shadow: 0 10px 40px rgba(239,83,80,.5)
}
.reports-form .answer-btn.low.active::before {
color: #fff;
transform: scale(1.3);
animation: pulse 1.5s ease-in-out infinite
}
@keyframes float {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-5px)
}
}
@keyframes bounce {
0%,
100% {
transform: scale(1.2) rotate(5deg)
}
50% {
transform: scale(1.3) rotate(-5deg)
}
}
@keyframes pulse {
0%,
100% {
transform: scale(1.3)
}
50% {
transform: scale(1.4)
}
}
.reports-form .answer-btn:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background: rgba(255,255,255,.7);
border-radius: 100%;
transform: scale(0) translate(-50%,-50%);
transform-origin: top left;
opacity: 0
}
.reports-form .answer-btn.active:after {
animation: reports-ripple .7s cubic-bezier(0,.5,.5,1)
}
.reports-form .tab-completion-indicator {
position: absolute;
top: -10px;
right: -10px;
width: 22px;
height: 22px;
background: var(--reports-success);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
box-shadow: 0 2px 5px rgba(126,211,33,.4);
opacity: 0;
transform: scale(0);
animation: reports-popIn .4s cubic-bezier(.175,.885,.32,1.275) forwards;
z-index: 10;
border: 2px solid #fff
}
.reports-form .tab-complete {
border-top: 3px solid var(--reports-success)!important
}
.reports-form .gender-icon,
.reports-statistics .gender-icon,
.reports-summary .gender-icon {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
background-size: cover;
background-position: center;
background-repeat: no-repeat
}
.reports-form #children-list .gender-icon {
width: 50px;
height: 50px
}
.reports-form .boy-icon,
.reports-statistics .boy-icon,
.reports-summary .boy-icon {
background-image: url('/images/avatar-child-boy.webp')
}
.reports-form .girl-icon,
.reports-statistics .girl-icon,
.reports-summary .girl-icon {
background-image: url('/images/avatar-child-girl.webp')
}
.reports-form .child-number {
position: absolute;
top: 0;
left: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #9acd32;
color: #fff;
font-size: 9px;
font-weight: 400;
z-index: 10
}
.reports-form .child-cell {
position: relative
}
.reports-summary .summary-scrollable {
overflow-x: auto;
max-width: 100%;
border-radius: var(--reports-radius);
scrollbar-width: thin;
scrollbar-color: #cbd5e0 #f7fafc;
cursor: grab;
padding: 0;
margin-bottom: 25px;
box-shadow: var(--reports-shadow)
}
.reports-summary .summary-scrollable.grabbing {
cursor: grabbing!important
}
.reports-summary .summary-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin-bottom: 0;
table-layout: auto
}
.reports-summary .summary-table td,
.reports-summary .summary-table th {
border: 1px solid #e0e0e0;
padding: 8px;
text-align: center;
vertical-align: middle;
transition: var(--reports-transition)
}
.reports-summary .summary-table td.data,
.reports-summary .summary-table th.data {
width: 80px;
max-width: 80px;
min-width: 80px
}
.reports-summary .summary-table thead th {
background-color: #f7f9fc;
color: var(--reports-text);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .5px;
position: sticky;
top: 0;
z-index: 10
}
.reports-summary .summary-table thead th.sz {
font-weight: 400;
font-size: 12px;
text-transform: none;
font-style: italic
}
.reports-summary .summary-table td.fio,
.reports-summary .summary-table th.fio {
min-width: 220px;
max-width: 280px;
text-align: left;
padding-left: 15px;
font-weight: 500;
background-color: #f7f9fc;
position: sticky;
left: 0;
z-index: 5;
box-shadow: 2px 0 5px -2px rgba(0,0,0,.1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.reports-summary .summary-table th.fio {
z-index: 15
}
.reports-summary .summary-table tbody tr:nth-child(2n) {
background-color: #f9fafc
}
.reports-summary .summary-cell-high {
background-color: #eefaf0!important;
color: #2e7d32
}
.reports-summary .summary-table td.summary-total-high {
background-color: var(--reports-success)!important;
color: #fff;
font-weight: 600
}
.reports-summary .summary-cell-medium {
background-color: #fffde7!important;
color: #f57f17
}
.reports-summary .summary-table td.summary-total-medium {
background-color: var(--reports-warning)!important;
color: #333;
font-weight: 600
}
.reports-summary .summary-cell-low {
background-color: #fef2f2!important;
color: #c62828
}
.reports-summary .summary-table td.summary-total-low {
background-color: var(--reports-danger)!important;
color: #fff;
font-weight: 600
}
.reports-summary .summary-title {
color: #2e3d62;
font-size: 22px;
font-weight: 600;
text-align: center;
margin-bottom: 5px;
text-transform: uppercase
}
.reports-summary .summary-subtitle {
color: #546e7a;
font-size: 16px;
font-weight: 400;
text-align: center;
margin-bottom: 20px
}
.reports-summary .summary-totals-header {
background: linear-gradient(to right,#f7f9fc,#eef2f7)!important;
font-weight: 600
}
.reports-summary .summary-totals-container {
display: flex;
justify-content: space-between;
gap: 5px
}
.reports-summary .summary-total-badge {
padding: 3px 5px;
border-radius: 4px;
font-weight: 600;
font-size: 11px;
display: inline-flex;
align-items: center;
justify-content: center
}
.reports-summary .summary-total-badge.high {
background-color: var(--reports-success);
color: #fff
}
.reports-summary .summary-total-badge.medium {
background-color: var(--reports-warning);
color: #333
}
.reports-summary .summary-total-badge.low {
background-color: var(--reports-danger);
color: #fff
}
.reports-summary .note-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 13px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.1)
}
.reports-summary .note-table td,
.reports-summary .note-table th {
border: 1px solid #ddd;
padding: 8px;
text-align: center
}
.reports-summary .note-table th {
background-color: #f5f5f5;
font-weight: 700
}
.reports-summary .note-table .empty-cell {
background-color: #f9f9f9
}
.reports-summary .note-table .level-cell {
font-weight: 700;
text-align: left;
padding-left: 15px
}
.reports-summary .note-table .category-cell {
font-weight: 700;
text-align: center;
background-color: #f0f0f0
}
.reports-summary .subcat {
width: 150px
}
.reports-summary #echarts-container,
.reports-summary #summary-echarts-container {
border-radius: var(--reports-radius);
box-shadow: var(--reports-shadow);
background-color: #fff;
padding: 10px;
margin-bottom: 20px
}
.reports-summary #download-chart,
.reports-summary #download-summary-chart {
margin: 10px 5px;
padding: 8px 15px;
border-radius: var(--reports-radius-sm);
transition: var(--reports-transition)
}
.reports-summary #download-chart:hover,
.reports-summary #download-summary-chart:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,.1)
}
.reports-statistics .progress {
height: 6px;
margin-bottom: 10px;
box-shadow: none;
background-color: #f1f2f6;
border-radius: 10px;
overflow: hidden
}
.reports-statistics .progress-bar {
height: 100%;
border-radius: 10px
}
.reports-statistics .progress-bar-success {
background-color: var(--reports-success)
}
.reports-statistics .progress-bar-warning {
background-color: var(--reports-warning)
}
.reports-statistics .progress-bar-danger {
background-color: var(--reports-danger)
}
.reports-statistics .table-responsive {
border-radius: var(--reports-radius);
overflow: hidden;
box-shadow: var(--reports-shadow);
margin-bottom: 20px
}
.reports-statistics .table {
margin-bottom: 0
}
.reports-statistics .table-bordered,
.reports-statistics .table-striped {
border: none
}
.reports-statistics .table-bordered > tbody > tr > td,
.reports-statistics .table-bordered > thead > tr > th {
border: 1px solid #e0e5ec
}
.reports-statistics .table-bordered > thead > tr > th {
background-color: #f9fafc;
color: var(--reports-text);
font-weight: 600;
font-size: 12px;
text-align: center
}
.reports-statistics .table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9fafc
}
.reports-statistics .table-striped > tbody > tr:hover {
background-color: #f0f4f9
}
.reports-statistics .success,
.reports-statistics .table-striped > tbody > tr > td.success {
background-color: rgba(76,175,80,.1)
}
.reports-statistics .table-striped > tbody > tr > td.warning,
.reports-statistics .warning {
background-color: rgba(255,204,0,.1)
}
.reports-statistics .danger,
.reports-statistics .table-striped > tbody > tr > td.danger {
background-color: rgba(255,59,48,.1)
}
.reports-form .btn,
.reports-statistics .btn,
.reports-summary .btn {
border-radius: var(--reports-radius-sm);
padding: 8px 16px;
font-weight: 500;
font-size: 14px;
transition: var(--reports-transition);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
text-decoration: none
}
.reports-form .btn:hover,
.reports-statistics .btn:hover,
.reports-summary .btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,.1)
}
.reports-form .btn-primary,
.reports-statistics .btn-primary,
.reports-summary .btn-primary {
background: var(--reports-primary);
border: none;
color: #fff
}
.reports-form .btn-primary:hover,
.reports-statistics .btn-primary:hover,
.reports-summary .btn-primary:hover {
background: var(--reports-primary-hover)
}
.reports-form .btn-success,
.reports-statistics .btn-success,
.reports-summary .btn-success {
background: var(--reports-success);
border: none;
color: #fff
}
.reports-form .btn-info,
.reports-statistics .btn-info,
.reports-summary .btn-info {
background: var(--reports-info);
border: none;
color: #fff
}
.reports-form .btn-warning,
.reports-statistics .btn-warning,
.reports-summary .btn-warning {
background: var(--reports-warning);
border: none;
color: #000
}
.reports-form .btn-default,
.reports-statistics .btn-default,
.reports-summary .btn-default {
background-color: #fff;
border: 1px solid var(--reports-border);
color: var(--reports-text)
}
@keyframes reports-fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes reports-fadeInUp {
from {
opacity: 0;
transform: translateY(30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes reports-slideInDown {
from {
transform: translateY(-30px);
opacity: 0
}
to {
transform: translateY(0);
opacity: 1
}
}
@keyframes reports-ripple {
0% {
transform: scale(0) translate(-50%,-50%);
opacity: 1
}
100% {
transform: scale(50) translate(-50%,-50%);
opacity: 0
}
}
@keyframes reports-growWidth {
from {
width: 0
}
to {
width: 80px
}
}
@keyframes reports-pulseBackground {
0% {
background-color: #f5f9ff
}
50% {
background-color: #e3f2fd
}
100% {
background-color: #f5fff0
}
}
@keyframes reports-checkmark-appear {
0% {
opacity: 0;
transform: translate(-50%,-50%) scale(0)
}
70% {
opacity: 1;
transform: translate(-50%,-50%) scale(1.2)
}
100% {
opacity: 1;
transform: translate(-50%,-50%) scale(1)
}
}
@keyframes reports-popIn {
0% {
opacity: 0;
transform: scale(0)
}
70% {
opacity: 1;
transform: scale(1.2)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@media (max-width:1200px) {
.reports-form .question-answer {
width: 300px
}
}
@media (max-width:992px) {
.reports-form .box-body,
.reports-form .box-header,
.reports-statistics .box-body,
.reports-statistics .box-header,
.reports-summary .box-body,
.reports-summary .box-header {
padding: 15px
}
.reports-form .question-answer {
width: 250px
}
.reports-form .child-tab-content {
padding: 20px
}
.reports-form .child-tab-header {
font-size: 24px
}
}
@media (max-width:768px) {
.reports-form .nav-tabs > li > a,
.reports-statistics .nav-tabs > li > a,
.reports-summary .nav-tabs > li > a {
padding: 8px 12px;
font-size: 12px
}
.reports-form .box-title,
.reports-statistics .box-title,
.reports-summary .box-title {
font-size: 16px
}
.reports-form .question-row {
flex-direction: column;
align-items: flex-start
}
.reports-form .question-code {
margin-bottom: 10px
}
.reports-form .question-text {
margin-bottom: 15px;
padding: 0
}
.reports-form .question-answer {
width: 100%
}
.reports-form .child-tab-header {
font-size: 20px
}
.reports-statistics .progress {
height: 5px
}
}
@media (max-width:576px) {
.reports-form .box-body,
.reports-form .box-footer,
.reports-form .box-header,
.reports-statistics .box-body,
.reports-statistics .box-footer,
.reports-statistics .box-header,
.reports-summary .box-body,
.reports-summary .box-footer,
.reports-summary .box-header {
padding: 12px
}
.reports-form .report-info,
.reports-statistics .report-info,
.reports-summary .report-info {
padding: 15px
}
.reports-form .report-info .col-md-3,
.reports-statistics .report-info .col-md-3,
.reports-summary .report-info .col-md-3 {
margin-bottom: 10px
}
.reports-form .btn,
.reports-statistics .btn,
.reports-summary .btn {
padding: 6px 12px;
font-size: 13px
}
}
.nav-tabs-custom .nav-tabs > li.active > a,
.nav-tabs-custom .nav-tabs > li.active > a:focus,
.nav-tabs-custom .nav-tabs > li.active > a:hover {
background-color: #fff;
border-color: #ddd;
border-bottom-color: transparent
}
{
font-family: 'SF Pro Display',Roboto,-apple-system,sans-serif
}
.box {
background-color: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
margin-bottom: 25px;
overflow: hidden;
transition: var(--transition);
border: 1px solid rgba(0,0,0,.05)
}
.box:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg)
}
.box-primary {
border-top: 3px solid var(--primary-color)
}
.box-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
background: linear-gradient(to right,#f9fafb,#fff);
display: flex;
justify-content: space-between;
align-items: center
}
.box-title-wrapper {
display: flex;
align-items: center
}
.box-title-icon {
margin-right: 10px;
color: var(--primary-color);
font-size: 18px
}
.box-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-color)
}
.box-body {
padding: 20px;
background-color: var(--white)
}
.box-footer {
padding: 15px 20px;
border-top: 1px solid var(--border-color);
background-color: #f9fafb;
display: flex;
justify-content: flex-end;
gap: 10px
}
.btn {
border-radius: var(--radius-sm);
padding: 8px 16px;
font-weight: 500;
transition: var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,.1)
}
.btn-primary {
background: var(--primary-color);
border: none;
color: #fff!important
}
.btn-primary:hover {
background: var(--primary-hover)
}
.btn-success {
background: var(--success-color);
border: none;
color: #fff!important
}
.btn-success:hover {
background: #388e3c
}
.btn-info {
background: var(--info-color);
border: none
}
.btn-info:hover {
background: #1976d2
}
.btn-warning {
background: var(--warning-color);
border: none;
color: #333!important
}
.btn-warning:hover {
background: #ffa000
}
.btn-danger {
background: var(--danger-color);
border: none;
color: #fff!important
}
.btn-danger:hover {
background: #d32f2f
}
.btn-default {
background-color: var(--white);
border: 1px solid var(--border-color);
color: var(--text-color)!important
}
.btn-default:hover {
background-color: #f8f9fc
}
.btn-xs {
padding: 3px 8px;
font-size: 12px
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 .2rem rgba(22,163,74,.15)
}
.form-group {
margin-bottom: 10px
}
.form-group label {
font-weight: 500;
color: var(--text-color);
margin-bottom: 0;
display: block;
font-size: 14px
}
.role-badge {
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-right: 5px
}
.organization-badge {
display: inline-block;
padding: 3px 10px;
background-color: #e8f5e9;
color: #2e7d32;
border-radius: 20px;
font-size: 12px;
font-weight: 600
}
.table-summary thead > tr > th {
white-space: normal!important
}
.user-organization-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
margin-top: 5px;
color: #546e7a;
background-color: #f5f5f5
}
.select-all-container {
margin-bottom: 15px
}
.custom-checkbox {
display: flex;
align-items: center;
cursor: pointer;
font-size: 14px;
user-select: none;
position: relative;
padding-left: 30px;
margin-bottom: 10px
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #f1f2f6;
border-radius: 4px;
transition: var(--transition)
}
.custom-checkbox:hover input ~ .checkmark {
background-color: #e3e7ed
}
.custom-checkbox input:checked ~ .checkmark {
background-color: var(--primary-color)
}
.checkmark:after {
content: "";
position: absolute;
display: none
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block
}
.custom-checkbox .checkmark:after {
left: 7px;
top: 3px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg)
}
.bulk-actions-container {
display: flex;
align-items: center;
gap: 10px
}
.user-profile-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
background-color: var(--white);
border-radius: var(--radius);
padding: 25px;
margin-bottom: 25px;
box-shadow: var(--shadow);
overflow: hidden
}
.user-profile-header:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: radial-gradient(circle,rgba(22,163,74,.05) 0,rgba(255,255,255,0) 70%);
border-radius: 0 0 0 100%;
z-index: 0
}
.user-profile-info {
align-items: center
}
.user-profile-avatar {
border: 5px solid #f8f9fa;
box-shadow: 0 5px 15px rgba(0,0,0,.08);
margin-right: 25px
}
.user-profile-name h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
color: var(--text-color)
}
.user-profile-meta {
color: var(--text-light)
}
.user-profile-meta i {
color: var(--primary-color)
}
.user-profile-badges {
margin-top: 15px
}
.user-profile-badge {
padding: 5px 12px;
border-radius: 20px
}
.user-profile-actions {
z-index: 1
}
.user-profile-section {
background-color: var(--white);
border-radius: var(--radius);
margin-bottom: 25px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition)
}
.user-profile-section:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg)
}
.user-profile-section-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
background: linear-gradient(to right,#f9fafb,#fff);
display: flex;
justify-content: space-between;
align-items: center
}
.user-profile-section-header h3 {
font-size: 18px;
color: var(--text-color);
display: flex;
align-items: center;
margin: 0
}
.user-profile-section-header h3 i {
margin-right: 10px;
color: var(--primary-color)
}
.user-profile-section-header .btn {
flex-shrink: 0
}
.user-profile-section-body {
padding: 20px;
background-color: var(--white)
}
.user-profile-section-field {
margin-bottom: 15px
}
.user-profile-section-field-label {
font-size: 14px;
color: var(--text-light);
margin-bottom: 5px
}
.user-profile-section-field-value {
font-size: 16px;
color: var(--text-color)
}
.user-stats {
display: flex;
justify-content: space-around;
text-align: center;
padding: 10px 0
}
.user-stat-item {
padding: 0 15px
}
.user-stat-value {
font-size: 24px;
font-weight: 700;
color: var(--text-color);
margin-bottom: 5px
}
.user-stat-label {
font-size: 13px;
color: var(--text-light)
}
.user-activity-list {
list-style: none;
padding: 0;
margin: 0
}
.user-activity-item {
display: flex;
align-items: flex-start;
padding: 15px 0;
border-bottom: 1px solid #f1f2f6
}
.user-activity-item:last-child {
border-bottom: none
}
.user-activity-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
color: #fff;
flex-shrink: 0
}
.activity-login {
background-color: var(--primary-color)
}
.activity-profile {
background-color: #9c27b0
}
.activity-password {
background-color: #ff9800
}
.user-activity-content {
flex: 1
}
.user-activity-title {
font-weight: 600;
color: var(--text-color);
margin-bottom: 5px
}
.user-activity-meta {
font-size: 13px;
color: var(--text-light)
}
.user-activity-meta i {
margin-right: 5px;
color: var(--text-muted)
}
.quick-actions {
display: flex;
flex-direction: column;
gap: 10px
}
.margin-bottom {
margin-bottom: 10px
}
.system-info {
background-color: #f9fafc;
border-radius: var(--radius-sm);
padding: 15px
}
.info-item {
margin-bottom: 15px
}
.info-label {
font-size: 13px;
color: var(--text-light);
margin-bottom: 5px
}
.info-value {
font-size: 14px;
color: var(--text-color);
font-weight: 500
}
.profile-tabs .nav-tabs-custom {
margin-bottom: 0;
background-color: var(--white);
border-radius: var(--radius) var(--radius) 0 0;
box-shadow: var(--shadow)
}
.profile-tabs .nav-tabs {
border-bottom: none;
padding: 0
}
.profile-tabs .nav-tabs > li {
margin-right: 0
}
.profile-tabs .nav-tabs > li > a {
border: none;
margin-right: 0;
border-radius: 0;
padding: 15px 20px;
color: var(--text-color);
font-weight: 500;
transition: var(--transition)
}
.profile-tabs .nav-tabs > li > a:hover {
background-color: rgba(22,163,74,.05)
}
.profile-tabs .nav-tabs > li.active > a,
.profile-tabs .nav-tabs > li.active > a:focus,
.profile-tabs .nav-tabs > li.active > a:hover {
border: none;
border-bottom: 2px solid var(--primary-color);
color: var(--primary-color);
background-color: transparent
}
.profile-tabs .tab-content {
background-color: var(--white);
padding: 25px;
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: 0 1px var(--shadow)
}
.profile-card {
background: white;
border-radius: 16px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
}
.profile-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.profile-header {
background: linear-gradient(135deg, #779CF5 0%, #CBBCE1 100%);
padding: 15px;
color: white;
position: relative;
overflow: hidden;
}
.profile-header-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
.profile-details {
flex: 1;
margin-left: 20px;
}
.profile-bg-shapes {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.profile-shape {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.profile-shape-1 {
width: 120px;
height: 120px;
top: -30px;
right: -20px;
}
.profile-shape-2 {
width: 80px;
height: 80px;
bottom: -20px;
right: 40%;
}
.profile-avatar {
width: 90px;
height: 90px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
font-size: 36px;
border: 3px solid rgba(255, 255, 255, 0.3);
position: relative;
z-index: 2;
}
.profile-name {
font-size: 24px;
font-weight: 700;
margin-bottom: 5px;
}
.profile-meta {
display: flex;
gap: 15px;
margin-top: 0;
flex-wrap: wrap;
}
.profile-meta-item {
display: flex;
align-items: center;
font-size: 14px;
opacity: 0.9;
}
.profile-meta-item i {
margin-right: 6px;
}
.profile-body {
padding: 25px;
}
.profile-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.profile-info-item {
display: flex;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.profile-info-item:last-child {
border-bottom: none;
}
.profile-info-label {
width: 140px;
color: #64748b;
font-size: 14px;
}
.profile-info-value {
flex: 1;
font-weight: 500;
}
/* Stats Card */
.stats-card {
background-color: white;
border-radius: 12px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.07);
overflow: hidden;
height: 100%;
}
.stats-header {
display: flex;
align-items: center;
gap: 10px;
padding: 20px;
border-bottom: 1px solid #f5f5f5;
}
.stats-header i {
color: #4285F4;
font-size: 18px;
}
.stats-body {
padding: 20px;
}
/* Metrics */
.stats-metric {
margin-bottom: 15px;
}
.stats-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.stats-value {
font-weight: bold;
font-size: 24px;
line-height: 1.2;
color: #333;
}
.stats-label {
font-size: 12px;
color: #777;
}
/* Results distribution */
.stats-summary {
margin-bottom: 25px;
}
.results-distribution {
height: 8px;
border-radius: 4px;
background-color: #f5f5f5;
display: flex;
overflow: hidden;
margin-bottom: 15px;
}
.results-high {
background-color: #34A853;
height: 100%;
}
.results-medium {
background-color: #FBBC05;
height: 100%;
}
.results-low {
background-color: #EA4335;
height: 100%;
}
.results-legend {
display: flex;
flex-wrap: wrap;
gap: 15px;
font-size: 0.85rem;
}
.legend-item {
display: flex;
align-items: center;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 2px;
margin-right: 5px;
}
.legend-color.results-high {
background-color: #34A853;
}
.legend-color.results-medium {
background-color: #FBBC05;
}
.legend-color.results-low {
background-color: #EA4335;
}
/* Progress meter */
.progress-wrapper {
margin-top: 30px;
}
.progress-meter {
height: 4px;
background-color: #f5f5f5;
border-radius: 2px;
position: relative;
margin-bottom: 5px;
}
.progress-meter-bar {
height: 100%;
background: linear-gradient(to right, #EA4335, #FBBC05, #34A853);
border-radius: 2px;
}
.progress-meter-pointer {
position: absolute;
top: -8px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
border: 3px solid #4285F4;
transform: translateX(-50%);
}
.progress-zones {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
color: #777;
margin-top: 10px;
}
.progress-zone {
flex: 1;
text-align: center;
}
.progress-zone.zone-danger {
color: #EA4335;
}
.progress-zone.zone-warning {
color: #FBBC05;
}
.progress-zone.zone-info {
color: #4285F4;
}
.progress-zone.zone-success {
color: #34A853;
}
/* Gender icons */
.boy-icon, .girl-icon {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 10px;
position: relative;
}
.boy-icon {
background-color: #E3F2FD;
}
.boy-icon:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 14px;
height: 14px;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
.girl-icon {
background-color: #FCE4EC;
}
.girl-icon:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 14px;
height: 14px;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
.child-gender-icon {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
/* Reports section */
.reports-section {
margin-top: 30px;
}
.reports-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.reports-title {
font-size: 1.2rem;
font-weight: 600;
color: #333;
}
.report-filters {
display: flex;
gap: 15px;
}
.report-select {
padding: 8px 15px;
border-radius: 6px;
border: 1px solid #e0e0e0;
font-size: 0.9rem;
background-color: white;
}
.category-card {
background-color: white;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
margin-bottom: 20px;
}
.category-name {
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.category-code {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
color: white;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
}
.category-progress {
display: flex;
align-items: center;
gap: 10px;
}
.category-score {
font-weight: 600;
font-size: 1.1rem;
}
.category-body {
padding: 20px;
}
.category-subcats {
margin-top: 20px;
}
/* Report selector styles */
.report-selector-container {
background: white;
border-radius: 16px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
padding: 20px;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 20px;
}
.report-selector-label {
font-weight: 500;
color: #4a5568;
white-space: nowrap;
}
.report-selector-control {
flex: 1;
position: relative;
}
#report-selector {
width: 100%;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 12px 15px;
-webkit-appearance: none;
background: white;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
#report-selector:focus {
border-color: #4776E6;
box-shadow: 0 0 0 3px rgba(71, 118, 230, 0.1);
outline: none;
}
.selector-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #a0aec0;
pointer-events: none;
}
.report-scoring-guide {
display: flex;
align-items: center;
gap: 15px;
}
.score-guide-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: #4a5568;
}
.score-guide-indicator {
width: 12px;
height: 12px;
border-radius: 3px;
}
.guide-high {
background-color: #2ecc71;
}
.guide-medium {
background-color: #f39c12;
}
.guide-low {
background-color: #e74c3c;
}
/* Responsive adjustments */
@media (max-width: 991px) {
.profile-header-content {
flex-direction: column;
text-align: center;
}
.profile-details {
margin-left: 0;
margin-top: 15px;
}
.profile-meta {
justify-content: center;
}
.report-selector-container {
flex-direction: column;
align-items: flex-start;
}
.report-scoring-guide {
width: 100%;
justify-content: space-between;
}
}
@media (max-width: 767px) {
.analytics-tabs {
overflow-x: auto;
}
.analytics-tab {
white-space: nowrap;
padding: 10px 15px;
}
}
/* Увеличиваем аватарку */
.profile-avatar img {
height: 100px !important; /* Увеличиваем с 100px до 140px */
width: auto;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
transition: transform 0.3s ease;
}
.profile-avatar:hover img {
transform: scale(1.05); /* Легкое увеличение при наведении */
}
/* Добавляем эффект поблескивания */
.profile-avatar {
position: relative;
overflow: hidden;
border-radius: 50%;
}
.profile-avatar::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to bottom right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(30deg);
animation: shine 4s infinite linear;
z-index: 2;
pointer-events: none;
}
@keyframes shine {
0% {
transform: translateX(-100%) rotate(30deg);
}
20%, 100% {
transform: translateX(100%) rotate(30deg);
}
}
/* Создаем декоративную окантовку */
.profile-avatar::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
background: linear-gradient(135deg, #3a589b, #5b7bb2);
z-index: 0;
animation: pulse 3s infinite;
}
@keyframes pulse {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
/* Сдвигаем информацию для выравнивания с увеличенной аватаркой */
.profile-details {
padding-left: 20px;
}
/* child_view*/
/* Стили для кнопки Вход */
#topnav .btn-login {
background-color: #16a34a;
color: #ffffff;
padding: 6px 15px;
border-radius: 7px;
transition: all 0.3s ease;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
justify-content: center;
}
#topnav .btn-login:hover {
background-color: #15803d;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(22, 163, 74, 0.2);
}
/* Стили для отображения аватара и имени пользователя */
#topnav .user-dropdown {
display: flex;
align-items: center;
gap: 8px;
}
#topnav .user-avatar-mini {
width: 28px;
height: 28px;
background-color: #e3f2fd;
color: #16a34a;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all 0.3s ease;
}
#topnav .has-submenu:hover .user-avatar-mini {
background-color: #dcfce7;
}
#topnav .has-submenu.active .user-avatar-mini {
background-color: #16a34a;
color: #ffffff;
}
/* Улучшение стилей для выпадающего меню */
#topnav .submenu {
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
overflow: hidden;
min-width: 180px;
border-top: 3px solid #16a34a;
}
#topnav .submenu li a {
padding: 10px 15px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
#topnav .submenu li a:hover {
background-color: #f8f9fc;
padding-left: 20px;
}
/* Reports Permission Management Styles */
.reports-permissions {
padding: 20px 0;
}
/* Toast notification styling */
.reports-permissions .toast {
position: fixed;
top: 20px;
right: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
padding: 15px 20px;
z-index: 9999;
display: flex;
align-items: center;
max-width: 350px;
transform: translateY(-100px);
opacity: 0;
transition: all 0.5s ease;
}
.reports-permissions .toast.show {
transform: translateY(0);
opacity: 1;
}
.reports-permissions .toast .toast-icon {
margin-right: 15px;
font-size: 20px;
}
.reports-permissions .toast.success {
border-left: 4px solid #4CAF50;
}
.reports-permissions .toast.success .toast-icon {
color: #4CAF50;
}
.reports-permissions .toast.error {
border-left: 4px solid #e53935;
}
.reports-permissions .toast.error .toast-icon {
color: #e53935;
}
.reports-permissions .toast-content h4 {
margin: 0 0 5px;
font-size: 16px;
font-weight: 600;
}
.reports-permissions .toast-content p {
margin: 0;
color: #777;
font-size: 14px;
}
/* Card styling */
.reports-permissions .card {
background-color: white;
border-radius: var(--reports-radius, 12px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.03);
}
.reports-permissions .card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.reports-permissions .card-header {
padding: 18px 20px;
border-bottom: 1px solid #e0e5ec;
background: linear-gradient(to right, #f9fafb, #ffffff);
display: flex;
justify-content: space-between;
align-items: center;
}
.reports-permissions .card-header i {
margin-right: 10px;
color: #16a34a;
}
.reports-permissions .card-body {
padding: 20px;
background-color: white;
}
.reports-permissions .card-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
color: #283252;
}
/* Empty state styling */
.reports-permissions .empty-state {
text-align: center;
padding: 30px;
}
.reports-permissions .empty-state i {
font-size: 48px;
color: #ddd;
margin-bottom: 15px;
}
.reports-permissions .empty-state h4 {
color: #777;
margin-bottom: 10px;
}
.reports-permissions .empty-state p {
color: #999;
max-width: 400px;
margin: 0 auto;
}
/* Tag styling */
.reports-permissions .tag {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
margin-right: 8px;
}
.reports-permissions .tag i {
margin-right: 5px;
font-size: 11px;
}
.reports-permissions .tag-user {
background-color: #e3f2fd;
color: #1565c0;
}
.reports-permissions .tag-group {
background-color: #e8f5e9;
color: #2e7d32;
}
.reports-permissions .tag-category {
background-color: #fff8e1;
color: #f57f17;
}
/* Permission row styling */
.reports-permissions .permission-row {
transition: all 0.3s ease;
border-radius: 8px;
margin-bottom: 5px;
}
.reports-permissions .permission-row:hover {
background-color: #f8f9fc;
transform: translateX(5px);
}
/* Delete button styling */
.reports-permissions .delete-permission {
background: none;
border: none;
color: #e74c3c;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
background-color: rgba(231, 76, 60, 0.1);
}
.reports-permissions .delete-permission:hover {
background-color: #e74c3c;
color: white;
transform: scale(1.1);
}
/* Input styling */
.reports-permissions .input-icon {
position: relative;
}
.reports-permissions .input-icon i {
position: absolute;
top: 12px;
left: 15px;
color: #aaa;
}
.reports-permissions .input-icon select {
padding-left: 40px;
height: 38px;
border: 1px solid #e8eaf1;
box-shadow: none;
border-radius: 6px;
font-size: 14px;
transition: all 0.2s ease;
}
.reports-permissions .input-icon select:focus {
border-color: #16a34a;
box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.1);
}
/* Search input styling */
.reports-permissions #permissionSearch {
border-radius: 20px;
padding-left: 35px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: 12px center;
background-size: 14px;
border: 1px solid #e8eaf1;
transition: all 0.3s ease;
}
.reports-permissions #permissionSearch:focus {
box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.1);
border-color: #16a34a;
}
/* Modal styling */
.reports-permissions .modal-content {
border-radius: 15px;
border: none;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.reports-permissions .modal-header {
background: linear-gradient(135deg, #5b7bb2 0%, #3a589b 100%);
color: white;
border-bottom: none;
padding: 20px 25px;
}
.reports-permissions .modal-header .close {
color: white;
text-shadow: none;
opacity: 0.8;
}
.reports-permissions .modal-header .close:hover {
opacity: 1;
}
.reports-permissions .modal-body {
padding: 25px;
}
.reports-permissions .modal-footer {
border-top: 1px solid #f1f1f1;
padding: 15px 25px;
}
/* Form styling */
.reports-permissions .form-group {
margin-bottom: 20px;
}
.reports-permissions .form-group label {
font-weight: 500;
margin-bottom: 8px;
color: #555;
display: block;
}
.reports-permissions .form-group label i {
margin-right: 5px;
}
.reports-permissions .alert-info {
border-left: 4px solid #2196F3;
background-color: #e3f2fd;
color: #0c63e4;
}
/* Animation classes */
.reports-permissions .animate__fadeOut {
animation: fadeOut 0.5s forwards;
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Fix for the modal scrolling issue */
.modal {
overflow-y: auto !important;
}
body.modal-open {
overflow: hidden;
padding-right: 0 !important;
}
/* Add permission button fix */
.reports-permissions #add-permission-btn:not(:disabled) {
cursor: pointer;
opacity: 1;
}
.reports-permissions #add-permission-btn:disabled {
cursor: not-allowed;
opacity: 0.6;
}
/* Responsive styles */
@media (max-width: 768px) {
.reports-permissions .card-header {
flex-direction: column;
align-items: flex-start;
}
.reports-permissions .card-header div:last-child {
width: 100%;
margin-top: 10px;
}
.reports-permissions #permissionSearch {
width: 100% !important;
}
}
.action-buttons {
display: flex;
gap: 8px;
}
.edit-btn:hover {
color: white;
background-color: #0d6efd;
}
.delete-btn:hover {
color: white;
background-color: #dc3545;
}
.transfer-btn:hover {
color: white;
background-color: #f0ad4e;
}
/* Стили для табов */
.custom-tabs-container {
width: 100%;
}
.custom-tabs-nav {
display: flex;
list-style: none;
padding: 0;
margin: 0 0 20px 0;
border-bottom: 1px solid #dee2e6;
gap: 10px;
}
.tab-item {
margin-bottom: -1px;
}
.tab-btn {
border: none;
background: transparent;
padding: 12px 20px;
font-size: 16px;
font-weight: 500;
color: #6c757d;
border-bottom: 3px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
}
.tab-btn:hover {
color: #495057;
border-bottom-color: #adb5bd;
}
.tab-btn.active {
color: #0d6efd;
border-bottom-color: #0d6efd;
font-weight: 600;
}
.tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #f8f9fa;
color: #212529;
border-radius: 50px;
font-size: 12px;
min-width: 24px;
height: 24px;
padding: 0 6px;
}
.tab-content-container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
padding: 24px;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Child Profile Analytics Styles */
.child-analytics-container {
font-family: 'SF Pro Display', 'Roboto', -apple-system, sans-serif;
}
/* Main report panel */
.child-reports-panel {
border: none;
border-radius: var(--radius, 12px);
box-shadow: var(--shadow, 0 4px 15px rgba(0, 0, 0, 0.05));
margin-top: 25px;
margin-bottom: 25px;
background-color: var(--white, #ffffff);
overflow: hidden;
transition: var(--transition, all 0.3s ease);
}
.child-reports-panel:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg, 0 8px 25px rgba(0, 0, 0, 0.12));
}
.panel-heading {
background: linear-gradient(135deg, #5b7bb2 0%, #3a589b 100%);
color: white;
padding: 18px 20px;
border-bottom: none;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.panel-heading .panel-title {
font-size: 18px;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
}
.panel-heading .panel-title i {
margin-right: 10px;
}
.panel-body {
padding: 25px;
background-color: var(--white, #ffffff);
}
/* Form controls in report */
.form-control {
border-radius: var(--radius-sm, 8px);
border: 1px solid var(--border-color, #e0e5ec);
box-shadow: none;
padding: 8px 12px;
transition: var(--transition, all 0.3s ease);
}
.form-control:focus {
border-color: var(--primary-color, #2777e1);
box-shadow: 0 0 0 0.2rem rgba(39, 119, 225, 0.1);
}
/* Report selector */
#report-selector-form {
margin-bottom: 25px;
padding: 15px;
background-color: var(--bg-light, #f2f3f8);
border-radius: var(--radius-sm, 8px);
border-left: 4px solid var(--primary-color, #2777e1);
}
#report-selector {
border-radius: 20px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 30px;
}
/* Analytics components */
.analytics-summary-panel {
background-color: var(--white, #ffffff);
border-radius: var(--radius, 12px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
padding: 20px;
margin-bottom: 25px;
border: 1px solid rgba(0, 0, 0, 0.03);
}
/* Level stats cards */
.level-stats {
display: flex;
gap: 15px;
margin-top: 20px;
margin-bottom: 20px;
}
.stat-card-label {
font-size: 14px;
color: var(--text-light, #64748b);
margin-bottom: 5px;
}
.stat-card-percent {
font-size: 13px;
font-weight: 600;
padding: 3px 8px;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.05);
}
/* Progress bar */
.progress {
height: 25px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 10px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 25px;
color: #fff;
text-align: center;
background-color: #337ab7;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
transition: width 0.6s ease;
}
.progress-bar-success {
background-color: #2ecc71;
}
.progress-bar-warning {
background-color: #f39c12;
color: #333;
}
.progress-bar-danger {
background-color: #e74c3c;
}
.progress-bar-info {
background-color: #3498db;
}
/* Modern progress meter */
.progress-meter-container {
margin: 30px 0;
position: relative;
}
.progress-meter {
height: 15px;
background-color: #f1f1f1;
border-radius: 10px;
overflow: hidden;
position: relative;
margin-bottom: 35px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-meter-bar {
height: 100%;
background: linear-gradient(90deg, #e74c3c 0%, #f39c12 33%, #3498db 66%, #2ecc71 100%);
border-radius: 10px;
transition: width 1s ease-in-out;
position: relative;
}
.progress-meter-label {
position: absolute;
top: -25px;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 3px 8px;
border-radius: 5px;
font-size: 12px;
font-weight: bold;
}
.progress-meter-label:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.progress-meter-ranges {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.range {
flex: 1;
text-align: center;
font-size: 11px;
font-weight: 600;
padding: 5px 0;
border-radius: 5px;
}
.range-danger {
color: #e74c3c;
background-color: rgba(231, 76, 60, 0.1);
}
.range-warning {
color: #f39c12;
background-color: rgba(243, 156, 18, 0.1);
}
.range-info {
color: #3498db;
background-color: rgba(52, 152, 219, 0.1);
}
.range-success {
color: #2ecc71;
background-color: rgba(46, 204, 113, 0.1);
}
/* Charts */
.chart-container {
position: relative;
height: 300px;
background-color: white;
border-radius: var(--radius, 12px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
padding: 15px;
margin-bottom: 25px;
transition: var(--transition, all 0.3s ease);
}
.chart-container:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
/* Category table */
.category-analytics-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 25px;
}
.category-analytics-table th {
background-color: #f8f9fa;
color: var(--text-color, #283252);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 12px 15px;
border-bottom: 2px solid #f1f2f6;
text-align: left;
}
.category-analytics-table td {
padding: 15px;
border-bottom: 1px solid #f1f2f6;
vertical-align: middle;
}
.category-analytics-table tbody tr {
transition: var(--transition, all 0.3s ease);
background-color: white;
}
.category-analytics-table tbody tr:hover {
background-color: #f9fafc;
transform: translateX(5px);
}
.category-info {
display: flex;
align-items: center;
gap: 15px;
}
.category-icon {
border-radius: 50%;
background-color: #f1f2f6;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.category-code {
font-size: 12px;
color: var(--text-light, #64748b);
}
.cell-value {
display: flex;
flex-direction: column;
align-items: center;
font-weight: 600;
font-size: 16px;
}
.cell-high {
color: #2ecc71;
}
.cell-medium {
color: #f39c12;
}
.cell-low {
color: #e74c3c;
}
.cell-percent {
font-size: 11px;
color: var(--text-light, #64748b);
font-weight: normal;
}
/* Category score gauge */
.category-score-gauge {
display: flex;
justify-content: center;
align-items: center;
}
.gauge-container {
position: relative;
width: 80px;
height: 40px;
overflow: hidden;
}
.gauge-background {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
border-radius: 50%;
border: 8px solid #f1f2f6;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
box-sizing: border-box;
transform: rotate(45deg);
}
.gauge-fill {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
border-radius: 50%;
border: 8px solid;
border-color: transparent;
border-top: 8px solid #3498db;
border-right: 8px solid #3498db;
box-sizing: border-box;
transform: rotate(45deg);
transform-origin: center;
transition: transform 1s ease-in-out;
}
.gauge-cover {
position: absolute;
top: 0px;
left: 0;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.gauge-value {
font-size: 14px;
font-weight: 700;
color: #333;
}
.stat-pill {
font-size: 12px;
font-weight: 600;
padding: 3px 8px;
border-radius: 20px;
min-width: 35px;
text-align: center;
}
.stat-high {
background-color: rgba(46, 204, 113, 0.1);
color: #2ecc71;
}
.stat-medium {
background-color: rgba(243, 156, 18, 0.1);
color: #f39c12;
}
.stat-low {
background-color: rgba(231, 76, 60, 0.1);
color: #e74c3c;
}
.subcategory-progress {
display: flex;
align-items: center;
gap: 10px;
}
.progress-text {
font-size: 12px;
font-weight: 600;
color: var(--text-color, #283252);
}
.category-badge {
background-color: var(--primary-light, #dcfce7);
color: var(--primary-color, #2777e1);
padding: 3px 8px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
}
/* Questions table */
.questions-table {
margin-top: 15px;
}
.questions-table th {
background-color: #f8f9fa;
color: var(--text-color, #283252);
font-weight: 600;
font-size: 12px;
padding: 10px 15px;
border-bottom: 2px solid #f1f2f6;
}
.questions-table td {
padding: 12px 15px;
border-bottom: 1px solid #f1f2f6;
vertical-align: middle;
}
.question-code {
font-weight: 600;
font-family: monospace;
color: var(--primary-color, #2777e1);
background-color: rgba(39, 119, 225, 0.05);
border-radius: 4px;
padding: 5px 8px;
}
.level-description {
font-size: 13px;
color: var(--text-light, #64748b);
font-style: italic;
}
.level-badge {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.level-success {
background-color: rgba(46, 204, 113, 0.1);
color: #27ae60;
}
.level-warning {
background-color: rgba(243, 156, 18, 0.1);
color: #e67e22;
}
.level-danger {
background-color: rgba(231, 76, 60, 0.1);
color: #c0392b;
}
/* Subcategory details */
.subcategory-detail-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #f1f2f6;
display: flex;
align-items: center;
gap: 10px;
}
.subcategory-detail-title i {
color: var(--primary-color, #2777e1);
}
/* Timeline chart */
.timeline-legend {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 10px;
}
.legend-item {
display: flex;
align-items: center;
font-size: 13px;
}
.legend-color {
width: 20px;
height: 10px;
border-radius: 2px;
margin-right: 5px;
}
/* Category Strength Analysis */
.category-strength-analysis {
height: 100%;
display: flex;
flex-direction: column;
}
.category-strength-analysis .panel-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.strengths-section,
.weaknesses-section,
.recommendation-section {
margin-bottom: 15px;
}
.strengths-section h5,
.weaknesses-section h5,
.recommendation-section h5 {
font-size: 15px;
font-weight: 600;
margin-bottom: 10px;
color: var(--text-color, #283252);
display: flex;
align-items: center;
gap: 8px;
}
.list-group {
border-radius: var(--radius-sm, 8px);
overflow: hidden;
}
.list-group-item {
background-color: var(--white, #ffffff);
border: 1px solid rgba(0, 0, 0, 0.05);
padding: 10px 15px;
transition: var(--transition, all 0.3s ease);
}
.list-group-item:hover {
background-color: #f9fafc;
}
.recommendation-section .well {
background-color: #f9fafc;
border: none;
border-radius: var(--radius-sm, 8px);
padding: 15px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* Section headers */
.section-header {
margin: 40px 0 20px;
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color, #e0e5ec);
display: flex;
align-items: center;
}
.section-header::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(to right, var(--primary-color, #2777e1), #64b5f6);
border-radius: 3px;
}
.section-header h4 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-color, #283252);
display: flex;
align-items: center;
gap: 10px;
}
.section-header i {
color: var(--primary-color, #2777e1);
}
/* Responsive adjustments */
@media (max-width: 1199px) {
.level-stats {
flex-wrap: wrap;
}
.stat-card {
flex: 0 0 calc(33.33% - 10px);
min-height: 100px;
}
}
@media (max-width: 991px) {
.subcategory-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.subcategory-stats {
width: 100%;
justify-content: flex-start;
}
.category-analytics-table .category-info {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
}
@media (max-width: 767px) {
.panel-body {
padding: 15px;
}
.stat-card {
flex: 0 0 100%;
}
.chart-container {
height: 250px;
}
}
@media (max-width: 576px) {
.report-selector-form label {
text-align: left;
}
.category-analytics-table th,
.category-analytics-table td {
padding: 8px;
}
.section-header h4 {
font-size: 16px;
}
}
/* Custom enhancements */
.mb-20 {
margin-bottom: 20px;
}
/* Skills radar chart */
.skills-radar-container {
background: #f9fafc;
border-radius: var(--radius, 12px);
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
margin-bottom: 25px;
}
.skills-radar-title {
font-size: 16px;
font-weight: 600;
text-align: center;
margin-bottom: 15px;
color: var(--text-color, #283252);
}
/* Progress summary message */
.progress-summary-message {
background-color: #f9fafc;
border-left-width: 4px;
padding: 15px;
margin-top: 20px;
border-radius: var(--radius-sm, 8px);
}
.progress-summary-message strong {
display: block;
margin-bottom: 5px;
}
/* Insights card */
.insights-card {
background-color: white;
border-radius: var(--radius, 12px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
padding: 20px;
margin-bottom: 25px;
border-left: 4px solid var(--primary-color, #2777e1);
}
.insights-card-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: var(--text-color, #283252);
display: flex;
align-items: center;
gap: 10px;
}
.insights-card-title i {
color: var(--primary-color, #2777e1);
}
.insights-list {
padding-left: 20px;
}
.insights-list li {
margin-bottom: 10px;
position: relative;
}
.insights-list li::before {
content: '';
position: absolute;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--primary-color, #2777e1);
}
/* Buttons */
.btn-sm {
padding: 5px 10px;
font-size: 12px;
border-radius: var(--radius-sm, 8px);
transition: var(--transition, all 0.3s ease);
}
.btn-primary {
background-color: var(--primary-color, #2777e1);
border-color: var(--primary-color, #2777e1);
}
.btn-primary:hover {
background-color: #1c68d4;
border-color: #1c68d4;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(39, 119, 225, 0.2);
}
/* Child profile information cards */
.child-profile-card {
display: flex;
flex-direction: column;
height: 100%;
background-color: white;
border-radius: var(--radius, 12px);
overflow: hidden;
box-shadow: var(--shadow, 0 4px 15px rgba(0, 0, 0, 0.05));
transition: var(--transition, all 0.3s ease);
}
.child-profile-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg, 0 8px 25px rgba(0, 0, 0, 0.12));
}
.child-profile-header {
background: linear-gradient(135deg, #5b7bb2 0%, #3a589b 100%);
color: white;
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
}
.child-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #f1f2f6;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
color: white;
overflow: hidden;
}
.child-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.child-info {
flex: 1;
}
.child-name {
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
}
.child-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 10px;
}
.child-meta-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
opacity: 0.8;
}
.child-profile-body {
padding: 20px;
flex: 1;
}
.child-detail-list {
list-style: none;
padding: 0;
margin: 0;
}
.child-detail-item {
padding: 12px 0;
border-bottom: 1px solid #f1f2f6;
display: flex;
align-items: center;
}
.child-detail-item:last-child {
border-bottom: none;
}
.child-detail-label {
width: 140px;
color: var(--text-light, #64748b);
font-size: 14px;
}
.child-detail-value {
flex: 1;
font-weight: 500;
}
.child-gender-icon {
vertical-align: -5px;
margin-right: 5px;
}
/* Report navigation */
.report-navigation {
margin-bottom: 20px;
padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
background-color: #f9fafc;
border-radius: var(--radius, 12px);
padding: 15px;
}
.report-nav-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-color, #283252);
text-decoration: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
transition: var(--transition, all 0.3s ease);
}
.report-nav-btn:hover {
background-color: var(--primary-color, #2777e1);
color: white;
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(39, 119, 225, 0.2);
}
.report-nav-indicator {
font-size: 14px;
color: var(--text-light, #64748b);
}
/* Timeline enhancements */
.timeline-container {
position: relative;
padding-left: 30px;
margin-bottom: 30px;
padding-bottom: 15px;
}
.timeline-container::before {
content: '';
position: absolute;
top: 0;
left: 15px;
height: 100%;
width: 2px;
background: #f1f2f6;
}
.timeline-item {
position: relative;
margin-bottom: 20px;
}
.timeline-item::before {
content: '';
position: absolute;
top: 0;
left: -30px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--primary-color, #2777e1);
border: 3px solid white;
box-shadow: 0 0 0 2px rgba(39, 119, 225, 0.2);
}
.timeline-date {
font-size: 12px;
font-weight: 600;
margin-bottom: 5px;
color: var(--text-light, #64748b);
}
.timeline-content {
background-color: white;
border-radius: var(--radius-sm, 8px);
padding: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.timeline-title {
font-weight: 600;
margin-bottom: 5px;
color: var(--text-color, #283252);
}
.timeline-text {
font-size: 13px;
color: var(--text-light, #64748b);
}
/* Analysis tabs */
.analysis-tabs {
display: flex;
background-color: #f9fafc;
border-radius: var(--radius, 12px);
padding: 5px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
overflow-x: auto;
}
.analysis-tab {
flex: 1;
min-width: 150px;
padding: 10px 15px;
text-align: center;
border-radius: var(--radius-sm, 8px);
cursor: pointer;
transition: var(--transition, all 0.3s ease);
font-weight: 500;
color: var(--text-color, #283252);
}
.analysis-tab.active {
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
color: var(--primary-color, #2777e1);
}
.analysis-tab-content {
display: none;
}
.analysis-tab-content.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Scoring guide */
.scoring-guide {
display: flex;
align-items: center;
gap: 15px;
background-color: #f9fafc;
border-radius: var(--radius-sm, 8px);
padding: 15px;
margin-bottom: 20px;
}
.score-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
}
.score-indicator {
width: 15px;
height: 15px;
border-radius: 3px;
}
.high-score {
background-color: #2ecc71;
}
.medium-score {
background-color: #f39c12;
}
.low-score {
background-color: #e74c3c;
}
.tabs-navigation {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: thin;
background-color: #fff;
}
.tabs-navigation .analytics-tab {
position: relative;
margin-right: 10px;
white-space: nowrap;
}
.tabs-navigation .analytics-tab a {
display: flex;
align-items: center;
padding: 10px 15px;
color: var(--text-color, #333);
text-decoration: none;
transition: all 0.3s ease;
border-radius: 5px;
}
.tabs-navigation .analytics-tab a:hover {
background-color: rgba(22, 163, 74, 0.05);
color: var(--primary-color, #16a34a);
}
.tabs-navigation .analytics-tab a.active {
color: var(--primary-color, #16a34a);
font-weight: 600;
background-color: rgba(22, 163, 74, 0.1);
}
.tabs-navigation .analytics-tab a i {
margin-right: 8px;
}
/* Скрыть горизонтальную полосу прокрутки но оставить возможность прокрутки */
.tabs-navigation::-webkit-scrollbar {
height: 5px;
}
.tabs-navigation::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 5px;
}
.tabs-navigation::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 5px;
}
.child-view {
font-family: 'SF Pro Display', 'Roboto', -apple-system, sans-serif;
}
.child-view .d-flex.justify-content-end.mb-2 {
margin-top: -40px;
}
.profile-card {
background: white;
border-radius: 16px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
}
.profile-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.profile-header {
background: linear-gradient(135deg, #779CF5 0%, #CBBCE1 100%);
padding: 15px;
color: white;
position: relative;
overflow: hidden;
}
.profile-header-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
.profile-details {
flex: 1;
margin-left: 20px;
}
.profile-bg-shapes {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.profile-shape {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.profile-shape-1 {
width: 120px;
height: 120px;
top: -30px;
right: -20px;
}
.profile-shape-2 {
width: 80px;
height: 80px;
bottom: -20px;
right: 40%;
}
.profile-avatar {
width: 90px;
height: 90px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
font-size: 36px;
border: 3px solid rgba(255, 255, 255, 0.3);
position: relative;
z-index: 2;
}
.profile-name {
font-size: 24px;
font-weight: 700;
margin-bottom: 5px;
}
.profile-meta {
display: flex;
gap: 15px;
margin-top: 0;
flex-wrap: wrap;
}
.profile-meta-item {
display: flex;
align-items: center;
font-size: 14px;
opacity: 0.9;
}
.profile-meta-item i {
margin-right: 6px;
}
.profile-body {
padding: 25px;
}
.profile-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.profile-info-item {
display: flex;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.profile-info-item:last-child {
border-bottom: none;
}
.profile-info-label {
width: 140px;
color: #64748b;
font-size: 14px;
}
.profile-info-value {
flex: 1;
font-weight: 500;
}
/* Stats Card */
.stats-card {
background: white;
border-radius: 16px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
}
.stats-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.stats-header {
padding: 15px 20px;
border-bottom: 1px solid #f1f1f1;
display: flex;
align-items: center;
}
.stats-header i {
margin-right: 10px;
color: #4776E6;
}
.stats-body {
padding: 20px;
}
.stats-summary {
margin-bottom: 20px;
}
.progress-wrapper {
margin-bottom: 20px;
}
.progress-thin {
height: 8px;
background-color: #f1f1f1;
border-radius: 4px;
overflow: hidden;
margin-bottom: 5px;
}
.progress-label {
display: flex;
justify-content: space-between;
font-size: 13px;
color: #64748b;
}
.progress-meter {
position: relative;
height: 10px;
background-color: #f1f1f1;
border-radius: 5px;
overflow: hidden;
margin: 30px 0;
}
.progress-meter-bar {
height: 100%;
border-radius: 5px;
background: linear-gradient(90deg, #e74c3c 0%, #f39c12 33%, #3498db 66%, #2ecc71 100%);
}
.progress-meter-pointer {
position: absolute;
top: -6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: white;
border: 3px solid #3498db;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transform: translateX(-50%);
z-index: 2;
}
.progress-zones {
display: flex;
margin-top: 15px;
}
.progress-zone {
flex: 1;
text-align: center;
padding: 6px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.zone-danger {
background-color: rgba(231, 76, 60, 0.1);
color: #e74c3c;
}
.zone-warning {
background-color: rgba(243, 156, 18, 0.1);
color: #f39c12;
}
.zone-info {
background-color: rgba(52, 152, 219, 0.1);
color: #3498db;
}
.zone-success {
background-color: rgba(46, 204, 113, 0.1);
color: #2ecc71;
}
/* Results Distribution */
.results-distribution {
display: flex;
height: 40px;
border-radius: 5px;
overflow: hidden;
margin-bottom: 15px;
}
.results-high {
background-color: #2ecc71;
}
.results-medium {
background-color: #f39c12;
}
.results-low {
background-color: #e74c3c;
}
.results-legend {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.legend-item {
display: flex;
align-items: center;
font-size: 13px;
}
.legend-color {
width: 15px;
height: 15px;
border-radius: 3px;
margin-right: 5px;
}
/* Analytics Tabs */
.analytics-tabs {
display: flex;
background-color: #f8f9fa;
border-radius: 12px;
padding: 5px;
margin-bottom: 25px;
gap: 5px;
}
.analytics-tab {
flex: 1;
padding: 12px 20px;
text-align: center;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
color: #4a5568;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.analytics-tab:hover {
background-color: rgba(255, 255, 255, 0.7);
}
.analytics-tab.active {
background-color: white;
color: #4776E6;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* Category Cards */
.category-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 25px;
}
.category-card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: all 0.3s ease;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.category-header h3 img {
max-height: 80px !important;
max-width: 80px !important;
width: auto !important;
height: auto !important;
vertical-align: middle;
margin-right: 10px;
}
.category-icon {
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.category-title {
flex: 1;
}
.category-name {
font-weight: 600;
margin: 0;
font-size: 16px;
}
.category-code {
font-size: 12px;
color: #64748b;
}
.category-body {
padding: 15px;
}
.category-stats {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.category-stat {
flex: 1;
text-align: center;
background: #f8f9fa;
padding: 10px;
border-radius: 8px;
}
.category-stat-value {
font-size: 18px;
font-weight: 700;
margin-bottom: 2px;
}
.category-stat-label {
font-size: 12px;
color: #64748b;
}
.category-progress {
margin-bottom: 15px;
}
.category-score {
display: flex;
align-items: center;
gap: 15px;
}
.category-gauge {
position: relative;
width: 60px;
height: 60px;
}
.category-gauge-bg {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background: #f1f1f1;
clip: rect(0px, 60px, 60px, 30px);
}
.category-gauge-fill {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
clip: rect(0px, 30px, 60px, 0px);
transform: rotate(0deg);
background: #4776E6;
transition: transform 1s ease;
}
.category-gauge-cover {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
top: 5px;
left: 5px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
}
.category-score-text {
flex: 1;
}
.category-score-label {
font-size: 13px;
color: #64748b;
margin-bottom: 3px;
}
.category-score-value {
font-size: 16px;
font-weight: 600;
}
.category-actions {
text-align: right;
margin-top: 15px;
}
/* Action button styles */
/* Modern insights card */
.insights-card {
background: white;
border-radius: 16px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
padding: 25px;
margin-top: 30px;
position: relative;
overflow: hidden;
}
.insights-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: linear-gradient(to bottom, #4776E6, #8E54E9);
}
.insights-title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font-weight: 600;
font-size: 18px;
color: #2d3748;
}
.insights-title i {
color: #4776E6;
}
.insights-list {
list-style: none;
padding: 0;
margin: 0;
}
.insights-item {
position: relative;
padding-left: 25px;
margin-bottom: 15px;
line-height: 1.5;
}
.insights-item::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, #4776E6, #8E54E9);
}
.insights-item:last-child {
margin-bottom: 0;
}
/* Report selector styles */
.report-selector-container {
background: white;
border-radius: 16px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
padding: 20px;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 20px;
}
.report-selector-label {
font-weight: 500;
color: #4a5568;
white-space: nowrap;
}
.report-selector-control {
flex: 1;
position: relative;
}
#report-selector {
width: 100%;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 12px 15px;
-webkit-appearance: none;
background: white;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
#report-selector:focus {
border-color: #4776E6;
box-shadow: 0 0 0 3px rgba(71, 118, 230, 0.1);
outline: none;
}
.selector-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #a0aec0;
pointer-events: none;
}
.report-scoring-guide {
display: flex;
align-items: center;
gap: 15px;
}
.score-guide-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: #4a5568;
}
.score-guide-indicator {
width: 12px;
height: 12px;
border-radius: 3px;
}
.guide-high {
background-color: #2ecc71;
}
.guide-medium {
background-color: #f39c12;
}
.guide-low {
background-color: #e74c3c;
}
/* Responsive adjustments */
@media (max-width: 991px) {
.profile-header-content {
flex-direction: column;
text-align: center;
}
.profile-details {
margin-left: 0;
margin-top: 15px;
}
.profile-meta {
justify-content: center;
}
.report-selector-container {
flex-direction: column;
align-items: flex-start;
}
.report-scoring-guide {
width: 100%;
justify-content: space-between;
}
}
@media (max-width: 767px) {
.analytics-tabs {
overflow-x: auto;
}
.analytics-tab {
white-space: nowrap;
padding: 10px 15px;
}
}
/* Увеличиваем аватарку */
.profile-avatar img {
height: 100px !important; /* Увеличиваем с 100px до 140px */
width: auto;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
transition: transform 0.3s ease;
}
.profile-avatar:hover img {
transform: scale(1.05); /* Легкое увеличение при наведении */
}
/* Добавляем эффект поблескивания */
.profile-avatar {
position: relative;
overflow: hidden;
border-radius: 50%;
}
.profile-avatar::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to bottom right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(30deg);
animation: shine 4s infinite linear;
z-index: 2;
pointer-events: none;
}
@keyframes shine {
0% {
transform: translateX(-100%) rotate(30deg);
}
20%, 100% {
transform: translateX(100%) rotate(30deg);
}
}
/* Создаем декоративную окантовку */
.profile-avatar::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
background: linear-gradient(135deg, #3a589b, #5b7bb2);
z-index: 0;
animation: pulse 3s infinite;
}
@keyframes pulse {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
/* Сдвигаем информацию для выравнивания с увеличенной аватаркой */
.profile-details {
padding-left: 20px;
}
.profile-card {
background-color: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
margin-bottom: 20px
}
.profile-image {
text-align: center;
padding: 30px 20px 20px;
background: linear-gradient(to bottom,#f8f9fa,var(--white))
}
.profile-info {
text-align: center;
padding: 0 20px 20px
}
.profile-name {
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
color: var(--text-color)
}
.employee-default-view {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #333;
margin-top: -40px;
margin-bottom: 20px
}
.primary-position {
color: #666;
font-size: 16px;
margin-bottom: 15px;
font-weight: 500
}
.user-profile-header {
background-color: #fff;
border-radius: 4px;
padding: 20px;
margin-bottom: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
position: relative
}
.left-border {
border-left: 3px solid #3c8dbc
}
.top-border {
border-top: 3px solid #3c8dbc
}
.user-profile-info {
display: flex
}
.user-profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
margin-right: 20px;
border: 3px solid #f5f5f5
}
.user-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover
}
.user-profile-name {
flex: 1
}
.user-profile-name h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 20px;
font-weight: 600
}
.user-profile-meta {
margin-bottom: 5px;
color: #666;
font-size: 14px
}
.user-profile-meta i {
color: #3c8dbc;
width: 20px;
text-align: center;
margin-right: 5px
}
.user-profile-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px
}
.user-profile-badge {
display: inline-block;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
background-color: #f5f5f5;
color: #666
}
.item-list-container .gender-male {
border-left: 3px solid #4285F4;
}
.item-list-container .gender-female {
border-left: 3px solid #E91E63;
}
.gender-male {
color: #3c8dbc
}
.gender-female {
color: #e74c3c
}
.user-profile-badge.gender-male {
background-color: rgba(60,141,188,.1);
color: #3c8dbc
}
.user-profile-badge.gender-female {
background-color: rgba(231,76,60,.1);
color: #e74c3c
}
.user-profile-badge.position-badge {
background-color: rgba(0,166,90,.1);
color: #00a65a
}
.user-profile-badge.badge-maternity {
background-color: rgba(243,156,18,.15);
color: #f39c12
}
.user-profile-badge.badge-disability {
background-color: rgba(96,125,139,.15);
color: #607d8b
}
.user-profile-badge.badge-kandas {
background-color: rgba(0,150,136,.15);
color: #009688
}
.user-profile-badge.badge-gray {
background-color: rgba(108,117,125,.15);
color: #6c757d
}
/* Вкладки профиля сотрудника */
.employee-tabs {
margin-bottom: 20px;
border-bottom: 2px solid #e9ecef
}
.employee-tabs .nav-link {
border: none;
border-bottom: 3px solid transparent;
color: #6c757d;
font-weight: 500;
padding: 12px 20px;
margin-bottom: -2px;
transition: all 0.2s ease
}
.employee-tabs .nav-link:hover {
color: #3c8dbc;
border-bottom-color: #dee2e6
}
.employee-tabs .nav-link.active {
color: #3c8dbc;
border-bottom-color: #3c8dbc;
background: transparent
}
.employee-tabs .nav-link i {
margin-right: 8px
}
.tab-content > .tab-pane {
padding-top: 10px
}
.user-profile-section {
background-color: #fff;
border-radius: 4px;
margin-bottom: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,.1)
}
.user-profile-section-header {
padding: 10px 15px;
border-bottom: 1px solid #f4f4f4;
background-color: #f9f9f9;
display: flex;
justify-content: space-between;
align-items: center
}
.user-profile-section-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #333
}
.user-profile-section-header h3 i {
color: #3c8dbc;
margin-right: 5px
}
.user-profile-section-header .btn {
flex-shrink: 0
}
.user-profile-section-body {
padding: 15px
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 0
}
.table > tbody > tr > th,
.table > thead > tr > th {
border-top: 0;
border-bottom: 2px solid #f4f4f4;
padding: 8px;
font-weight: 600;
color: #666
}
.table > tbody > tr > td {
border-top: 1px solid #f4f4f4;
padding: 8px;
vertical-align: middle
}
.info-table > tbody > tr > th {
width: 250px;
text-align: right;
border-top: 1px solid #f4f4f4;
border-bottom: none;
padding: 8px
}
.label {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border-radius: 3px
}
.label-success {
background-color: #00a65a
}
.label-default {
background-color: #d2d6de
}
.list-group {
padding-left: 0;
margin-bottom: 0
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd
}
.list-group-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}
.list-group-item i {
margin-right: 5px;
color: #3c8dbc
}
.profile-actions {
margin-top: 20px;
display: flex;
gap: 10px
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc
}
.btn-primary {
color: #fff;
background-color: #3c8dbc;
border-color: #367fa9
}
.btn-success {
color: #fff;
background-color: #00a65a;
border-color: #008d4c
}
.btn-block {
display: block;
width: 100%
}
.text-center {
text-align: center
}
.text-muted {
color: #999;
font-style: italic
}
@media (max-width:768px) {
.user-profile-info {
flex-direction: column;
align-items: center;
text-align: center
}
.user-profile-avatar {
margin-right: 0;
margin-bottom: 15px
}
.user-profile-badges {
justify-content: center
}
.profile-actions {
flex-direction: column
}
.info-table > tbody > tr > th {
text-align: left
}
}
.profile-fullname {
font-size: 14px;
color: var(--text-light);
margin-bottom: 10px
}
.profile-roles {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 15px
}
.profile-stats {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid #f1f2f6
}
.profile-stats li {
padding: 12px 20px;
border-bottom: 1px solid #f1f2f6
}
.profile-stats li:last-child {
border-bottom: none
}
.quick-actions-panel {
background-color: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
margin-bottom: 20px
}
.panel-title {
padding: 15px 20px;
font-size: 16px;
border-bottom: 1px solid #f1f2f6;
background-color: #f9fafc
}
.panel-title i {
margin-right: 8px
}
.list-group {
list-style: none;
padding: 0;
margin: 0
}
.list-group-item {
border: none;
border-bottom: 1px solid #f1f2f6;
padding: 12px 20px;
color: var(--text-color);
transition: var(--transition);
text-decoration: none;
display: flex;
align-items: center
}
.list-group-item:last-child {
border-bottom: none
}
.list-group-item i {
margin-right: 10px;
color: var(--text-light);
transition: var(--transition)
}
.list-group-item:hover {
background-color: #f9fafc;
color: var(--primary-color)
}
.list-group-item:hover i {
color: var(--primary-color)
}
.detail-view-table {
box-shadow: none!important
}
.detail-view-table td,
.detail-view-table th {
padding: 12px 15px;
border: none;
border-bottom: 1px solid #f1f2f6
}
.detail-view-table th {
width: 30%;
background-color: #f9fafc;
color: var(--text-light);
font-weight: 500;
font-size: 14px
}
.profile-description-tabs {
border-bottom: 1px solid #f1f2f6;
margin-bottom: 15px
}
.profile-description-tabs > li > a {
color: var(--text-color);
border: none;
padding: 10px 15px
}
.profile-description-tabs > li.active > a,
.profile-description-tabs > li.active > a:focus,
.profile-description-tabs > li.active > a:hover {
border: none;
border-bottom: 2px solid var(--primary-color);
color: var(--primary-color);
background-color: transparent
}
.profile-description-text {
background-color: #f9fafc;
padding: 15px;
border-radius: var(--radius-sm);
color: var(--text-color);
word-break: break-word
}
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,#f5f7fa 0,#e4e7ef 100%);
padding: 30px 0
}
.login-box {
width: 400px;
max-width: 100%;
position: relative;
z-index: 1;
transition: var(--transition)
}
.login-logo {
text-align: center;
margin-bottom: 30px
}
.login-logo a {
font-size: 32px;
font-weight: 700;
color: var(--text-color);
text-decoration: none;
letter-spacing: 1px
}
.login-box-body {
background-color: var(--white);
border-radius: var(--radius);
box-shadow: 0 10px 30px rgba(0,0,0,.1);
padding: 40px 30px;
position: relative;
overflow: hidden
}
.login-decoration {
position: absolute;
border-radius: 50%;
z-index: 0
}
.deco-1 {
width: 150px;
height: 150px;
top: -75px;
right: -75px;
background: linear-gradient(45deg,rgba(22,163,74,.1),rgba(22,163,74,.05))
}
.deco-2 {
width: 100px;
height: 100px;
bottom: -50px;
left: -50px;
background: linear-gradient(45deg,rgba(39,119,225,.1),rgba(39,119,225,.05))
}
.login-header {
text-align: center;
margin-bottom: 30px;
position: relative;
z-index: 1
}
.login-header h1 {
font-size: 24px;
font-weight: 700;
color: var(--text-color);
margin-bottom: 10px
}
.login-header p {
color: var(--text-light);
margin-bottom: 0
}
.field-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--text-light)
}
.toggle-password {
cursor: pointer
}
.remember-me-container {
margin-bottom: 20px
}
.remember-me-container .custom-checkbox {
margin-bottom: 0
}
.auth-links {
text-align: center;
margin-top: 20px;
position: relative;
z-index: 1
}
.auth-links a {
color: var(--primary-color);
text-decoration: none;
font-size: 14px;
transition: var(--transition)
}
.auth-links a:hover {
text-decoration: underline
}
.password-section {
background-color: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 30px;
margin-bottom: 20px
}
.password-header {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #f1f2f6
}
.generate-password-btn {
margin-bottom: 20px
}
.password-form-group {
position: relative;
margin-bottom: 20px
}
.password-input-group {
position: relative
}
.password-strength-meter {
margin-top: 5px
}
.progress-thin {
margin-bottom: 5px;
background-color: #f1f1f1
}
.password-strength-label {
text-align: right;
font-size: 12px;
color: var(--text-light)
}
.alert-password-match {
margin-top: 5px;
padding: 8px 12px;
font-size: 13px
}
.hidden {
display: none
}
.password-requirements {
background-color: #f9fafc;
border-radius: var(--radius-sm);
padding: 15px;
margin-bottom: 20px
}
.password-requirements h4 {
font-size: 14px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 10px
}
.password-requirements ul {
padding-left: 15px;
margin-bottom: 0
}
.password-requirements li {
font-size: 13px;
color: var(--text-light);
margin-bottom: 5px
}
.avatar-update-container {
background-color: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 30px;
margin-bottom: 20px
}
.current-avatar-section {
margin-bottom: 30px
}
.section-title {
font-size: 18px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 20px;
display: flex;
align-items: center
}
.section-title i {
margin-right: 10px;
color: var(--primary-color)
}
.current-avatar-display {
margin-bottom: 20px
}
.current-avatar-display img {
width: 150px;
height: 150px;
object-fit: cover;
border: 5px solid #f8f9fa;
box-shadow: 0 5px 15px rgba(0,0,0,.08)
}
.default-avatar {
width: 150px;
height: 150px;
flex-direction: column;
margin: 0 auto
}
.default-avatar i {
font-size: 50px;
margin-bottom: 10px
}
.upload-instructions {
margin-bottom: 20px
}
.upload-instructions ul {
margin-bottom: 0;
padding-left: 15px
}
.upload-instructions li {
margin-bottom: 5px
}
.page-header {
position: relative;
background: linear-gradient(135deg,#5b7bb2 0,#3a589b 100%);
color: #fff;
padding: 30px;
border-radius: var(--radius);
margin-bottom: 30px;
box-shadow: var(--shadow);
overflow: hidden
}
.page-header .shapes {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1
}
.page-header .shapes .shape {
position: absolute;
background: rgba(255,255,255,.1);
border-radius: 50%
}
.page-header .shapes .shape-1 {
width: 300px;
height: 300px;
top: -150px;
right: -50px
}
.page-header .shapes .shape-2 {
width: 200px;
height: 200px;
bottom: -100px;
left: 30%
}
.page-header .shapes .shape-3 {
width: 100px;
height: 100px;
bottom: 50px;
left: 20%
}
.page-header .content {
position: relative;
z-index: 2
}
.page-header h1 {
font-weight: 700;
margin-bottom: 10px;
font-size: 32px
}
.page-header p {
margin-bottom: 20px;
font-weight: 300;
opacity: .8
}
.actions-toolbar {
display: flex;
gap: 10px
}
.stats-container {
display: flex;
gap: 20px;
}
.stat-card {
flex: 1;
background: var(--white);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition)
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,.1)
}
.stat-value {
font-size: 36px;
font-weight: 700;
margin-bottom: 5px
}
.total-users {
color: var(--primary-color)
}
.active-users {
color: var(--success-color)
}
.pending-users {
color: var(--warning-color)
}
.blocked-users {
color: var(--danger-color)
}
.stat-label {
color: var(--text-muted);
font-size: 14px
}
.chart-container {
background-color: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
margin-bottom: 25px;
transition: var(--transition)
}
.chart-container:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg)
}
.chart-title {
font-size: 18px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #f1f2f6;
display: flex;
align-items: center
}
.recent-users-card {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
margin-bottom: 25px;
transition: var(--transition);
background-color: var(--white)
}
.recent-users-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg)
}
.panel-heading {
padding: 15px 20px;
background-color: #f9fafc;
border-bottom: 1px solid #f1f2f6
}
.panel-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-color);
display: flex;
align-items: center
}
.panel-title i {
margin-right: 10px;
color: var(--primary-color)
}
.panel-footer {
padding: 15px 20px;
background-color: #f9fafc;
border-top: 1px solid #f1f2f6
}
.media {
display: flex;
align-items: center;
margin: 0
}
.media-left {
margin-right: 15px
}
.media-body {
flex: 1
}
.user-name {
font-size: 16px
}
.loading-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
display: none
}
.loading-spinner {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid rgba(22,163,74,.1);
border-top-color: var(--primary-color);
animation: spin 1s infinite linear
}
@keyframes spin {
from {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
@media (max-width:1199px) {
.stats-container {
flex-wrap: wrap
}
.stat-card {
flex: 0 0 calc(50% - 10px)
}
}
@media (max-width:991px) {
.user-profile-header {
flex-direction: column
}
.user-profile-actions {
margin-top: 20px;
align-self: flex-start
}
.user-filter-bar {
flex-direction: column
}
.user-filter-buttons,
.user-filter-item {
width: 100%
}
}
@media (max-width:767px) {
.stat-card {
flex: 0 0 100%
}
.user-profile-info {
flex-direction: column;
text-align: center
}
.user-profile-avatar {
margin-right: 0;
margin-bottom: 20px
}
.user-profile-badges {
justify-content: center
}
}
@media (max-width:576px) {
.login-box {
width: 100%;
padding: 0 15px
}
.login-box-body {
padding: 30px 20px
}
}
.card-container {
font-family: "SF Pro Display",Roboto,-apple-system,sans-serif;
color: #283252;
margin-bottom: 30px
}
.card-container .individual-card-header {
background: linear-gradient(135deg,#5b7bb2 0,#3a589b 100%);
color: #fff;
padding: 20px;
border-radius: 12px 12px 0 0;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,.1)
}
.card-container .header-shapes {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1
}
.card-container .header-shape {
position: absolute;
background: rgba(255,255,255,.1);
border-radius: 50%
}
.card-container .header-shape-1 {
width: 120px;
height: 120px;
top: -50px;
right: 20px
}
.card-container .header-shape-2 {
width: 80px;
height: 80px;
bottom: -40px;
left: 20%
}
.card-container .header-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between
}
.card-container .child-info {
display: flex;
align-items: center
}
.card-container .child-avatar {
width: 70px;
height: 70px;
border-radius: 35px;
overflow: hidden;
margin-right: 20px;
border: 3px solid rgba(255,255,255,.3);
box-shadow: 0 4px 10px rgba(0,0,0,.2);
background-color: #fff;
display: flex;
align-items: center;
justify-content: center
}
.card-container .child-avatar img {
width: 100%;
height: 100%;
object-fit: cover
}
.card-container .child-text {
flex: 1
}
.card-container .child-name {
font-size: 24px;
font-weight: 600;
margin-bottom: 5px
}
.card-container .child-meta {
font-size: 14px;
opacity: .8
}
.card-container .child-meta i {
margin-right: 5px
}
.card-container .individual-card-content {
background: #fff;
padding: 20px;
border-radius: 0 0 12px 12px;
box-shadow: 0 4px 15px rgba(0,0,0,.05);
margin-bottom: 25px
}
.card-container .individual-card-content-no-header {
border-radius: 12px
}
.card-container .individual-card-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center
}
.card-container .individual-card-title i {
margin-right: 10px;
color: #16a34a
}
.card-container .individual-card-empty {
background-color: #f8f9fa;
border-radius: 10px;
padding: 20px;
text-align: center;
margin-bottom: 20px;
color: #767676
}
.card-container .individual-card-empty i {
font-size: 40px;
margin-bottom: 15px;
color: #ddd
}
.card-container .category-accordion {
margin-bottom: 20px
}
.card-container .category-item {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
margin-bottom: 15px;
transition: all .3s ease;
border: 1px solid rgba(0,0,0,.05);
background-color: #fff
}
.card-container .category-item:hover {
box-shadow: 0 5px 20px rgba(0,0,0,.1);
transform: translateY(-2px)
}
.card-container .category-header {
background: linear-gradient(to right,#f5f9ff,#fff);
padding: 16px 20px;
cursor: pointer;
position: relative;
transition: all .3s ease;
border-left: 4px solid #a0c4e6;
display: flex;
align-items: center;
justify-content: space-between
}
.card-container .category-header:hover {
background: linear-gradient(to right,#e9f5ff,#f7fbff)
}
.card-container .category-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #283252;
display: flex;
align-items: center
}
.card-container .category-header h3 i {
margin-right: 10px
}
.card-container .category-header .toggle-icon {
color: #7b8aa0;
transition: all .3s ease
}
.card-container .category-header.active .toggle-icon {
transform: rotate(180deg);
color: var(--primary-color)
}
.card-container .category-content {
padding: 20px;
border-top: 1px solid rgba(0,0,0,.05)
}
.card-container .subcategory-item {
margin-bottom: 20px
}
.card-container .subcategory-item:last-child {
margin-bottom: 0
}
.card-container .subcategory-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 15px;
color: #333;
display: flex;
align-items: center
}
.card-container .subcategory-title i {
margin-right: 8px;
color: #16a34a;
opacity: .8
}
.card-container .activity-card {
background-color: #f9fafb;
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
border-left: 3px solid transparent;
transition: all .3s ease;
position: relative;
overflow: hidden
}
.card-container .activity-card:last-child {
margin-bottom: 0
}
.card-container .activity-card:hover {
background-color: #f0f4f9;
transform: translateX(5px)
}
.card-container .activity-card.high {
border-left-color: #4caf50
}
.card-container .activity-card.high:hover {
background-color: rgba(76,175,80,.05)
}
.card-container .activity-card.medium {
border-left-color: #ffc107
}
.card-container .activity-card.medium:hover {
background-color: rgba(255,193,7,.05)
}
.card-container .activity-card.low {
border-left-color: #f44336
}
.card-container .activity-card.low:hover {
background-color: rgba(244,67,54,.05)
}
.card-container .activity-question {
display: flex;
align-items: flex-start;
margin-bottom: 10px
}
.card-container .activity-question-code {
font-weight: 600;
padding: 4px 8px;
border-radius: 6px;
margin-right: 10px;
font-size: 13px;
min-width: 50px;
text-align: center
}
.card-container .activity-question-code.high {
background-color: rgba(76,175,80,.15);
color: #2e7d32
}
.card-container .activity-question-code.medium {
background-color: rgba(255,193,7,.15);
color: #f57f17
}
.card-container .activity-question-code.low {
background-color: rgba(244,67,54,.15);
color: #c62828
}
.card-container .activity-question-text {
flex: 1;
font-style: italic;
color: #555;
font-size: 14px;
line-height: 1.4
}
.card-container .activity-content {
position: relative;
padding-left: 20px;
color: #333;
font-size: 14px;
line-height: 1.6
}
.card-container .activity-content:before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 2px;
background-color: #e0e5ec
}
.card-container .no-activities {
text-align: center;
padding: 20px;
color: #767676;
font-style: italic
}
.card-container .children-list-container {
margin-bottom: 20px
}
.card-container .children-list {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
overflow: hidden
}
.card-container .list-header {
padding: 15px 20px;
color: #333;
border-bottom: 1px solid #eee;
display: flex;
align-items: center
}
.card-container .list-header i {
margin-right: 10px;
color: #16a34a
}
.card-container .list-items {
list-style: none;
padding: 0;
margin: 0;
max-height: unset
}
.card-container .list-items li {
border-bottom: 1px solid #f0f0f0
}
.card-container .list-items li:last-child {
border-bottom: none
}
.card-container .list-items a {
display: flex;
align-items: center;
padding: 12px 20px;
text-decoration: none;
color: #333;
transition: all .2s ease
}
.card-container .list-items a:hover {
background-color: #f5f9ff;
transform: translateX(5px)
}
.card-container .list-items a.active {
background-color: #e3f2fd;
border-left: 3px solid var(--primary-color);
color: var(--primary-color)
}
.card-container .list-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
margin-right: 12px;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center
}
.card-container .list-info {
flex: 1
}
.card-container .list-name {
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.card-container .list-age {
color: #777
}
.card-container .card-layout {
display: flex;
gap: 25px
}
.card-container .children-list-container {
width: 400px;
flex-shrink: 0
}
.card-container .card-content {
flex: 1;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
overflow: hidden
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes pulseBackground {
0% {
background-color: initial
}
50% {
background-color: rgba(33,150,243,.05)
}
100% {
background-color: initial
}
}
.card-container .fadeIn {
animation: fadeIn .5s ease
}
.card-container .slideDown {
animation: slideDown .5s ease
}
.card-container .pulse {
animation: pulseBackground 1s ease
}
@media (max-width:992px) {
.card-container .card-layout {
flex-direction: column
}
.card-container .children-list-container {
width: 100%;
margin-bottom: 25px
}
}
@media (max-width:768px) {
.card-container .child-info {
flex-direction: column;
align-items: flex-start
}
.card-container .child-avatar {
margin-bottom: 15px
}
.card-container .activity-question {
flex-direction: column
}
.card-container .activity-question-code {
margin-bottom: 10px
}
}
.language-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
color: #fff;
margin-left: 5px
}
.language-kazakh {
border-left-color: #4db6ac!important
}
.language-russian {
border-left-color: #5c6bc0!important
}
.language-mixed {
border-left-color: #9575cd!important
}
.language-other {
border-left-color: #90a4ae!important
}
#language-filter {
border-radius: 20px;
border: 1px solid #ddd;
padding: 5px 15px;
background-color: #fff;
font-size: 14px;
transition: all .2s
}
#language-filter:focus {
outline: 0;
border-color: #5ac8fa;
box-shadow: 0 0 0 3px rgba(90,200,250,.2)
}
.language-stat-card {
border-radius: 8px;
padding: 15px;
margin-bottom: 10px;
transition: all .3s ease
}
.language-stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0,0,0,.1)
}
.language-stat-card .stat-value {
font-size: 24px;
font-weight: 700;
margin-bottom: 5px
}
.language-stat-card .stat-label {
color: #7f8c8d;
font-size: 14px
}
.language-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
flex-shrink: 0
}
.category-card .category-header h3 img,
.category-header h3 img {
max-height: 80px!important;
max-width: 80px!important;
width: auto!important;
height: auto!important;
vertical-align: middle!important;
margin-right: 10px!important
}
.list-header-icon {
width: 30px;
height: 30px;
vertical-align: middle;
margin-right: 8px
}
.hamburger-menu {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 25px;
height: 27px;
cursor: pointer;
z-index: 1000;
position: relative;
padding: 12px 14px;
box-sizing: content-box;
transition: all .3s;
border-radius: 50%;
margin-right: -10px
}
.hamburger-menu:hover {
background-color: rgba(66,133,244,.12);
transform: scale(1.05)
}
.hamburger-menu span {
display: block;
height: 3px;
width: 100%;
background-color: var(--primary-color);
border-radius: 3px;
transition: transform .35s cubic-bezier(.68, -.6, .32, 1.6),opacity .25s,background-color .3s;
box-shadow: 0 1px 2px rgba(0,0,0,.1)
}
.hamburger-menu.active {
background-color: rgba(66,133,244,.2)
}
.hamburger-menu.active span {
background-color: var(--primary-active)
}
.hamburger-menu.active span:first-child {
transform: rotate(45deg) translate(6px,6px)
}
.hamburger-menu.active span:nth-child(2) {
opacity: 0;
transform: translateX(15px)
}
.hamburger-menu.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px,-5px)
}
#topnav {
background-color: var(--bg-light);
box-shadow: var(--shadow-sm);
transition: box-shadow .3s ease;
padding: 10px 0
}
#topnav.nav-sticky,
#topnav.sticky {
position: sticky;
top: 0
}
#topnav.guest-header {
z-index: 1001;
position: fixed!important;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
opacity: .97
}
#topnav.scroll-active {
box-shadow: var(--shadow-md)
}
.container {
max-width: 1400px!important;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
width: 100%;
height: 64px;
padding: 0
}
.header-right {
display: flex;
align-items: center;
gap: 10px
}
.header-login-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 20px;
background-color: var(--primary-color);
color: #fff!important;
font-size: 14px;
font-weight: 500;
text-decoration: none;
border-radius: 20px;
transition: all .3s ease;
box-shadow: 0 2px 8px rgba(66,133,244,.3)
}
.header-login-btn:hover {
background-color: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(66,133,244,.4);
color: #fff!important;
text-decoration: none
}
.logo-container {
display: flex;
align-items: center;
gap: 12px
}
.logo {
display: inline-flex;
align-items: center;
transition: transform .3s ease;
position: relative
}
.logo:hover {
transform: scale(1.03)
}
.logo-img {
max-height: 42px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .1))
}
.organization-name {
font-size: 14px;
font-weight: 600;
color: var(--dark-text);
white-space: normal;
overflow: visible;
text-overflow: clip;
max-width: 800px!important;
font-family: Montserrat,sans-serif;
letter-spacing: .02em;
opacity: .85;
flex: 1;
margin-right: 20px
}
#navigation {
position: absolute;
top: 70px;
right: 20px;
width: var(--menu-width);
max-height: 0;
background-color: var(--bg-light);
overflow: hidden;
box-shadow: var(--shadow-lg);
transition: all .35s cubic-bezier(.19, 1, .22, 1);
z-index: 999;
opacity: 0;
transform: translateY(-10px);
visibility: hidden;
max-width: 90vw;
border-radius: var(--border-radius)
}
#navigation.active {
max-height: 80vh;
opacity: 1;
transform: translateY(0);
visibility: visible;
overflow-y: auto
}
#navigation::-webkit-scrollbar {
width: 6px
}
#navigation::-webkit-scrollbar-track {
background: 0 0;
margin: 5px
}
#navigation::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.1);
border-radius: 10px
}
#navigation::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,.2)
}
.burger-navigation {
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.1) transparent
}
.navigation-menu {
list-style: none;
margin: 0;
padding: 15px 10px
}
.navigation-menu li {
margin-bottom: 3px;
position: relative;
transition: all .2s ease;
border-radius: 8px;
overflow: hidden
}
.navigation-menu li:hover {
background-color: var(--bg-hover)
}
.navigation-menu li:last-child {
margin-bottom: 0
}
.navigation-menu a {
color: var(--dark-text);
text-decoration: none;
padding: 12px 15px;
display: flex;
align-items: center;
font-size: var(--menu-font-size);
transition: all .25s;
border-radius: 8px;
position: relative;
font-weight: 500
}
.navigation-menu a:hover {
color: var(--primary-color)
}
.navigation-menu li.active {
background-color: var(--bg-active)
}
.navigation-menu li.active > a {
color: var(--primary-color)
}
.navigation-menu a i {
margin-right: 12px;
font-size: var(--icon-size);
display: flex;
align-items: center;
justify-content: center;
transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
color: var(--light-text);
min-width: 24px
}
.navigation-menu a:hover i {
transform: translateY(-2px);
color: var(--primary-color)
}
.navigation-menu li.active a i {
color: var(--primary-color)
}
.burger-navigation .fa {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--icon-size);
width: 24px;
height: 24px
}
.ion {
color: var(--light-text);
transition: all .25s
}
.ion[class*=ion-],
[class^=ion-] {
color: var(--light-text);
transition: all .25s
}
.menu-item-content {
display: inline-block;
flex-grow: 1;
overflow: hidden;
white-space: normal;
word-break: break-word;
line-height: 1.4;
margin-left: 5px;
font-weight: 500
}
.burger-submenu {
display: block;
max-height: 0;
overflow: hidden;
transition: max-height .4s cubic-bezier(.19, 1, .22, 1);
list-style: none;
margin: 0 8px;
padding: 0;
background-color: rgba(0,0,0,.01);
border-radius: 8px
}
.burger-submenu.show {
max-height: 500px;
margin-top: 3px;
margin-bottom: 6px;
box-shadow: inset 0 0 5px rgba(0,0,0,.02)
}
.burger-submenu li {
margin: 4px;
border-radius: 6px
}
.burger-submenu li a {
font-size: var(--submenu-font-size);
padding: 10px 12px;
color: var(--light-text);
font-weight: 400
}
.burger-submenu li a:hover {
color: var(--primary-color)
}
.burger-submenu li.active {
background-color: rgba(66,133,244,.08)
}
.burger-submenu li.active a {
color: var(--primary-color)
}
.burger-submenu .menu-item-content {
font-size: var(--submenu-font-size);
font-weight: 400
}
.has-submenu > a .ion-ios-arrow-down,
.has-submenu > a .ion-ios-arrow-up {
position: absolute;
right: 15px;
transition: transform .3s;
color: var(--light-text);
font-size: 14px
}
.has-submenu > a.open .ion-ios-arrow-down,
.has-submenu > a.open .ion-ios-arrow-up {
transform: rotate(180deg);
color: var(--primary-color)
}
.menu-divider {
margin: 12px 5px;
position: relative
}
.menu-divider hr {
border: 0;
height: 1px;
background: linear-gradient(to right,transparent,rgba(0,0,0,.05),transparent);
margin: 0
}
@keyframes slideInDown {
from {
transform: translateY(-15px);
opacity: 0
}
to {
transform: translateY(0);
opacity: 1
}
}
.login-item a,
.logout-item a,
.user-profile-item a {
display: flex;
align-items: center
}
.logout-item a {
color: #e74c3c
}
.logout-item a i {
color: #e74c3c
}
.login-item a {
color: var(--accent-color)
}
.login-item a i {
color: var(--accent-color)
}
body.no-scroll {
overflow: hidden!important;
padding-right: 0;
position: fixed;
width: 100%;
height: 100%
}
@media (max-width:991px) {
:root {
--menu-width: 280px
}
#navigation {
right: 10px
}
}
@media (max-width:767px) {
#navigation.active {
max-height: 85vh;
width: calc(100vw - 20px);
right: 50%;
transform: translateX(50%);
top: 75px
}
.hamburger-menu {
padding: 10px 12px;
margin-right: 0
}
.nav-container {
height: 58px;
padding: 0
}
.logo-container {
gap: 8px
}
.logo-img {
max-height: 36px
}
.organization-name {
font-size: 16px;
max-width: 180px
}
.container {
padding: 0 10px
}
}
@media (min-width:1400px) {
.container {
max-width: 1600px!important;
padding: 0 30px
}
.organization-name {
max-width: 1000px!important;
font-size: 15px
}
}
@media (min-width:1800px) {
.container {
max-width: 1800px!important;
padding: 0 40px
}
.organization-name {
max-width: 1200px!important;
font-size: 16px
}
}
@media (max-width:480px) {
.organization-name {
font-size: 14px;
max-width: 140px;
letter-spacing: 0
}
.logo-img {
max-height: 32px
}
.logo-container {
gap: 6px
}
#navigation.active {
width: calc(100vw - 20px);
border-radius: 10px
}
.navigation-menu {
padding: 10px 5px
}
}
#topnav {
position: fixed;
z-index: 1030;
background-color: transparent;
border: 0;
-webkit-transition: all .5s ease;
transition: all .5s ease
}
#topnav .container {
width: auto;
margin: 0 auto;
padding: 0 20px
}
@media (min-width:1400px) {
#topnav .container {
padding: 0 30px
}
}
@media (min-width:1800px) {
#topnav .container {
padding: 0 40px
}
}
#topnav .logo {
float: left;
color: #3c4858!important;
box-shadow: none
}
#topnav .has-submenu {
position: relative
}
.assessment-categories .category-card {
background: #fff;
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
text-align: center;
margin-bottom: 15px;
transition: all .3s ease
}
.assessment-categories .category-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,.1);
transform: translateY(-2px)
}
.assessment-categories .target-category {
border-color: #dc3545
}
.assessment-categories .magnet-category {
border-color: #ffc107
}
.assessment-categories .support-category {
border-color: #28a745
}
.assessment-categories .category-range {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px
}
.assessment-categories .target-category .category-range {
color: #dc3545
}
.assessment-categories .magnet-category .category-range {
color: #ffc107
}
.assessment-categories .support-category .category-range {
color: #28a745
}
.assessment-categories .category-name {
font-size: 14px;
font-weight: 500;
color: #666
}
.latest-result-card {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px
}
.latest-result-card h4 {
margin-bottom: 15px;
color: #495057
}
.result-summary .overall-score {
font-size: 36px;
font-weight: 700;
margin-bottom: 10px
}
.result-summary .category-badge {
display: inline-block;
color: #fff;
padding: 5px 15px;
border-radius: 15px;
font-size: 12px;
font-weight: 700;
margin-bottom: 10px
}
.result-summary .completed-date {
font-size: 12px;
color: #6c757d;
margin-bottom: 15px
}
.result-actions .btn {
margin-right: 5px
}
.no-results-card {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 40px 20px;
text-align: center
}
.no-results-card i {
margin-bottom: 15px
}
.no-results-card h4 {
color: #6c757d;
margin-bottom: 10px
}
.start-assessment-btn {
padding: 15px 30px;
font-size: 16px;
font-weight: 700;
border-radius: 25px
}
.assessment-test .question-block {
background: #fff;
border-radius: 8px;
padding: 30px;
margin-bottom: 20px
}
.assessment-test .question-header {
margin-bottom: 30px
}
.assessment-test .question-text {
font-size: 18px;
font-weight: 500;
color: #2c3e50;
line-height: 1.6;
margin: 0
}
.assessment-test .options-container {
margin-bottom: 30px
}
.assessment-test .option-item {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 8px;
margin-bottom: 15px;
transition: all .3s ease;
cursor: pointer
}
.assessment-test .option-item:hover {
border-color: #007bff;
background: #f0f8ff
}
.assessment-test .option-item.selected {
border-color: #007bff;
background: #e7f3ff;
box-shadow: 0 2px 8px rgba(0,123,255,.2)
}
.assessment-test .option-label {
display: block;
margin: 0;
padding: 0;
cursor: pointer;
width: 100%
}
.assessment-test .option-content {
display: flex;
align-items: center;
padding: 15px 20px
}
.assessment-test .option-indicator {
background: #007bff;
color: #fff;
font-weight: 700;
font-size: 12px;
padding: 8px 12px;
border-radius: 4px;
margin-right: 15px;
min-width: 40px;
text-align: center
}
.assessment-test .option-item.selected .option-indicator {
background: #0056b3
}
.assessment-test .option-text {
flex: 1;
font-size: 14px;
line-height: 1.5;
color: #495057
}
.assessment-test .option-radio {
display: none
}
.navigation-controls {
border-top: 1px solid #e9ecef;
padding-top: 20px;
margin-top: 30px
}
.navigation-controls .btn {
min-width: 120px;
padding: 10px 20px;
font-weight: 500
}
.progress-section {
margin-bottom: 25px
}
.progress-section h5 {
font-size: 14px;
font-weight: 700;
color: #495057;
margin-bottom: 10px
}
.progress-section .progress {
height: 8px;
margin-bottom: 8px;
background-color: #e9ecef;
border-radius: 4px
}
.progress-section .progress-text {
font-size: 12px;
color: #6c757d
}
.parameters-section h5 {
font-size: 14px;
font-weight: 700;
color: #495057;
margin-bottom: 15px
}
.parameters-list .parameter-item {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 6px;
padding: 15px;
margin-bottom: 10px;
transition: all .3s ease
}
.parameters-list .parameter-item.active {
background: #e7f3ff;
border-color: #007bff
}
.parameters-list .parameter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px
}
.parameters-list .parameter-header strong {
font-size: 12px;
color: #495057
}
.parameters-list .parameter-progress {
font-size: 11px;
color: #6c757d
}
.parameters-list .parameter-name {
font-size: 12px;
color: #6c757d;
margin-bottom: 8px;
line-height: 1.4
}
.parameters-list .progress-sm {
height: 4px;
margin: 0
}
.current-question-info {
margin-top: 20px
}
.info-card {
color: #fff;
border-radius: 6px;
padding: 15px;
text-align: center
}
.info-card .info-title {
font-size: 12px;
font-weight: 700;
margin-bottom: 8px;
opacity: .9
}
.info-card .info-content {
font-size: 14px;
font-weight: 500
}
.info-card .info-content small {
opacity: .8;
font-size: 11px
}
.progress-text {
font-size: 12px;
color: #6c757d
}
@media (max-width:768px) {
.assessment-test .option-content {
flex-direction: column;
text-align: center;
padding: 15px
}
.assessment-test .option-indicator {
margin-right: 0;
margin-bottom: 10px
}
.navigation-controls .btn {
width: 100%;
margin-bottom: 10px
}
}
.modern-card {
background: #fff;
border-radius: var(--border-radius);
box-shadow: var(--card-shadow);
transition: var(--transition);
border: 1px solid rgba(255,255,255,.2)
}
.modern-card:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-2px)
}
.btn-modern {
background: linear-gradient(135deg,var(--primary-color),var(--secondary-color));
border: none;
border-radius: var(--border-radius);
padding: 12px 24px;
font-weight: 600;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(33,150,243,.25);
color: #fff;
text-decoration: none
}
.btn-modern:hover {
background: linear-gradient(135deg,#1976d2,var(--primary-color));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(33,150,243,.35);
color: #fff;
text-decoration: none
}
.btn-modern.btn-success {
background: linear-gradient(135deg,var(--success-color),#66bb6a);
box-shadow: 0 4px 15px rgba(76,175,80,.25)
}
.btn-modern.btn-success:hover {
background: linear-gradient(135deg,#388e3c,var(--success-color));
box-shadow: 0 6px 20px rgba(76,175,80,.35)
}
.modern-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
background: linear-gradient(135deg,var(--primary-color),var(--secondary-color));
color: #fff;
font-weight: 600;
box-shadow: 0 2px 8px rgba(33,150,243,.25)
}
.modern-badge.success {
background: linear-gradient(135deg,var(--success-color),#66bb6a);
box-shadow: 0 2px 8px rgba(76,175,80,.25)
}
.modern-badge.warning {
background: linear-gradient(135deg,var(--warning-color),#ffb74d);
box-shadow: 0 2px 8px rgba(255,152,0,.25)
}
.modern-icon-wrapper {
width: 45px;
height: 45px;
background: linear-gradient(135deg,var(--primary-color),var(--secondary-color));
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
box-shadow: 0 4px 15px rgba(33,150,243,.25);
transition: var(--transition)
}
.modern-icon-wrapper:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(33,150,243,.35)
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.fade-in-up {
animation: fadeInUp .4s cubic-bezier(.4,0,.2,1)
}
@keyframes pulse {
0% {
transform: scale(1)
}
50% {
transform: scale(1.05)
}
100% {
transform: scale(1)
}
}
.pulse {
animation: pulse .6s ease-in-out
}
.text-primary-modern {
color: var(--text-primary)
}
.text-secondary-modern {
color: var(--text-secondary)
}
.spacing-modern {
padding: 20px
}
.spacing-modern-lg {
padding: 30px
}
.spacing-modern-sm {
padding: 15px
}
#topnav .navbar-toggle {
border: 0;
position: relative;
width: 60px;
padding: 0;
margin: 0;
cursor: pointer
}
#topnav .navbar-toggle .lines {
width: 25px;
display: block;
position: relative;
margin: 32px 20px 24px;
height: 18px
}
#topnav .navbar-toggle span {
height: 2px;
width: 100%;
background-color: #3c4858;
display: block;
margin-bottom: 5px;
-webkit-transition: -webkit-transform .5s ease;
transition: -webkit-transform .5s ease;
transition: transform .5s ease;
transition: transform .5s ease,-webkit-transform .5s ease
}
#topnav .navbar-toggle span:last-child {
margin-bottom: 0
}
#topnav .buy-button {
float: right;
line-height: 68px;
padding: 3px 0;
margin-left: 8px
}
#topnav .buy-button .login-btn-primary {
display: none
}
#topnav .buy-button .login-btn-light {
display: inline-block
}
#topnav .navbar-toggle.open span {
position: absolute
}
#topnav .navbar-toggle.open span:first-child {
top: 6px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
#topnav .navbar-toggle.open span:nth-child(2) {
visibility: hidden
}
#topnav .navbar-toggle.open span:last-child {
width: 100%;
top: 6px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
#topnav .navbar-toggle.open span:hover {
background-color: #16a34a
}
#topnav .navbar-toggle:focus,
#topnav .navbar-toggle:hover {
background-color: transparent
}
#topnav .menu-extras {
float: right
}
#topnav.scroll {
background-color: #fff;
border: none;
-webkit-box-shadow: 0 0 3px rgba(22,28,45,.15);
box-shadow: 0 0 3px rgba(22,28,45,.15)
}
#topnav.defaultscroll.dark-menubar .logo {
line-height: 70px
}
#topnav.defaultscroll.scroll .logo {
line-height: 62px
}
#topnav.defaultscroll.scroll.dark-menubar .logo {
line-height: 62px
}
#topnav.nav-sticky {
background: #fff;
-webkit-box-shadow: 0 0 3px rgba(22,28,45,.15);
box-shadow: 0 0 3px rgba(22,28,45,.15)
}
#topnav.nav-sticky .buy-button .login-btn-primary {
display: inline-block
}
#topnav.nav-sticky .buy-button .login-btn-light {
display: none
}
.logo {
font-weight: 700;
font-size: 24px;
padding: 3px 0;
letter-spacing: 1px;
line-height: 68px
}
@media (min-width:992px) {
#topnav .navbar-toggle {
display: none
}
#topnav #navigation {
display: block!important
}
#topnav.scroll {
top: 0
}
}
@media (max-width:991px) {
#topnav {
background-color: #fff;
-webkit-box-shadow: 0 0 3px rgba(22,28,45,.15);
box-shadow: 0 0 3px rgba(22,28,45,.15);
min-height: 74px
}
#topnav .container {
width: auto
}
#topnav #navigation {
max-height: 400px
}
#topnav .menu-extras .menu-item {
border-color: #8492a6
}
#topnav .navbar-header {
float: left
}
#topnav .buy-button .login-btn-primary {
display: inline-block!important
}
#topnav .buy-button .login-btn-light {
display: none
}
#navigation {
position: absolute;
top: 74px;
left: 0;
width: 100%;
display: none;
height: auto;
padding-bottom: 0;
overflow: auto;
border-top: 1px solid #f1f3f9;
border-bottom: 1px solid #f1f3f9;
background-color: #fff
}
#navigation.open {
display: block;
overflow-y: auto
}
}
.logo-img {
height: 40px
}
.nav-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center
}
.nav-menu li {
margin-left: 20px
}
.nav-menu a {
text-decoration: none;
color: #333;
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
transition: color .3s;
font-family: Roboto,sans-serif
}
.nav-menu a:hover {
color: #00c853
}
.u-section-1 {
background-image: none
}
.u-section-1 .u-sheet-1 {
min-height: 1100px
}
.u-header .u-image-1 {
margin: 0
}
.u-section-1 .u-shape-1 {
width: 1088px;
height: 918px;
--animation-custom_in-translate_x: 0px;
--animation-custom_in-translate_y: 0px;
--animation-custom_in-opacity: 0;
--animation-custom_in-rotate: 0deg;
--animation-custom_in-scale: 0.3;
margin: 60px 0 0 auto
}
.u-section-1 .u-image-1 {
width: 690px;
height: 691px;
object-position: 0% 50%;
background-position: 50% 50%;
background-image: url("../images/hero-teacher-child.webp");
--animation-custom_in-translate_x: 50px;
--animation-custom_in-translate_y: 0px;
--animation-custom_in-opacity: 0;
--animation-custom_in-rotate: 180deg;
--animation-custom_in-scale: 0.3;
margin: -862px 115px 0 auto
}
.u-section-1 .u-shape-2 {
width: 227px;
height: 228px;
background-image: linear-gradient(#77aad9,#478ac9);
--animation-custom_in-translate_x: 300px;
--animation-custom_in-translate_y: 0px;
--animation-custom_in-opacity: 0;
--animation-custom_in-rotate: 0deg;
--animation-custom_in-scale: 1;
margin: -35px 78px 0 auto
}
.u-section-1 .u-group-1 {
background-image: none;
width: 541px;
min-height: 441px;
box-shadow: 5px 5px 20px 0 rgba(0,0,0,.15);
--animation-custom_in-translate_x: -200px;
--animation-custom_in-translate_y: 0px;
--animation-custom_in-opacity: 0;
--animation-custom_in-rotate: 0deg;
--animation-custom_in-scale: 1;
margin: -481px auto 100px 0
}
.u-section-1 .u-container-layout-1 {
padding: 24px 40px
}
.u-section-1 .u-text-1 {
letter-spacing: 4px;
font-weight: 700;
text-transform: uppercase;
font-size: 1.25rem;
margin: 0 auto 0 0
}
.u-section-1 .u-text-2 {
font-size: 3rem;
font-weight: 700;
font-family: "PT Sans",sans-serif;
margin: 21px 0 0
}
.u-section-1 .u-text-3 {
letter-spacing: 1px;
margin: 21px 28px 0 0
}
.u-section-1 .u-btn-1 {
border-style: solid;
padding: 0
}
@media (max-width:1199px) {
.u-section-1 .u-shape-1 {
width: 940px;
margin-top: 80px
}
.u-section-1 .u-image-1 {
width: 660px;
height: 660px;
margin-top: -842px;
margin-right: 69px
}
.u-section-1 .u-group-1 {
width: 490px;
min-height: 417px;
margin-top: -459px;
margin-bottom: 60px
}
}
@media (max-width:991px) {
.u-section-1 .u-sheet-1 {
min-height: 1026px
}
.u-section-1 .u-shape-1 {
height: 816px;
margin-top: 60px;
margin-right: initial;
margin-left: initial;
width: auto
}
.u-section-1 .u-image-1 {
width: 509px;
height: 509px;
margin-top: -753px;
margin-right: 30px
}
.u-section-1 .u-group-1 {
width: 415px;
min-height: 415px;
margin-top: -408px
}
.u-section-1 .u-container-layout-1 {
padding-left: 30px;
padding-right: 30px
}
.u-section-1 .u-text-2 {
font-size: 3.75rem
}
}
@media (max-width:767px) {
.u-section-1 .u-sheet-1 {
min-height: 1169px
}
.u-section-1 .u-shape-1 {
height: 535px;
width: 519px;
margin-right: 0;
margin-left: auto
}
.u-section-1 .u-image-1 {
width: 377px;
height: 377px;
margin-top: -464px;
margin-right: 38px
}
.u-section-1 .u-group-1 {
width: 426px;
min-height: 427px;
margin-top: 12px
}
.u-section-1 .u-container-layout-1 {
padding-left: 20px;
padding-right: 20px
}
}
@media (max-width:575px) {
.u-section-1 .u-sheet-1 {
min-height: 913px
}
.u-section-1 .u-shape-1 {
height: 378px;
width: 328px
}
.u-section-1 .u-image-1 {
width: 271px;
height: 271px;
margin-top: -355px;
margin-right: 20px
}
.u-section-1 .u-group-1 {
min-height: 363px;
margin-top: 36px;
margin-bottom: 57px;
margin-right: initial;
margin-left: initial;
width: auto
}
.u-section-1 .u-text-1 {
font-size: 1.125rem
}
.u-section-1 .u-text-2 {
font-size: 3rem
}
.u-section-1 .u-text-3 {
margin-right: 0
}
}
.u-section-2 .u-sheet-1 {
min-height: 400px
}
.u-section-2 .u-layout-wrap-1 {
margin-top: 60px;
margin-bottom: 60px;
position: relative
}
.u-section-2 .u-image-1 {
min-height: 400px;
background-image: url("../images/hero-monitoring-board.webp")
}
.u-section-2 .u-container-layout-1 {
padding: 30px
}
.u-section-2 .u-layout-cell-2 {
min-height: 400px
}
.u-section-2 .u-container-layout-2 {
padding: 30px
}
.u-section-2 .u-text-1 {
margin: 0 45px
}
.u-section-2 .u-text-2 {
margin: 20px 0 0
}
@media (max-width:1199px) {
.u-section-2 .u-sheet-1 {
min-height: 330px
}
.u-section-2 .u-image-1 {
min-height: 330px
}
.u-section-2 .u-layout-cell-2 {
min-height: 330px
}
}
@media (max-width:991px) {
.u-section-2 .u-sheet-1 {
min-height: 253px
}
.u-section-2 .u-image-1 {
min-height: 253px
}
.u-section-2 .u-layout-cell-2 {
min-height: 100px
}
}
@media (max-width:767px) {
.u-section-2 .u-sheet-1 {
min-height: 480px
}
.u-section-2 .u-image-1 {
min-height: 380px
}
.u-section-2 .u-container-layout-1 {
padding-left: 10px;
padding-right: 10px
}
.u-section-2 .u-container-layout-2 {
padding-left: 10px;
padding-right: 10px
}
}
@media (max-width:575px) {
.u-section-2 .u-sheet-1 {
min-height: 339px
}
.u-section-2 .u-image-1 {
min-height: 239px
}
}
.u-section-3 .u-sheet-1 {
min-height: 747px
}
.u-section-3 .u-list-1 {
margin-top: 60px;
margin-bottom: 0
}
.u-section-3 .u-repeater-1 {
grid-template-columns: repeat(3,calc(33.3333% - 13.3333px));
min-height: 321px;
grid-gap: 20px
}
.u-section-3 .u-list-item-1 {
background-image: none;
--animation-custom_in-translate_x: 0px;
--animation-custom_in-translate_y: 0px;
--animation-custom_in-opacity: 0;
--animation-custom_in-rotate: 0deg;
--animation-custom_in-scale: 0.3
}
.u-section-3 .u-container-layout-1 {
padding: 30px
}
.u-section-3 .u-icon-1 {
width: 64px;
height: 64px;
background-image: none;
margin: 0 auto
}
.u-section-3 .u-text-1 {
font-weight: 700;
font-size: 1.5rem;
margin: 50px 10px 0
}
.u-section-3 .u-text-2 {
margin: 20px 0 0
}
.u-section-3 .u-container-layout-2 {
padding: 30px
}
.u-section-3 .u-icon-2 {
width: 64px;
height: 64px;
background-image: none;
margin: 0 auto
}
.u-section-3 .u-text-3 {
font-weight: 700;
font-size: 1.5rem;
margin: 50px 10px 0
}
.u-section-3 .u-text-4 {
margin: 20px 0 0
}
.u-section-3 .u-container-layout-3 {
padding: 30px
}
.u-section-3 .u-icon-3 {
width: 64px;
height: 64px;
background-image: none;
margin: 0 auto
}
.u-section-3 .u-text-5 {
font-weight: 700;
font-size: 1.5rem;
margin: 50px 10px 0
}
.u-section-3 .u-text-6 {
margin: 20px 0 0
}
.u-section-3 .u-layout-wrap-1 {
margin-top: 42px;
margin-bottom: -149px
}
.u-section-3 .u-layout-cell-1 {
min-height: 264px
}
.u-section-3 .u-container-layout-4 {
padding: 30px
}
.u-section-3 .u-text-7 {
font-weight: 700;
font-size: 2.25rem;
--animation-custom_in-translate_x: 0px;
--animation-custom_in-translate_y: 300px;
--animation-custom_in-opacity: 0;
--animation-custom_in-rotate: 0deg;
--animation-custom_in-scale: 1;
margin: 0
}
.u-section-3 .u-layout-cell-2 {
min-height: 264px;
--animation-custom_in-translate_x: 0px;
--animation-custom_in-translate_y: 300px;
--animation-custom_in-opacity: 0;
--animation-custom_in-rotate: 0deg;
--animation-custom_in-scale: 1
}
.u-section-3 .u-container-layout-5 {
padding: 20px 30px
}
.u-section-3 .u-text-8 {
margin: 0
}
.u-section-3 .u-btn-1 {
text-transform: uppercase;
font-weight: 700;
margin: 30px auto 0 0;
padding: 15px 65px 15px 64px
}
@media (max-width:1199px) {
.u-section-3 .u-sheet-1 {
min-height: 742px
}
.u-section-3 .u-repeater-1 {
min-height: 265px
}
.u-section-3 .u-text-1 {
margin-left: 0;
margin-right: 0
}
.u-section-3 .u-text-3 {
margin-left: 0;
margin-right: 0
}
.u-section-3 .u-text-5 {
margin-left: 0;
margin-right: 0
}
.u-section-3 .u-layout-wrap-1 {
margin-bottom: -108px
}
.u-section-3 .u-layout-cell-1 {
min-height: 218px
}
.u-section-3 .u-layout-cell-2 {
min-height: 218px
}
}
@media (max-width:991px) {
.u-section-3 .u-sheet-1 {
min-height: 1112px
}
.u-section-3 .u-repeater-1 {
grid-template-columns: repeat(2,calc(50% - 9.99997px));
min-height: 609px
}
.u-section-3 .u-layout-wrap-1 {
margin-bottom: -48px
}
.u-section-3 .u-layout-cell-1 {
min-height: 100px
}
.u-section-3 .u-layout-cell-2 {
min-height: 100px
}
}
@media (max-width:767px) {
.u-section-3 .u-sheet-1 {
min-height: 1418px
}
.u-section-3 .u-repeater-1 {
grid-template-columns: 100%
}
.u-section-3 .u-container-layout-1 {
padding-left: 10px;
padding-right: 10px
}
.u-section-3 .u-container-layout-2 {
padding-left: 10px;
padding-right: 10px
}
.u-section-3 .u-container-layout-3 {
padding-left: 10px;
padding-right: 10px
}
.u-section-3 .u-layout-wrap-1 {
margin-bottom: 12px
}
.u-section-3 .u-container-layout-4 {
padding-left: 10px;
padding-right: 10px
}
.u-section-3 .u-container-layout-5 {
padding-left: 10px;
padding-right: 10px
}
}
@media (max-width:575px) {
.u-section-3 .u-sheet-1 {
min-height: 772px
}
.u-section-3 .u-layout-wrap-1 {
margin-bottom: 60px
}
}
.u-section-4 {
background-image: none
}
.u-section-4 .u-sheet-1 {
min-height: 1114px
}
.u-section-4 .u-shape-1 {
height: 947px;
margin-top: 60px;
margin-bottom: 0
}
.u-section-4 .u-layout-wrap-1 {
width: 915px;
margin: -812px auto 196px
}
.u-section-4 .u-image-1 {
background-image: url("../images/hero-girl-bunny.webp");
background-position: 50% 50%;
min-height: 338px
}
.u-section-4 .u-container-layout-1 {
padding: 30px
}
.u-section-4 .u-layout-cell-2 {
min-height: 338px
}
.u-section-4 .u-container-layout-2 {
padding: 30px
}
.u-section-4 .u-text-1 {
font-size: 1.875rem;
margin: 0
}
.u-section-4 .u-text-2 {
margin: 20px 0 0
}
.u-section-4 .u-btn-1 {
background-image: none;
border-style: none none solid;
font-size: .875rem;
text-transform: uppercase;
letter-spacing: 2px;
margin: 32px auto 0 0;
padding: 0
}
.u-section-4 .u-text-3 {
line-height: 2;
margin: 20px 87px 0 0
}
.u-section-4 .u-btn-2 {
background-image: none;
border-style: solid;
padding: 0
}
.u-section-4 .u-image-2 {
background-image: url("../images/hero-boy-book.webp");
background-position: 50% 50%;
min-height: 338px
}
.u-section-4 .u-container-layout-3 {
padding: 30px
}
.u-section-4 .u-layout-cell-4 {
min-height: 338px
}
.u-section-4 .u-container-layout-4 {
padding: 30px
}
.u-section-4 .u-text-4 {
font-size: 1.875rem;
margin: 0
}
.u-section-4 .u-text-5 {
margin: 20px 0 0
}
.u-section-4 .u-btn-3 {
background-image: none;
border-style: none none solid;
font-size: .875rem;
text-transform: uppercase;
letter-spacing: 2px;
margin: 32px auto 0 0;
padding: 0
}
.u-section-4 .u-image-3 {
min-height: 338px;
background-image: url("../images/hero-boy-teddy.webp");
background-position: 50% 50%
}
.u-section-4 .u-container-layout-5 {
padding: 30px
}
.u-section-4 .u-layout-cell-6 {
min-height: 338px
}
.u-section-4 .u-container-layout-6 {
padding: 30px
}
.u-section-4 .u-text-6 {
margin: 0
}
.u-section-4 .u-text-7 {
margin: 20px 0 0
}
.u-section-4 .u-btn-4 {
background-image: none;
border-style: none none solid;
font-size: .875rem;
text-transform: uppercase;
letter-spacing: 2px;
margin: 32px auto 0 0;
padding: 0
}
.u-section-4 .u-text-8 {
letter-spacing: 1px;
margin: 20px auto 0 0
}
.u-section-4 .u-btn-5 {
border-style: solid;
padding: 0
}
@media (max-width:1199px) {
.u-section-4 .u-sheet-1 {
min-height: 1018px
}
.u-section-4 .u-shape-1 {
height: 858px
}
.u-section-4 .u-layout-wrap-1 {
width: 792px;
margin-top: -777px;
margin-bottom: 141px
}
.u-section-4 .u-text-3 {
margin-right: 69px
}
}
@media (max-width:991px) {
.u-section-4 .u-sheet-1 {
min-height: 947px
}
.u-section-4 .u-shape-1 {
height: 823px
}
.u-section-4 .u-layout-wrap-1 {
width: 629px;
margin-top: -757px;
margin-bottom: 126px
}
.u-section-4 .u-image-1 {
min-height: 384px
}
.u-section-4 .u-layout-cell-2 {
min-height: 384px
}
.u-section-4 .u-text-1 {
font-size: 1.5rem
}
.u-section-4 .u-text-3 {
margin-right: 45px
}
.u-section-4 .u-image-2 {
min-height: 384px
}
.u-section-4 .u-layout-cell-4 {
min-height: 307px
}
.u-section-4 .u-text-4 {
font-size: 1.5rem
}
.u-section-4 .u-image-3 {
min-height: 307px
}
.u-section-4 .u-layout-cell-6 {
min-height: 100px
}
}
@media (max-width:767px) {
.u-section-4 .u-sheet-1 {
min-height: 2413px
}
.u-section-4 .u-shape-1 {
height: 583px
}
.u-section-4 .u-layout-wrap-1 {
width: 428px;
margin-top: -518px;
margin-bottom: 58px;
margin-left: 44px
}
.u-section-4 .u-image-1 {
min-height: 509px
}
.u-section-4 .u-container-layout-1 {
padding-left: 10px;
padding-right: 10px
}
.u-section-4 .u-layout-cell-2 {
min-height: 269px
}
.u-section-4 .u-container-layout-2 {
padding-left: 20px;
padding-right: 20px
}
.u-section-4 .u-text-1 {
font-size: 1.875rem
}
.u-section-4 .u-image-2 {
min-height: 508px
}
.u-section-4 .u-container-layout-3 {
padding-left: 10px;
padding-right: 10px
}
.u-section-4 .u-layout-cell-4 {
min-height: 217px
}
.u-section-4 .u-container-layout-4 {
padding-left: 20px;
padding-right: 20px
}
.u-section-4 .u-text-4 {
font-size: 1.875rem
}
.u-section-4 .u-image-3 {
min-height: 506px
}
.u-section-4 .u-container-layout-5 {
padding-left: 10px;
padding-right: 10px
}
.u-section-4 .u-container-layout-6 {
padding-left: 20px;
padding-right: 20px
}
}
@media (max-width:575px) {
.u-section-4 .u-sheet-1 {
min-height: 2064px
}
.u-section-4 .u-shape-1 {
height: 451px
}
.u-section-4 .u-layout-wrap-1 {
width: 268px;
margin-top: -386px;
margin-left: auto;
margin-bottom: 60px
}
.u-section-4 .u-image-1 {
min-height: 352px
}
.u-section-4 .u-layout-cell-2 {
min-height: 294px
}
.u-section-4 .u-container-layout-2 {
padding-left: 10px;
padding-right: 10px
}
.u-section-4 .u-text-1 {
font-size: 1.5rem
}
.u-section-4 .u-text-3 {
margin-right: 0
}
.u-section-4 .u-image-2 {
min-height: 351px
}
.u-section-4 .u-layout-cell-4 {
min-height: 242px
}
.u-section-4 .u-container-layout-4 {
padding-left: 10px;
padding-right: 10px
}
.u-section-4 .u-text-4 {
font-size: 1.5rem
}
.u-section-4 .u-image-3 {
min-height: 352px
}
.u-section-4 .u-layout-cell-6 {
min-height: 288px
}
.u-section-4 .u-container-layout-6 {
padding-left: 10px;
padding-right: 10px
}
}
.u-section-5 {
background-image: none
}
.u-section-5 .u-sheet-1 {
min-height: 504px
}
.u-section-5 .u-text-1 {
font-weight: 700;
font-size: 2.75rem;
margin: 54px auto 0
}
.u-section-5 .u-text-2 {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin: 20px auto 0
}
.u-section-5 .u-line-1 {
width: 100px;
height: 0;
margin: 30px auto 0
}
.u-section-5 .u-list-1 {
margin-bottom: 54px;
margin-top: 30px
}
.u-section-5 .u-repeater-1 {
grid-template-columns: repeat(3,33.3333%);
min-height: 223px;
grid-gap: 0px
}
.u-section-5 .u-container-layout-1 {
padding: 10px 30px
}
.u-section-5 .u-text-3 {
font-size: 4.5rem;
font-weight: 700;
margin: 0
}
.u-section-5 .u-text-4 {
font-weight: 300;
font-size: 1.5rem;
margin: -72px auto 0 72px
}
.u-section-5 .u-text-5 {
margin-left: 72px;
margin-right: 0;
margin-bottom: 0;
font-size: 1.125rem;
font-style: italic
}
.u-section-5 .u-container-layout-2 {
padding: 10px 30px
}
.u-section-5 .u-text-6 {
font-size: 4.5rem;
font-weight: 700;
margin: 0
}
.u-section-5 .u-text-7 {
font-weight: 300;
font-size: 1.5rem;
margin: -72px auto 0 72px
}
.u-section-5 .u-text-8 {
margin-left: 72px;
margin-right: 0;
margin-bottom: 0;
font-size: 1.125rem;
font-style: italic
}
.u-section-5 .u-container-layout-3 {
padding: 10px 30px
}
.u-section-5 .u-text-9 {
font-size: 4.5rem;
font-weight: 700;
margin: 0
}
.u-section-5 .u-text-10 {
font-weight: 300;
font-size: 1.5rem;
margin: -72px auto 0 72px
}
.u-section-5 .u-text-11 {
margin-left: 72px;
margin-right: 0;
margin-bottom: 0;
font-size: 1.125rem;
font-style: italic
}
@media (max-width:1199px) {
.u-section-5 .u-sheet-1 {
min-height: 551px
}
.u-section-5 .u-text-1 {
margin-top: 60px
}
.u-section-5 .u-list-1 {
margin-bottom: 60px
}
.u-section-5 .u-repeater-1 {
min-height: 184px
}
.u-section-5 .u-text-3 {
font-size: 4.0625rem
}
.u-section-5 .u-text-4 {
width: auto;
margin-top: -53px;
margin-right: 0;
margin-left: 54px
}
.u-section-5 .u-text-5 {
width: auto;
margin-top: 20px;
margin-left: 55px
}
.u-section-5 .u-text-6 {
font-size: 4.0625rem
}
.u-section-5 .u-text-7 {
width: auto;
margin-top: -53px;
margin-right: 0;
margin-left: 54px
}
.u-section-5 .u-text-8 {
width: auto;
margin-top: 20px;
margin-left: 55px
}
.u-section-5 .u-text-9 {
font-size: 4.0625rem
}
.u-section-5 .u-text-10 {
width: auto;
margin-top: -53px;
margin-right: 0;
margin-left: 54px
}
.u-section-5 .u-text-11 {
width: auto;
margin-top: 20px;
margin-left: 55px
}
}
@media (max-width:991px) {
.u-section-5 .u-sheet-1 {
min-height: 789px
}
.u-section-5 .u-repeater-1 {
min-height: 423px;
grid-template-columns: repeat(2,50%)
}
.u-section-5 .u-text-4 {
margin-top: 20px;
margin-left: 0
}
.u-section-5 .u-text-5 {
margin-left: 0
}
.u-section-5 .u-text-7 {
margin-top: 20px;
margin-left: 0
}
.u-section-5 .u-text-8 {
margin-left: 0
}
.u-section-5 .u-text-10 {
margin-top: 20px;
margin-left: 0
}
.u-section-5 .u-text-11 {
margin-left: 0
}
}
@media (max-width:767px) {
.u-section-5 .u-sheet-1 {
min-height: 758px
}
.u-section-5 .u-text-1 {
width: auto;
font-size: 3rem;
margin-left: 22px;
margin-right: 22px
}
.u-section-5 .u-text-2 {
margin-top: 23px
}
.u-section-5 .u-repeater-1 {
grid-template-columns: 100%
}
.u-section-5 .u-container-layout-1 {
padding-left: 10px;
padding-right: 10px
}
.u-section-5 .u-text-4 {
font-size: 1.875rem;
margin-top: -57px;
margin-left: 60px
}
.u-section-5 .u-text-5 {
margin-left: 60px
}
.u-section-5 .u-container-layout-2 {
padding-left: 10px;
padding-right: 10px
}
.u-section-5 .u-text-7 {
font-size: 1.875rem;
margin-top: -57px;
margin-left: 60px
}
.u-section-5 .u-text-8 {
margin-left: 60px
}
.u-section-5 .u-container-layout-3 {
padding-left: 10px;
padding-right: 10px
}
.u-section-5 .u-text-10 {
font-size: 1.875rem;
margin-top: -57px;
margin-left: 60px
}
.u-section-5 .u-text-11 {
margin-left: 60px
}
}
@media (max-width:575px) {
.u-section-5 .u-sheet-1 {
min-height: 992px
}
.u-section-5 .u-text-1 {
font-size: 2.75rem
}
.u-section-5 .u-repeater-1 {
min-height: 674px
}
.u-section-5 .u-container-layout-1 {
padding-top: 2px;
padding-bottom: 2px
}
.u-section-5 .u-text-3 {
font-size: 3.75rem;
width: 49px;
margin-top: 19px;
margin-left: auto;
margin-right: auto
}
.u-section-5 .u-text-4 {
margin-top: 22px;
margin-left: 0
}
.u-section-5 .u-text-5 {
margin-top: 19px;
margin-left: 0
}
.u-section-5 .u-container-layout-2 {
padding-top: 2px;
padding-bottom: 2px
}
.u-section-5 .u-text-6 {
font-size: 3.75rem;
width: 49px;
margin-top: 19px;
margin-left: auto;
margin-right: auto
}
.u-section-5 .u-text-7 {
margin-top: 22px;
margin-left: 0
}
.u-section-5 .u-text-8 {
margin-top: 19px;
margin-left: 0
}
.u-section-5 .u-container-layout-3 {
padding-top: 2px;
padding-bottom: 2px
}
.u-section-5 .u-text-9 {
font-size: 3.75rem;
width: 49px;
margin-top: 19px;
margin-left: auto;
margin-right: auto
}
.u-section-5 .u-text-10 {
margin-top: 22px;
margin-left: 0
}
.u-section-5 .u-text-11 {
margin-top: 19px;
margin-left: 0
}
}
.u-section-6 {
background-image: none
}
.u-section-6 .u-sheet-1 {
min-height: 1082px
}
.u-section-6 .u-shape-1 {
width: 832px;
height: 747px;
margin: 60px auto 0 52px
}
.u-section-6 .u-shape-2 {
width: 672px;
height: 555px;
margin: -852px 0 0 auto
}
.u-section-6 .u-image-1 {
height: 524px;
background-image: url("../images/background-classroom.webp");
background-position: 50% 50%;
width: 543px;
margin: -625px 61px 0 auto
}
.u-section-6 .u-group-1 {
background-image: none;
width: 568px;
min-height: 460px;
box-shadow: 5px 5px 20px 0 rgba(0,0,0,.15);
margin: -205px auto 28px 99px
}
.u-section-6 .u-container-layout-1 {
padding: 24px 40px
}
.u-section-6 .u-text-1 {
letter-spacing: 4px;
font-weight: 700;
text-transform: uppercase;
font-size: 1.25rem;
margin: 0 auto 0 0
}
.u-section-6 .u-text-2 {
font-size: 3.75rem;
font-weight: 700;
font-family: "PT Sans",sans-serif;
margin: 21px 0 0
}
.u-section-6 .u-text-3 {
letter-spacing: 1px;
margin: 21px 28px 0 0
}
.u-section-6 .u-btn-1 {
border-style: solid;
padding: 0
}
.u-section-6 .u-btn-2 {
font-weight: 700;
text-transform: uppercase;
background-image: none;
margin: 36px auto 0 0;
padding: 15px 46px 15px 45px
}
@media (max-width:1199px) {
.u-section-6 .u-sheet-1 {
min-height: 1070px
}
.u-section-6 .u-shape-1 {
width: 846px;
margin-left: 0
}
.u-section-6 .u-shape-2 {
width: 610px;
height: 504px;
margin-top: -880px
}
.u-section-6 .u-image-1 {
width: 524px;
margin-top: -534px
}
.u-section-6 .u-group-1 {
width: 524px;
margin-top: -194px;
margin-bottom: 17px;
margin-left: 61px
}
}
@media (max-width:991px) {
.u-section-6 .u-sheet-1 {
min-height: 1050px
}
.u-section-6 .u-shape-1 {
width: 720px
}
.u-section-6 .u-shape-2 {
margin-top: -890px;
margin-right: 30px
}
.u-section-6 .u-image-1 {
margin-top: -524px
}
.u-section-6 .u-group-1 {
width: 451px;
margin-top: -156px;
margin-bottom: -21px
}
.u-section-6 .u-container-layout-1 {
padding-left: 30px;
padding-right: 30px
}
}
@media (max-width:767px) {
.u-section-6 .u-shape-1 {
width: 540px
}
.u-section-6 .u-shape-2 {
width: 540px;
margin-right: 0
}
.u-section-6 .u-image-1 {
height: 454px;
width: 454px;
margin-top: -540px;
margin-right: auto
}
.u-section-6 .u-group-1 {
margin: -70px 26px -37px auto
}
.u-section-6 .u-container-layout-1 {
padding-top: 30px;
padding-bottom: 30px
}
}
@media (max-width:575px) {
.u-section-6 .u-sheet-1 {
min-height: 1002px
}
.u-section-6 .u-shape-1 {
height: 620px;
width: 307px;
margin-right: 0;
margin-left: auto
}
.u-section-6 .u-shape-2 {
height: 293px;
width: 319px;
margin-top: -672px;
margin-right: auto;
margin-left: 0
}
.u-section-6 .u-image-1 {
margin-top: -261px;
height: 524px;
margin-right: initial;
margin-left: initial;
width: auto
}
.u-section-6 .u-group-1 {
width: 318px;
min-height: 458px;
margin: 43px auto 8px 0
}
.u-section-6 .u-container-layout-1 {
padding-left: 20px;
padding-right: 20px
}
.u-section-6 .u-text-2 {
font-size: 2.75rem
}
.u-section-6 .u-text-3 {
margin-right: 0
}
}
.u-section-7 .u-sheet-1 {
min-height: 1061px
}
.u-section-7 .u-shape-1 {
width: 323px;
height: 323px;
margin: 60px auto 0 340px
}
.u-section-7 .u-group-1 {
width: 800px;
min-height: 258px;
margin: -191px auto 0
}
.u-section-7 .u-container-layout-1 {
padding: 30px
}
.u-section-7 .u-text-1 {
margin-bottom: 0;
margin-top: 0;
font-weight: 700;
letter-spacing: normal
}
.u-section-7 .u-text-2 {
font-style: italic;
margin: 20px 285px 0 5px
}
.author {
margin-left: 385px
}
.u-section-7 .u-list-1 {
margin-bottom: 0;
margin-top: 30px
}
.u-section-7 .u-repeater-1 {
grid-template-columns: repeat(2,50%);
min-height: 185px;
grid-gap: 0px
}
.u-section-7 .u-container-layout-2 {
padding: 10px 60px
}
.u-section-7 .u-text-3 {
margin-bottom: 0;
margin-top: 0;
font-size: 1.125rem;
line-height: 2
}
.u-section-7 .u-container-layout-3 {
padding: 10px 60px
}
.u-section-7 .u-text-4 {
margin-bottom: 0;
margin-top: 0;
font-size: 1.125rem;
line-height: 2
}
.u-section-7 .u-shape-2 {
width: 250px;
height: 219px;
margin: 30px 0 60px auto
}
@media (max-width:1199px) {
.u-section-7 .u-repeater-1 {
min-height: 153px
}
}
@media (max-width:991px) {
.u-section-7 .u-sheet-1 {
min-height: 1189px
}
.u-section-7 .u-shape-1 {
margin-left: 179px
}
.u-section-7 .u-group-1 {
width: 720px
}
.u-section-7 .u-text-2 {
margin-left: 305px
}
.u-section-7 .u-repeater-1 {
grid-template-columns: 100%
}
.u-section-7 .u-container-layout-2 {
padding-left: 30px;
padding-right: 30px
}
.u-section-7 .u-container-layout-3 {
padding-left: 30px;
padding-right: 30px
}
}
@media (max-width:767px) {
.u-section-7 .u-sheet-1 {
min-height: 1287px
}
.u-section-7 .u-shape-1 {
margin-left: 82px
}
.u-section-7 .u-group-1 {
width: 540px;
margin-top: -211px
}
.u-section-7 .u-container-layout-1 {
padding-left: 10px;
padding-right: 10px
}
.u-section-7 .u-text-2 {
margin-left: 165px
}
.u-section-7 .u-container-layout-2 {
padding-left: 10px;
padding-right: 10px
}
.u-section-7 .u-container-layout-3 {
padding-left: 10px;
padding-right: 10px
}
}
@media (max-width:575px) {
.u-section-7 .u-sheet-1 {
min-height: 1465px
}
.u-section-7 .u-shape-1 {
width: 280px;
height: 280px;
margin-left: 17px
}
.u-section-7 .u-group-1 {
width: 340px;
margin-top: -168px
}
.u-section-7 .u-text-2 {
margin-left: 0
}
.u-section-7 .u-shape-2 {
width: 207px;
height: 181px
}
}
.u-section-8 {
background-image: none
}
.u-section-8 .u-sheet-1 {
min-height: 1095px
}
.u-section-8 .u-group-1 {
width: 822px;
min-height: 740px;
margin: 60px auto 0 36px
}
.u-section-8 .u-container-layout-1 {
padding: 20px
}
.u-section-8 .u-shape-1 {
width: 740px;
height: 700px;
margin: 0 auto 0 0
}
.u-section-8 .u-image-1 {
width: 570px;
height: 570px;
background-image: url("../images/background-toddler.webp");
background-position: 50% 50%;
margin: -665px auto 0 85px
}
.u-section-8 .u-group-2 {
background-image: none;
width: 632px;
min-height: 488px;
box-shadow: 5px 5px 20px 0 rgba(0,0,0,.15);
margin: -293px 0 60px auto
}
.u-section-8 .u-container-layout-2 {
padding: 24px 40px
}
.u-section-8 .u-text-1 {
letter-spacing: 4px;
font-weight: 700;
text-transform: uppercase;
font-size: 1.25rem;
margin: 0 auto 0 0
}
.u-section-8 .u-text-2 {
font-size: 3.75rem;
font-weight: 700;
font-family: "PT Sans",sans-serif;
margin: 21px 0 0
}
.u-section-8 .u-text-3 {
letter-spacing: 1px;
margin: 21px 28px 0 0
}
.u-section-8 .u-btn-1 {
border-style: solid;
padding: 0
}
.u-section-8 .u-btn-2 {
font-weight: 700;
text-transform: uppercase;
background-image: none;
margin: 36px auto 0 0;
padding: 15px 46px 15px 45px
}
@media (max-width:1199px) {
.u-section-8 .u-sheet-1 {
min-height: 1025px
}
.u-section-8 .u-group-1 {
width: 813px;
min-height: 732px;
margin-left: 0
}
.u-section-8 .u-container-layout-1 {
padding-bottom: 12px
}
.u-section-8 .u-group-2 {
width: 542px;
min-height: 428px;
margin-top: -276px
}
}
@media (max-width:991px) {
.u-section-8 .u-sheet-1 {
min-height: 1024px
}
.u-section-8 .u-group-1 {
width: 720px
}
.u-section-8 .u-shape-1 {
width: 680px
}
.u-section-8 .u-image-1 {
width: 535px;
height: 535px;
margin-left: 52px
}
.u-section-8 .u-container-layout-2 {
padding-left: 30px;
padding-right: 30px
}
}
@media (max-width:767px) {
.u-section-8 .u-group-1 {
width: 540px
}
.u-section-8 .u-container-layout-1 {
padding-left: 10px;
padding-right: 10px
}
.u-section-8 .u-shape-1 {
height: 597px;
margin-right: initial;
margin-left: initial;
width: auto
}
.u-section-8 .u-image-1 {
width: 447px;
height: 447px;
margin-top: -534px;
margin-left: 28px
}
.u-section-8 .u-group-2 {
width: 437px
}
.u-section-8 .u-text-2 {
font-size: 3.4375rem
}
}
@media (max-width:575px) {
.u-section-8 .u-group-1 {
width: 340px
}
.u-section-8 .u-image-1 {
width: 320px;
height: 320px;
margin-left: 0
}
.u-section-8 .u-group-2 {
width: 340px
}
.u-section-8 .u-container-layout-2 {
padding-left: 20px;
padding-right: 20px
}
.u-section-8 .u-text-2 {
font-size: 2.75rem
}
.u-section-8 .u-text-3 {
margin-right: 0
}
}
.u-section-9 .u-sheet-1 {
min-height: 1354px
}
.u-section-9 .u-rotation-parent-1 {
width: 972px;
height: 1068px;
animation-timing-function: ease;
margin: 60px 0 0 auto
}
.u-section-9 .u-shape-1 {
width: 1068px;
height: 972px;
transform: translateX(-50%) translateY(-50%) scaleX(-1) rotate(90deg);
transform-origin: center center
}
.u-section-9 .u-image-1 {
width: 745px;
height: 747px;
object-position: 0% 50%;
background-position: 50% 50%;
background-image: url("../images/hero-playground.webp");
margin: -984px 43px 0 auto
}
.u-section-9 .u-shape-2 {
width: 241px;
height: 242px;
background-image: linear-gradient(#77aad9,#478ac9);
margin: 54px 0 0 auto
}
.u-section-9 .u-form-1 {
height: 522px;
background-image: none;
margin: -561px 548px 0 0
}
.u-section-9 .u-form-group-4 {
margin-left: 0
}
.u-section-9 .u-btn-1 {
border-style: solid;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
background-image: none;
width: 100%;
padding-left: 0;
padding-right: 0
}
.u-section-9 .u-text-1 {
margin: 102px 0 60px 672px
}
.u-section-9 .u-btn-2 {
border-style: solid;
padding: 0
}
@media (max-width:1199px) {
.u-section-9 .u-sheet-1 {
min-height: 1320px
}
.u-section-9 .u-rotation-parent-1 {
width: 878px;
height: 922px
}
.u-section-9 .u-shape-1 {
width: 922px;
height: 878px
}
.u-section-9 .u-image-1 {
width: 724px;
height: 724px;
margin-top: -838px
}
.u-section-9 .u-shape-2 {
width: 227px;
height: 228px;
margin-top: 22px;
margin-right: 28px
}
.u-section-9 .u-form-1 {
margin-top: -493px;
margin-right: 348px
}
.u-section-9 .u-text-1 {
width: auto;
margin-top: 60px;
margin-left: 472px
}
}
@media (max-width:991px) {
.u-section-9 .u-sheet-1 {
min-height: 1410px
}
.u-section-9 .u-rotation-parent-1 {
width: 720px;
height: 781px
}
.u-section-9 .u-shape-1 {
width: 791px;
height: 720px
}
.u-section-9 .u-image-1 {
width: 594px;
height: 594px;
margin-top: -721px;
margin-right: 40px
}
.u-section-9 .u-shape-2 {
margin-top: 342px;
margin-right: 25px
}
.u-section-9 .u-form-1 {
margin-top: -615px;
margin-right: 128px
}
.u-section-9 .u-text-1 {
margin-top: 134px;
margin-left: 252px
}
}
@media (max-width:767px) {
.u-section-9 .u-sheet-1 {
min-height: 1388px
}
.u-section-9 .u-rotation-parent-1 {
width: 540px;
height: 601px;
margin-top: 49px;
margin-left: 0
}
.u-section-9 .u-shape-1 {
width: 593px;
height: 540px
}
.u-section-9 .u-image-1 {
width: 440px;
height: 440px;
margin-top: -535px;
margin-right: auto;
margin-left: 66px
}
.u-section-9 .u-shape-2 {
width: 189px;
height: 189px;
margin-top: -11px;
margin-right: auto;
margin-left: 333px
}
.u-section-9 .u-form-1 {
width: 553px;
margin-top: 18px;
margin-left: -6px;
margin-right: -6px
}
.u-section-9 .u-text-1 {
margin: 18px 36px 49px
}
}
@media (max-width:575px) {
.u-section-9 .u-sheet-1 {
min-height: 1155px
}
.u-section-9 .u-rotation-parent-1 {
width: 340px;
height: 401px
}
.u-section-9 .u-shape-1 {
width: 373px;
height: 340px
}
.u-section-9 .u-image-1 {
width: 293px;
height: 293px;
margin-top: -357px;
margin-left: 0
}
.u-section-9 .u-shape-2 {
width: 119px;
height: 120px;
margin-top: -23px;
margin-left: 151px
}
.u-section-9 .u-form-1 {
margin-top: 27px;
margin-right: initial;
margin-left: initial;
width: auto
}
.u-section-9 .u-text-1 {
margin: 27px 0 60px
}
}
.u-section-10 .u-sheet-1 {
min-height: 400px
}
.u-section-11 {
background-image: linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.55)),url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJkZWZhdWx0LWltYWdlLXNvbGlkIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDAwIDI2NSIgc3R5bGU9IndpZHRoOiA0MDBweDsgaGVpZ2h0OiAyNjVweDsiPg0KPHJlY3QgZmlsbD0iI0M2RDhFMSIgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNjUiLz4NCjxwYXRoIGZpbGw9IiNEOUUzRTgiIGQ9Ik0zOTUuMyw5Ni4yYy01LTAuOC02LjEsMS4xLTguNSwyLjljLTEtMi4zLTIuNi02LjItNy43LTVjMS41LTUuMy0yLjYtOC40LTcuNy04LjRjLTAuNiwwLTEuMiwwLjEtMS44LDAuMg0KCWMtMS44LTQuMS02LTYuOS0xMC43LTYuOWMtNi41LDAtMTEuOCw1LjMtMTEuOCwxMS44YzAsMC40LDAsMC45LDAuMSwxLjNjLTEuMi0wLjgtMi41LTEuMy0zLjktMS4zYy00LjMsMC03LjksNC4yLTcuOSw5LjQNCgljMCwxLjIsMC4yLDIuNCwwLjYsMy41Yy0wLjUtMC4xLTEtMC4xLTEuNi0wLjFjLTYuOSwwLTEyLjUsNS41LTEyLjcsMTIuNGMtMC45LTAuMi0xLjktMC40LTIuOS0wLjRjLTYuNCwwLTExLjcsNS4yLTEyLjUsMTEuOA0KCWMtMS4yLTAuNC0yLjUtMC42LTMuOS0wLjZjLTUuOSwwLTEwLjgsMy44LTEyLjEsOC45Yy0yLjQtMi01LjUtMy4yLTguOS0zLjJjLTYsMC0xMS4xLDMuNy0xMi44LDguOGMtMS41LTEuNC0zLjgtMi4zLTYuMy0yLjMNCgljLTIuMSwwLTQuMSwwLjYtNS41LDEuN2gtMC4xYy0xLjMtNS41LTYuMi05LjUtMTIuMS05LjVjLTIuNCwwLTQuNywwLjctNi42LDEuOWMtMS40LTAuNy0zLTEuMi00LjgtMS4yYy0wLjMsMC0wLjUsMC0wLjgsMA0KCWMtMS41LTQuMS01LjItNy05LjUtN2MtMy4xLDAtNS45LDEuNS03LjgsMy45Yy0yLjItNC44LTYuOC04LjItMTIuMi04LjJjLTUuNiwwLTEwLjUsMy43LTEyLjUsOC44Yy0yLjEtMC45LTQuNC0xLjUtNi45LTEuNQ0KCWMtNi44LDAtMTIuNSwzLjktMTQuNSw5LjNjLTAuMiwwLTAuNSwwLTAuNywwYy01LjIsMC05LjYsMy4yLTExLjQsNy44Yy0yLjctMi44LTctNC41LTExLjgtNC41Yy0zLjMsMC02LjQsMC45LTguOSwyLjMNCgljLTIuMS02LjUtOC0xMi4yLTE4LjEtOS45Yy0yLjctMi4zLTYuMy0zLjctMTAuMS0zLjdjLTIuNSwwLTQuOCwwLjYtNi45LDEuNmMtMi4yLTUuOS03LjktMTAuMS0xNC42LTEwLjFjLTguNiwwLTE1LjYsNy0xNS42LDE1LjYNCgljMCwwLjksMC4xLDEuNywwLjIsMi41Yy0yLjYtNS03LjgtOC40LTEzLjgtOC40Yy04LjMsMC0xNS4xLDYuNS0xNS42LDE0LjZjLTIuOS0zLjItNy01LjMtMTEuNy01LjNjLTcuNCwwLTEzLjUsNS4xLTE1LjIsMTINCgljLTIuOS0zLjUtOS44LTYtMTQuNy02djExOS4yaDQwMFYxMDJDNDAwLDEwMiw0MDAsOTcsMzk1LjMsOTYuMnoiLz4NCjxwYXRoIGZpbGw9IiM4RUE4QkIiIGQ9Ik00MDAsMjA2LjJjMCwwLTI1LjMtMTkuMi0zMy42LTI1LjdjLTEzLjQtMTAuNi0yMy4xLTEyLjktMzEuNy03cy0yMy45LDE5LjctMjMuOSwxOS43cy01OC45LTYzLjktNjEuNS02Ni40DQoJYy0xLjUtMS40LTMuNi0xLjctNS41LTAuOWMtNS4yLDIuNC0xNy42LDkuNy0yNC41LDEyLjdjLTYuOSwyLjktNDEtNTAuNy00OS42LTUzcy04NC4zLDgzLjMtMTAxLjQsNzUuMXMtMjYuOS0yLjMtMzUuNCwzLjUNCgljLTguNiw1LjktMTEsNS45LTE1LjksOC4ycy0xNy4xLTUuOS0xNy4xLTUuOVYyNjVjMCwwLDQwMCwwLjIsNDAwLDB2LTU4LjhINDAweiIvPg0KPHBhdGggZmlsbD0iIzdFOTZBNiIgZD0iTTMzMy40LDE3OWMtMTMuMS05LjMtNDAsNC42LTU1LjEsMTAuN2MtMjMuNiw5LjYtOTQtNTQuNC0xMDcuMi01OS43YzAsMC00LjIsMy43LTkuNiw3LjYNCgljLTMuNS0wLjQtOC40LTUuNy05LjktNC43Yy00LjYsMy4xLTE3LjgsMTUuNC0yOC4zLDI2LjZjLTEwLjUsMTEuMy0xMS43LDAtMTUuOC0wLjZjLTIuNS0wLjQtNTQuMSw0Mi41LTU4LjcsNDMuMQ0KCUMyMi4zLDIwNS4zLDAsMTk3LjUsMCwxOTcuNVYyNjVsNDAwLTAuMXYtNTMuM0M0MDAsMjExLjYsMzQ0LjgsMTg3LjEsMzMzLjQsMTc5eiIvPg0KPHBhdGggZmlsbD0iIzc4OEY5RSIgZD0iTTAsMjY0Ljl2LTU4LjZjMCwwLDguMiwxLjgsMTEuMyw1LjNjMy4xLDMuNiwyNi4xLTQuMiwyNi4xLDQuN3MwLjUsNC4yLDAuNSwxNC44YzAsMTAuNywyMy00LjIsMzguMS0xOC40DQoJczM0LjktNDkuMiwzNi0zNWMxLDE0LjItMTUuMSwzOS4yLTI0LDU2LjRDNzkuMSwyNTEuNCw1MS43LDI2NSw1MS43LDI2NUwwLDI2NC45eiIvPg0KPHBhdGggZmlsbD0iIzc4OEY5RSIgZD0iTTEwMCwyNjVjMCwwLDY2LjctMTI1LjEsNjguMy0xMTYuOHMtNi44LDI5LjcsMi4xLDI2LjFjOC45LTMuNiwxNC42LTE2LDE4LjgtOS41czE2LjIsMzguNiwyMS45LDMzLjgNCgljNS43LTQuNywyMS40LTEzLjEsMjIuNC02LjVjMSw2LjUtMSw1LjMtNS43LDIwLjJDMjIzLjEsMjI3LjEsMjAwLDI2NSwyMDAsMjY1aC0xMGMwLDAsNi0yNC44LDguNi0zNC45YzIuNi0xMC4xLTMuNy0xOS0xMi04LjMNCglzLTIzLDIyLTI0LDE3LjhzLTUuNy0zMC4zLTE4LjgtMTQuMmMtMTMsMTYtMzMuOCwzOS43LTMzLjgsMzkuN2gtMTBWMjY1eiIvPg0KPHBhdGggZmlsbD0iIzc4OEY5RSIgZD0iTTI0NSwyNjVjMCwwLDE5LjgtNTQuNywzMy40LTY0LjJzNTMuNy0yNy45LDQ2LjktMTMuNmMtNi44LDE0LjItMTEsMzQuNC0yMC4zLDQ5LjgNCgljLTkuNCwxNS40LTE4LjgsMjYuMS0xNC4xLDEzLjZjNC43LTEyLjUsNi40LTIzLjMsMy43LTIzLjFDMjcxLjMsMjI5LjEsMjYwLDI2NSwyNjAsMjY1SDI0NXoiLz4NCjwvc3ZnPg0K');
background-position: 50% 50%
}
.u-section-11 .u-sheet-1 {
min-height: 800px
}
.u-section-11 .u-text-1 {
font-size: 6rem;
font-weight: 700;
margin: 60px auto 0
}
.u-section-11 .u-text-2 {
margin: 30px 0 0
}
.u-section-11 .u-btn-1 {
background-image: none;
text-transform: uppercase;
font-weight: 700;
margin: 40px auto 60px
}
@media (max-width:1199px) {
.u-section-11 .u-sheet-1 {
min-height: 660px
}
.u-section-11 .u-text-1 {
font-size: 4.5rem
}
}
@media (max-width:991px) {
.u-section-11 .u-sheet-1 {
min-height: 506px
}
}
@media (max-width:767px) {
.u-section-11 .u-sheet-1 {
min-height: 380px
}
.u-section-11 .u-text-1 {
font-size: 3.75rem
}
}
@media (max-width:575px) {
.u-section-11 .u-sheet-1 {
min-height: 239px
}
.u-section-11 .u-text-1 {
font-size: 3rem
}
}
.auth-fixed-btn {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
border-radius: 50px;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
transition: all .3s ease;
display: flex;
align-items: center;
padding: 8px 16px;
overflow: hidden
}
.auth-fixed-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,.3)
}
.auth-fixed-btn.login {
background-color: #478ac9;
color: #fff;
padding: 10px 25px;
font-weight: 600;
letter-spacing: .5px
}
.auth-fixed-btn.user {
background-color: #f1c50e;
color: #333
}
.auth-user-icon {
background-color: #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px
}
.auth-user-icon svg {
width: 18px;
height: 18px;
color: #478ac9
}
.auth-username {
font-weight: 600;
margin-right: 5px
}
.auth-logout {
margin-left: 10px;
font-size: 12px;
opacity: .7;
text-decoration: none;
color: inherit
}
.auth-logout:hover {
opacity: 1;
text-decoration: underline
}
@keyframes fadeInButton {
from {
opacity: 0;
transform: translateY(-10px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.auth-fixed-btn {
animation: fadeInButton .5s ease forwards
}
.form-section {
margin-bottom: 30px;
padding: 20px;
background-color: #f8f9fa;
border-radius: var(--radius-sm);
border-left: 4px solid var(--primary-color);
box-shadow: 0 2px 8px rgba(0,0,0,.03)
}
.form-section-title {
margin-top: 0;
margin-bottom: 20px;
color: var(--text-color);
font-weight: 600;
font-size: 16px;
display: flex;
align-items: center
}
.form-section-title i {
margin-right: 8px;
color: var(--primary-color)
}
.user-search-panel {
margin-bottom: 20px;
background-color: var(--white);
border-radius: var(--radius-sm);
padding: 20px;
box-shadow: var(--shadow)
}
.user-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px
}
.user-filter-item {
flex: 1;
min-width: 200px
}
.user-filter-buttons {
display: flex;
gap: 10px;
align-items: flex-end
}
.search-field {
width: 100%
}
.status-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600
}
.status-active {
background-color: rgba(76,175,80,.15);
color: var(--success-color)
}
.status-wait {
background-color: rgba(255,193,7,.15);
color: #f57f17
}
.status-blocked {
background-color: rgba(231,76,60,.15);
color: var(--danger-color)
}
.status-deleted {
background-color: rgba(158,158,158,.15);
color: #616161
}
.action-column {
white-space: nowrap;
text-align: center
}
.action-column .btn {
margin-right: 5px
}
.user-avatar {
width: 50px;
height: 50px;
object-fit: cover;
border: 2px solid #e9ecef
}
.user-avatar-wrapper {
margin-right: 15px
}
.default-avatar {
width: 50px;
height: 50px;
background-color: #f1f2f6;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #8a9099
}
.user-name {
font-weight: 600;
margin-bottom: 5px
}
.user-name a {
color: var(--text-color);
text-decoration: none
}
.user-name a:hover {
color: var(--primary-color)
}
.user-profile {
color: var(--text-light);
font-size: 13px
}
.language-tabs {
display: flex;
gap: 10px;
margin-bottom: 15px
}
.lang-btn {
padding: 5px 15px;
background-color: #f1f2f6;
border: none;
border-radius: 20px;
cursor: pointer;
transition: var(--transition);
font-size: 13px
}
.lang-btn.active {
background-color: var(--primary-color);
color: #fff
}
.lang-content {
display: none
}
.lang-content.active {
display: block;
animation: fadeIn .3s ease
}
@keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
.role-badge {
display: inline-block;
padding: 3px 10px;
background-color: #e3f2fd;
color: #1976d2
}
.user-meta {
color: var(--text-light);
font-size: 13px
}
.user-status {
font-size: 12px;
padding: 3px 10px;
border-radius: 20px;
font-weight: 600
}
.organization-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f1f2f6
}
.organization-item:last-child {
border-bottom: none
}
.organization-name {
font-weight: 500;
color: var(--text-color)
}
.organization-count {
font-weight: 600;
color: var(--primary-color);
background-color: rgba(22,163,74,.1);
padding: 3px 10px;
border-radius: 20px;
font-size: 12px
}
.summary-item {
text-align: center;
padding: 15px;
flex: 1;
min-width: 120px;
background-color: #f9fafc;
border-radius: var(--radius-sm);
margin: 5px
}
.summary-value {
font-size: 24px;
font-weight: 700;
color: var(--text-color);
margin-bottom: 5px
}
.summary-label {
font-size: 13px;
color: var(--text-light)
}
.stats-summary {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px 0
}
.animate__animated {
animation-duration: .8s
}
.animate__fadeIn {
animation: fadeIn .8s ease-in-out
}
.animate__fadeInUp {
animation: fadeInUp .8s ease-in-out
}
@keyframes fadeInUp {
from {
transform: translateY(20px);
opacity: 0
}
to {
transform: translateY(0);
opacity: 1
}
}
.simple-breadcrumbs {
display: flex;
align-items: center;
font-size: 14px;
margin-bottom: 20px;
color: #757575
}
.breadcrumb-item {
color: #757575;
text-decoration: none;
transition: color .2s ease
}
.breadcrumb-item:hover {
color: #16a34a;
text-decoration: none
}
.breadcrumb-item.active {
color: #16a34a;
font-weight: 500
}
.breadcrumb-separator {
margin: 0 8px;
color: #bdbdbd;
font-weight: 400
}
.module-title {
margin-bottom: 25px
}
.module-title h1 {
font-size: 28px;
font-weight: 500!important;
color: #212121;
margin: 0;
padding: 0;
display: flex;
align-items: center
}
.item-count {
font-size: 16px;
font-weight: 400;
color: #757575;
margin-left: 12px
}
.module-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px
}
.btn-create {
background-color: #16a34a;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
text-align: center;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .3s ease
}
.btn-create:hover {
background-color: #15803d;
color: #fff;
text-decoration: none;
box-shadow: 0 2px 8px rgba(22,163,74,.2)
}
.btn-create i {
margin-right: 8px
}
@media (max-width:768px) {
.simple-breadcrumbs {
font-size: 13px
}
.module-title h1 {
font-size: 24px
}
.item-count {
font-size: 14px
}
}
#topnav .submenu {
min-width: 160px;
background: #fff;
box-shadow: 0 5px 15px rgba(0,0,0,.1);
border-radius: 6px;
padding: 8px 0;
margin-top: 5px;
border-top: 3px solid #16a34a
}
#topnav .submenu li a {
padding: 10px 15px;
color: #3c4858;
font-size: 14px;
transition: all .2s ease
}
#topnav .submenu li a:hover {
background-color: #f8f9fa;
color: #16a34a;
padding-left: 20px
}
.organization-name {
display: flex;
align-items: center;
gap: 8px
}
.change-org-link {
color: #6b7280;
text-decoration: none;
padding: 2px 4px;
border-radius: 4px;
transition: all .2s ease
}
.change-org-link:hover {
color: #16a34a;
background-color: rgba(22,163,74,.1);
text-decoration: none
}
.organizations-module .organization-view {
padding-bottom: 20px
}
.organizations-module .org-card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(20,20,50,.06);
background-color: #fff;
margin-bottom: 20px;
transition: all .3s ease
}
.organizations-module .org-card:hover {
box-shadow: 0 5px 20px rgba(20,20,50,.08)
}
.organizations-module .org-header {
padding: 15px;
border-bottom: 1px solid #f5f6fa;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap
}
.organizations-module .org-title {
font-size: 18px;
font-weight: 600;
color: #283252;
margin: 0
}
.organizations-module .org-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
margin-left: 10px;
vertical-align: middle;
background-color: #95a5a6 !important;
}
.organizations-module .org-badge.active {
background-color: #00d0a8 !important;
color: #fff
}
.organizations-module .org-badge.inactive {
background-color: #ff5758 !important;
color: #fff
}
.organizations-module .org-type-badge {
background-color: #3c8dbc !important;
color: #fff
}
.organizations-module .org-village-badge {
background-color: #605ca8 !important;
color: #fff
}
.organizations-module .org-city-badge {
background-color: #00a65a !important;
color: #fff
}
.organizations-module .hierarchy-info {
margin-top: 15px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 8px
}
.organizations-module .hierarchy-header {
font-weight: 600;
margin-bottom: 10px;
color: #3c8dbc
}
.organizations-module .hierarchy-item {
display: flex;
align-items: center;
margin-bottom: 8px;
padding: 8px;
background-color: #fff;
border-radius: 4px;
border-left: 3px solid #3c8dbc
}
.organizations-module .hierarchy-item.root {
border-left-color: #00a65a
}
.organizations-module .hierarchy-item.current {
background-color: #f1f6fb;
border-left-color: #f39c12
}
.organizations-module .hierarchy-item-icon {
font-size: 16px;
margin-right: 8px;
color: #3c8dbc
}
.organizations-module .hierarchy-item-name {
font-weight: 500
}
.organizations-module .org-actions {
display: flex;
gap: 8px
}
.organizations-module .org-btn {
border-radius: 6px;
padding: 6px 14px;
font-weight: 500;
font-size: 13px;
transition: all .2s ease;
box-shadow: 0 1px 3px rgba(20,20,50,.04)
}
/* Organizations module: StatisticsWidget support */
.organizations-module .stats-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 20px;
}
.organizations-module .stat-card {
flex: 1;
min-width: 180px;
background: #fff;
border-radius: 12px;
padding: 20px 15px 15px;
text-align: center;
box-shadow: 0 2px 8px rgba(20,20,50,.06);
transition: all .2s ease;
position: relative;
overflow: hidden;
border-top: 3px solid #4a89dc;
}
.organizations-module .stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(20,20,50,.1);
}
.organizations-module .stat-card .stat-value {
font-size: 2rem;
font-weight: 700;
color: #283252;
margin-bottom: 5px;
}
.organizations-module .stat-card .stat-label {
font-size: 12px;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.organizations-module .stat-card .stat-icon {
position: absolute;
right: -15px;
top: -15px;
font-size: 70px;
opacity: 0.08;
color: #4a89dc;
}
.organizations-module .stat-card .progress-thin {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: #f0f0f0;
}
.organizations-module .stat-card .progress-thin .progress-bar {
height: 100%;
transition: width 0.5s ease;
}
.organizations-module .info-section {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(20,20,50,.06);
margin-bottom: 15px;
transition: all .3s ease
}
.organizations-module .info-section h3 {
font-size: 16px;
font-weight: 600;
color: #283252;
margin: 0;
padding: 15px;
border-bottom: 1px solid #f5f6fa;
display: flex;
align-items: center
}
.organizations-module .info-section h3 i {
margin-right: 10px;
color: #8a9099
}
.organizations-module .info-body {
padding: 15px
}
.organizations-module .info-table {
width: 100%;
border-collapse: collapse
}
.organizations-module .info-table td,
.organizations-module .info-table th {
padding: 10px 8px;
border-bottom: 1px solid #f1f2f6;
font-size: 13px
}
.organizations-module .info-table th {
color: #5c6c7c;
font-weight: 600;
width: 40%;
text-align: left;
background-color: #f9fafc
}
.organizations-module .info-table tr:last-child td,
.organizations-module .info-table tr:last-child th {
border-bottom: none
}
.organizations-module .badge {
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500
}
.organizations-module .organization-item {
display: flex;
align-items: center;
padding: 12px 16px;
margin-bottom: 8px;
background: #fff;
border-radius: 8px;
border-left: 3px solid #007bff;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
transition: all .3s ease;
position: relative;
min-height: 70px
}
.organizations-module .organization-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,.12)
}
.organizations-module .organization-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-right: 12px;
flex-shrink: 0
}
.organizations-module .organization-details {
flex: 1;
min-width: 0
}
.organizations-module .organization-details h5 {
margin: 0 0 4px 0;
font-size: 14px;
font-weight: 600;
color: #333;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
line-height: 1.2
}
.organizations-module .type-badge {
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
color: #fff;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .5px
}
.organizations-module .status-badge {
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
font-weight: 500
}
.organizations-module .status-active {
background-color: #00d0a8;
color: #fff
}
.organizations-module .status-inactive {
background-color: #ff5758;
color: #fff
}
.organizations-module .org-info {
margin: 0;
font-size: 12px;
color: #666;
display: flex;
flex-wrap: wrap;
gap: 12px;
line-height: 1.3
}
.organizations-module .org-detail {
display: inline-flex;
align-items: center;
gap: 5px
}
.organizations-module .org-location {
display: inline-flex;
align-items: center;
gap: 5px
}
.organizations-module .org-created {
display: inline-flex;
align-items: center;
gap: 5px
}
.organizations-module .organization-stats {
display: flex;
flex-direction: row;
gap: 6px;
margin-right: 12px
}
.organizations-module .stat-item {
padding: 4px 8px;
border-radius: 6px;
text-align: center;
min-width: 50px
}
.organizations-module .stat-number {
font-size: 14px;
font-weight: 600;
margin-bottom: 1px;
line-height: 1
}
.organizations-module .stat-label {
font-size: 9px;
opacity: .9;
text-transform: uppercase;
letter-spacing: .5px;
line-height: 1
}
.organizations-module .organization-actions {
flex-shrink: 0
}
.organizations-module .progress-thin {
height: 3px;
background-color: #f0f0f0;
border-radius: 2px;
overflow: hidden;
margin-top: 8px
}
.organizations-module .progress-bar {
height: 100%;
transition: width .6s ease
}
@media (max-width:768px) {
.organizations-module .org-header {
flex-direction: column;
align-items: flex-start
}
.organizations-module .org-actions {
margin-top: 10px;
width: 100%
}
.organizations-module .org-stats {
grid-template-columns: repeat(auto-fit,minmax(150px,1fr))
}
}
@media (max-width:768px) {
.organizations-module .organization-item {
flex-direction: column;
align-items: flex-start;
gap: 15px
}
.organizations-module .organization-icon {
margin-right: 0;
align-self: center
}
.organizations-module .organization-stats {
flex-direction: row;
justify-content: center;
width: 100%
}
.organizations-module .organization-actions {
align-self: center;
width: 100%;
text-align: center
}
}
.organizations-module .search-form-container {
margin-bottom: 20px
}
.organizations-module .search-form .input-group {
max-width: 600px;
margin: 0
}
.organizations-module .search-form .form-control {
border-radius: 6px 0 0 6px;
border-right: none;
padding: 10px 15px;
font-size: 14px
}
.organizations-module .search-form .input-group-append .btn {
border-radius: 0;
padding: 7px 15px;
border-left: none
}
.organizations-module .search-form .input-group-append .btn:last-child {
border-radius: 0 6px 6px 0
}
.organizations-module .search-form .btn-primary {
background-color: #4fc3f7;
border-color: #4fc3f7
}
.organizations-module .search-form .btn-primary:hover {
background-color: #29b6f6;
border-color: #29b6f6
}
.organizations-module .search-form .btn-secondary {
background-color: #757575;
border-color: #757575
}
.organizations-module .search-form .btn-secondary:hover {
background-color: #616161;
border-color: #616161
}
.organizations-module .filter-buttons-container {
margin-bottom: 20px
}
.organizations-module .filter-buttons-container .btn-group {
margin-bottom: 10px
}
.organizations-module .filter-buttons-container .btn {
font-size: 12px;
padding: 4px 8px;
border-radius: 3px;
margin-right: 3px
}
.organizations-module .filter-buttons-container .btn-default {
background-color: #f8f9fa;
border-color: #dee2e6;
color: #495057
}
.organizations-module .filter-buttons-container .btn-default:hover {
background-color: #e9ecef;
border-color: #dee2e6
}
.organizations-module .filter-buttons-container .btn-primary {
background-color: #4fc3f7;
border-color: #4fc3f7
}
.organizations-module .filter-buttons-container .btn-success {
background-color: #66bb6a;
border-color: #66bb6a
}
.organizations-module .filter-buttons-container .btn-warning {
background-color: #ffca28;
border-color: #ffca28;
color: #333
}
.organizations-module .filter-buttons-container .btn-info {
background-color: #29b6f6;
border-color: #29b6f6
}
.organizations-module .filter-pagination-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px
}
.organizations-module .filters-section {
align-items: center
}
.organizations-module .pagination-section {
display: flex;
align-items: center
}
.organizations-module .custom-pagination {
font-size: 13px
}
.organizations-module .pagination-info {
font-weight: 500
}
.organizations-module .pagination-buttons {
gap: 2px
}
.organizations-module .pagination-buttons .btn {
border-radius: 3px;
min-width: 32px
}
.organizations-module .pagination-buttons .btn-outline-secondary {
color: #6c757d;
border-color: #dee2e6;
background-color: transparent
}
.organizations-module .pagination-buttons .btn-outline-secondary:hover {
color: #495057;
background-color: #e9ecef;
border-color: #dee2e6
}
.organizations-module .pagination-buttons .btn-primary {
background-color: #4fc3f7;
border-color: #4fc3f7
}
.organizations-module .filter-pagination-container {
margin-bottom: 10px;
padding: 5px 0
}
.organizations-module .filters-section {
display: flex;
gap: 5px;
flex-wrap: wrap
}
.organizations-module .filters-section .btn-group {
display: flex;
gap: 0
}
.organizations-module .filters-section .btn {
padding: 4px 10px;
font-size: 12px;
border: 1px solid #ddd;
border-radius: 0;
transition: all .2s ease;
line-height: 1.3;
margin-left: -1px
}
.organizations-module .filters-section .btn:first-child {
border-radius: 15px 0 0 15px;
margin-left: 0
}
.organizations-module .filters-section .btn:last-child {
border-radius: 0 15px 15px 0
}
.organizations-module .filters-section .btn-default {
background-color: #f0f0f0;
color: #666;
border-color: #ddd
}
.organizations-module .filters-section .btn-default:hover {
background-color: #e0e0e0;
color: #333
}
.organizations-module .filters-section .btn-primary {
background-color: #007bff;
color: #fff;
border-color: #007bff
}
.organizations-module .filters-section .btn-success {
background-color: #28a745;
color: #fff
}
.organizations-module .filters-section .btn-warning {
background-color: #ffc107;
color: #333
}
.organizations-module .filters-section .btn-info {
background-color: #17a2b8;
color: #fff
}
.organizations-module .custom-pagination {
display: flex;
align-items: center;
gap: 8px
}
.organizations-module .pagination-info {
font-size: 13px;
color: #666;
white-space: nowrap
}
.organizations-module .pagination-buttons {
display: flex;
gap: 3px
}
.organizations-module .pagination-buttons .btn {
padding: 4px 8px;
font-size: 12px;
border: none;
border-radius: 15px;
min-width: 28px;
text-align: center;
line-height: 1.3
}
.organizations-module .pagination-buttons .btn-outline-secondary {
background-color: #f0f0f0;
color: #666;
border: none
}
.organizations-module .pagination-buttons .btn-outline-secondary:hover {
background-color: #e0e0e0;
color: #333
}
.organizations-module .pagination-buttons .btn-primary {
background-color: #007bff;
color: #fff;
border: none
}
.organizations-module .stat-icon {
right: -20px;
width: 150px;
height: 150px;
font-size: 105px
}
.organizations-module .compact-chart-card {
box-shadow: 0 2px 8px rgba(0,0,0,.1);
border: none;
border-radius: 12px;
transition: all .3s ease;
margin-bottom: 20px
}
.organizations-module .compact-chart-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0,0,0,.15)
}
.organizations-module .compact-chart-card .card-title {
font-size: 14px;
font-weight: 600;
color: #333;
margin: 0
}
.organizations-module .compact-chart-card .chart-container {
position: relative
}
.organizations-module .compact-chart-card .chart-stats {
border-top: 1px solid #f0f0f0;
padding-top: 8px;
margin-top: 8px
}
.organizations-module .compact-chart-card .chart-stats .small {
font-size: 11px;
padding: 2px 0
}
.organizations-module .compact-chart-card h4 {
font-size: 20px;
font-weight: 700
}
@media (max-width:768px) {
.organizations-module .filter-pagination-container {
flex-direction: column;
align-items: flex-start
}
.organizations-module .pagination-section {
align-self: flex-end;
margin-top: 10px
}
}
.consultant-notifications-bell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: #333;
text-decoration: none;
transition: all .3s ease;
margin-right: 10px
}
.consultant-notifications-bell:hover {
background-color: rgba(0,0,0,.05);
text-decoration: none;
color: #333
}
.consultant-notifications-bell i {
font-size: 18px
}
.consultant-unread-badge {
position: absolute;
top: 2px;
right: 2px;
background-color: #e53935;
color: #fff;
font-size: 10px;
font-weight: 600;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
animation: bellPulse 2s infinite
}
@keyframes bellPulse {
0% {
transform: scale(1)
}
50% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
.header-stats {
display: flex;
align-items: center;
gap: 2px;
margin-right: 8px;
color: #999;
font-size: 11px;
}
.hs-item {
display: flex;
align-items: center;
gap: 3px;
padding: 3px 5px;
border-radius: 4px;
cursor: default;
}
.hs-item:hover { background: rgba(0,0,0,.04); }
.hs-item i { font-size: 10px; opacity: .6; }
.hs-item span { font-weight: 400; font-size: 11px; }
.hs-online span { color: #43A047; }
.hs-dot {
width: 6px; height: 6px;
background: #43A047;
border-radius: 50%;
box-shadow: 0 0 4px rgba(67,160,71,.5);
animation: hsDotPulse 2s ease-in-out infinite;
}
@keyframes hsDotPulse {
0%, 100% { opacity: 1; }
50% { opacity: .4; }
}
@media (max-width: 992px) {
.header-stats { display: none !important; }
}
.admin-consultant-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: #333;
text-decoration: none;
transition: all .3s ease;
margin-right: 10px
}
.admin-consultant-link:hover {
background-color: rgba(0,0,0,.05);
text-decoration: none;
color: #4a89dc
}
.admin-consultant-link i {
font-size: 18px
}
.admin-consultant-badge {
position: absolute;
top: 2px;
right: 2px;
background-color: #e53935;
color: #fff;
font-size: 10px;
font-weight: 600;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
animation: bellPulse 2s infinite
}
.user-profile-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
text-decoration: none;
transition: all .3s ease;
margin-right: 15px
}
.user-profile-link:hover {
background-color: rgba(255,255,255,.1);
text-decoration: none
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255,255,255,.3);
flex-shrink: 0
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover
}
.user-name {
color: #333;
font-weight: 500;
font-size: 14px;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
@media (max-width:768px) {
.user-name {
display: none
}
.user-profile-link {
padding: 5px;
margin-right: 10px
}
.user-avatar {
width: 35px;
height: 35px
}
}
#topnav.nav-sticky .user-name {
color: #fff
}
.btn-info {
background-color: #5c6bc0!important;
border-color: #5c6bc0!important;
color: #fff!important
}
.btn-info.active,
.btn-info:active,
.btn-info:focus,
.btn-info:hover {
background-color: #3f51b5!important;
border-color: #3f51b5!important;
box-shadow: 0 2px 5px rgba(63,81,181,.3)!important;
color: #fff!important
}
/* ===========================================
Language Switcher Styles
=========================================== */
.language-switcher {
display: flex;
align-items: center;
margin-right: 15px;
position: relative;
}
.language-switcher-toggle {
display: flex;
align-items: center;
justify-content: center;
padding: 5px 8px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
font-weight: 500;
font-size: 14px;
color: var(--dark-text);
min-width: 50px;
text-align: center;
}
.language-switcher-toggle:hover {
background-color: rgba(66, 133, 244, 0.12);
transform: translateY(-2px);
}
.language-switcher-toggle i {
margin-right: 5px;
color: var(--light-text);
font-size: 16px;
}
.language-switcher-dropdown {
position: absolute;
top: 40px;
left: 0;
z-index: 1000;
min-width: 110px;
background-color: var(--bg-light);
border-radius: 8px;
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
overflow: hidden;
}
.language-switcher-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.language-option {
display: flex;
align-items: center;
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.2s;
text-decoration: none;
color: var(--dark-text);
}
.language-option:hover {
background-color: var(--bg-hover);
color: var(--primary-color);
}
.language-option.active {
background-color: var(--bg-active);
color: var(--primary-color);
font-weight: 500;
}
.language-option i {
margin-right: 8px;
font-size: 16px;
color: var(--light-text);
}
.language-option:hover i {
color: var(--primary-color);
}
.language-option.active i {
color: var(--primary-color);
}
@media (max-width: 767px) {
.language-switcher {
margin-right: 10px;
}
.language-switcher-toggle {
padding: 4px 8px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.language-switcher-toggle {
width: 32px;
height: 32px;
padding: 0;
justify-content: center;
}
.language-switcher-toggle span {
display: none;
}
.language-switcher-toggle i {
margin-right: 0;
}
}
/* ===========================================
Fix Scroll Styles
=========================================== */
html, body {
height: auto !important;
min-height: 100%;
overflow-x: hidden !important;
overflow-y: auto !important;
}
body {
position: relative !important;
padding-top: 0 !important;
}
#topnav {
position: sticky !important;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.u-body {
overflow: auto !important;
overflow-x: hidden !important;
}
.content {
overflow: visible !important;
min-height: 100vh;
margin: 0 25px;
}
body.no-scroll {
overflow: auto !important;
padding-right: 0 !important;
position: relative !important;
width: auto !important;
}
@media (max-width: 768px) {
body, html {
-webkit-overflow-scrolling: touch;
}
#topnav {
position: sticky !important;
}
}
/* ===========================================
ListView Widget Styles
=========================================== */
.list-view-widget {
position: relative;
margin-bottom: 20px;
}
.list-view-widget .btn-floating {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #4a89dc;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
transition: all 0.3s ease;
}
.list-view-widget .btn-floating:hover {
transform: scale(1.1);
background-color: #3a79cc;
}
.list-view-widget .item-list-container {
margin: 20px 0;
}
.list-view-widget .empty-state {
text-align: center;
padding: 40px 20px;
background-color: #f9f9f9;
border-radius: 8px;
margin-bottom: 20px;
}
.list-view-widget .empty-icon {
font-size: 3rem;
color: #ccc;
margin-bottom: 20px;
}
.list-view-widget .empty-title {
font-size: 1.5rem;
margin-bottom: 10px;
color: #555;
}
.list-view-widget .empty-desc {
font-size: 1rem;
color: #777;
margin-bottom: 20px;
}
.list-view-widget .pagination-container {
display: flex;
justify-content: center;
margin-top: 30px;
margin-bottom: 20px;
}
.list-view-widget .pagination-container .pagination {
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.list-view-widget .pagination-container .page-item {
margin: 0;
}
.list-view-widget .pagination-container .page-item .page-link {
position: relative;
display: block;
padding: 0.8rem 1.2rem;
line-height: 1.25;
color: #4a89dc;
background-color: #fff;
border: 1px solid #e9ecef;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.2s ease;
}
.list-view-widget .pagination-container .page-item:first-child .page-link {
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.list-view-widget .pagination-container .page-item:last-child .page-link {
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.list-view-widget .pagination-container .page-item:not(:first-child) .page-link {
margin-left: -1px;
}
.list-view-widget .pagination-container .page-item.active .page-link {
z-index: 3;
color: #fff;
background-color: #4a89dc;
border-color: #4a89dc;
}
.list-view-widget .pagination-container .page-item.disabled .page-link {
color: #adb5bd;
pointer-events: none;
background-color: #fff;
border-color: #e9ecef;
}
.list-view-widget .pagination-container .page-item.ellipsis .page-link {
color: #6c757d;
}
.list-view-widget .pagination-container .page-link:hover {
z-index: 2;
color: #0056b3;
text-decoration: none;
background-color: #f8f9fa;
border-color: #dee2e6;
}
.list-view-widget .pagination-container .page-link:focus {
z-index: 3;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(74, 137, 220, 0.25);
}
.list-view-widget .list-item {
display: flex;
align-items: center;
padding: 5px !important;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 0;
transition: all 0.2s ease;
}
.list-view-widget .list-item:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.list-view-widget .item-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
flex-shrink: 0;
}
.list-view-widget .item-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.list-view-widget .item-info {
flex: 1;
}
.list-view-widget .item-title {
font-size: 1.1rem;
margin-bottom: 5px;
color: #333;
}
.list-view-widget .item-details {
font-size: 0.9rem;
color: #777;
}
.list-view-widget .item-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 5px;
}
.list-view-widget .item-meta-item {
display: flex;
align-items: center;
color: #666;
}
.list-view-widget .item-meta-item i {
margin-right: 5px;
color: #aaa;
}
.list-view-widget .list-item:nth-child(1) { animation-delay: 0.05s; }
.list-view-widget .list-item:nth-child(2) { animation-delay: 0.1s; }
.list-view-widget .list-item:nth-child(3) { animation-delay: 0.15s; }
.list-view-widget .list-item:nth-child(4) { animation-delay: 0.2s; }
.list-view-widget .list-item:nth-child(5) { animation-delay: 0.25s; }
.list-view-widget .list-item:nth-child(6) { animation-delay: 0.3s; }
.list-view-widget .list-item:nth-child(7) { animation-delay: 0.35s; }
.list-view-widget .list-item:nth-child(8) { animation-delay: 0.4s; }
.list-view-widget .list-item:nth-child(9) { animation-delay: 0.45s; }
.list-view-widget .list-item:nth-child(10) { animation-delay: 0.5s; }
.list-view-widget .list-item:nth-child(11) { animation-delay: 0.55s; }
.list-view-widget .list-item:nth-child(12) { animation-delay: 0.6s; }
.list-view-widget .list-item:nth-child(13) { animation-delay: 0.65s; }
.list-view-widget .list-item:nth-child(14) { animation-delay: 0.7s; }
.list-view-widget .list-item:nth-child(15) { animation-delay: 0.75s; }
.list-view-widget .list-item:nth-child(16) { animation-delay: 0.8s; }
.list-view-widget .list-item:nth-child(17) { animation-delay: 0.85s; }
.list-view-widget .list-item:nth-child(18) { animation-delay: 0.9s; }
.list-view-widget .list-item:nth-child(19) { animation-delay: 0.95s; }
.list-view-widget .list-item:nth-child(20) { animation-delay: 1s; }
.list-item {
display: flex;
align-items: center;
padding: 15px;
border-radius: 8px;
background-color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
transition: all 0.2s ease;
}
.list-item:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.item-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
flex-shrink: 0;
}
.item-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.item-info {
flex: 1;
}
.item-title {
font-size: 1.1rem;
margin-bottom: 5px;
font-weight: 500;
}
.item-title a {
color: #333;
text-decoration: none;
}
.item-title a:hover {
color: #4a89dc;
}
.item-details {
font-size: 0.9rem;
color: #777;
}
.item-label {
display: inline-block;
background-color: #f0f0f0;
color: #666;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.8rem;
margin-bottom: 8px;
line-height: 20px;
}
.item-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 5px;
}
.item-meta-field {
display: flex;
align-items: center;
color: #666;
}
.item-meta-field i {
margin-right: 5px;
color: #aaa;
}
.item-actions {
display: flex;
justify-content: flex-end;
margin-left: 10px;
}
.item-left {
display: flex;
flex: 1;
}
.item-indicator-blue {
border-left: 3px solid #4285F4;
}
.item-indicator-red {
border-left: 3px solid #E91E63;
}
.item-indicator-green {
border-left: 3px solid #34A853;
}
.item-indicator-yellow {
border-left: 3px solid #FBBC05;
}
.item-indicator-purple {
border-left: 3px solid #673AB7;
}
.item-indicator-orange {
border-left: 3px solid #FF9800;
}
.reports-index .status-badge, .reports-index .progress-percent {
padding: 0 8px;
}
/* ===========================================
Users List Styles
=========================================== */
.filter-search-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 15px;
}
.filter-search-row .combined-filters {
flex: 1;
margin-bottom: 0;
}
.filter-search-row .search-box {
width: 300px;
}
.combined-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
}
.combined-filters .filter-btn {
display: inline-flex;
align-items: center;
font-weight: 500;
color: #4a5568;
cursor: pointer;
background-color: #fdfbfb;
border: none;
border-radius: 1rem;
padding: 6px 12px;
font-size: 0.875rem;
transition: all 0.2s ease;
}
.combined-filters .filter-btn:hover {
background-color: #edf2f7;
border-color: #cbd5e0;
}
.combined-filters .filter-btn.active {
background-color: rgba(22, 163, 74, 0.1);
border-color: rgba(22, 163, 74, 0.2);
color: #16a34a;
font-weight: 600;
}
.combined-filters .filter-btn .count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background-color: rgba(0, 0, 0, 0.08);
color: #4a5568;
font-size: 11px;
border-radius: 11px;
margin-left: 8px;
font-weight: 500;
}
.combined-filters .filter-btn.active .count {
background-color: #16a34a;
color: white;
}
@media (max-width: 768px) {
.combined-filters {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 10px;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.combined-filters::-webkit-scrollbar {
height: 4px;
}
.combined-filters::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 2px;
}
.combined-filters::-webkit-scrollbar-thumb {
background: #cbd5e0;
border-radius: 2px;
}
.combined-filters .filter-btn {
white-space: nowrap;
flex-shrink: 0;
}
.filter-search-row {
flex-direction: column;
align-items: stretch;
}
.filter-search-row .search-box {
width: 100%;
}
}
.user-list .list-item {
display: flex;
align-items: flex-start;
padding: 8px;
border-radius: 12px;
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
margin-bottom: 18px;
transition: all 0.3s ease;
border-left: 3px solid #16a34a;
}
.user-list .list-item:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
transform: translateY(-3px);
}
.user-list .item-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 20px;
flex-shrink: 0;
border: 3px solid rgba(241, 245, 249, 0.8);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.user-list .list-item:hover .item-avatar {
border-color: rgba(22, 163, 74, 0.3);
}
.user-list .item-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-list .item-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.user-list .item-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.user-list .first-row {
border-bottom: 1px dashed rgba(229, 231, 235, 0.5);
flex-wrap: nowrap;
overflow-x: auto;
}
.user-list .item-cell {
margin-right: 15px;
flex-shrink: 0;
}
.user-list .login-cell {
min-width: 150px;
}
.user-list .user-login {
font-size: 1.1rem;
font-weight: 600;
color: #2d3748;
text-decoration: none;
transition: color 0.2s ease;
display: block;
}
.user-list .user-login:hover {
color: #16a34a;
}
.user-list .user-name {
font-size: 0.85rem;
color: #718096;
margin-top: 2px;
}
.user-list .org-cell {
min-width: 180px;
max-width: 200px;
}
.user-list .org-cell a {
color: #3182ce;
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.user-list .org-cell a:hover {
color: #16a34a;
}
.user-list .org-type-cell {
min-width: 120px;
}
.user-list .org-type {
display: inline-block;
padding: 4px 8px;
background-color: rgba(56, 189, 248, 0.1);
color: #0369a1;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
}
.user-list .role-cell {
min-width: 140px;
max-width: 300px;
overflow: visible;
}
.user-list .role-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.user-list .role-badge {
display: inline-flex;
align-items: center;
padding: 4px 8px;
background-color: rgba(56, 178, 172, 0.1);
color: #2b6cb0;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
transition: all 0.2s ease;
}
.user-list .role-badge:hover {
background-color: rgba(56, 178, 172, 0.2);
transform: translateY(-2px);
}
.user-list .role-badge i {
margin-right: 4px;
font-size: 11px;
}
.user-list .role-badge.role-none {
background-color: rgba(203, 213, 224, 0.2);
color: #718096;
font-style: italic;
}
.user-list .second-row {
color: #64748b;
font-size: 0.9rem;
}
.user-list .last-visit-wrapper {
display: flex;
align-items: center;
gap: 6px;
}
.user-list .last-visit-label {
font-weight: 500;
}
.user-list .last-visit-time {
color: #4a5568;
}
.user-list .item-organization a {
color: #2c5282;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
}
.user-list .item-organization a:hover {
color: #16a34a;
transform: translateX(2px);
}
.user-list .organization-type-badge {
display: inline-block;
padding: 4px 8px;
background-color: rgba(56, 189, 248, 0.1);
color: #0369a1;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
margin-top: 4px;
}
.user-list .item-actions {
margin-left: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.btn-floating {
position: fixed;
right: 30px;
bottom: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #16a34a, #15803d);
color: white !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 4px 15px rgba(22, 163, 74, 0.3);
transition: all 0.3s ease;
z-index: 9999;
text-decoration: none !important;
}
.btn-floating:hover {
transform: scale(1.1) rotate(90deg);
background: linear-gradient(135deg, #15803d, #166534);
box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);
color: white !important;
text-decoration: none !important;
}
.user-list .item-status {
flex-shrink: 0;
}
.user-list .last-visit-date {
font-weight: 500;
color: #2d3748;
}
.user-list .last-visit-time {
font-size: 0.85rem;
color: #94a3b8;
}
.user-list .empty-results {
text-align: center;
padding: 40px 20px;
background-color: #f8fafc;
border-radius: 10px;
border: 1px dashed #e2e8f0;
margin: 20px 0;
}
.user-list .empty-results i {
font-size: 40px;
color: #94a3b8;
margin-bottom: 15px;
display: block;
}
.user-list .empty-results p {
color: #64748b;
font-size: 18px;
margin: 0;
}
.search-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #a0aec0;
}
@media (max-width: 992px) {
.user-list .first-row {
padding-right: 10px;
}
.user-list .item-cell {
margin-right: 10px;
}
}
@media (max-width: 768px) {
/* Users page mobile - statistics */
.module-users .stats-container {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 8px;
padding-bottom: 8px;
}
.module-users .stats-container .stat-card {
min-width: 100px;
max-width: 120px;
flex-shrink: 0;
padding: 10px 8px;
}
.module-users .stats-container .stat-card .stat-value {
font-size: 18px;
}
.module-users .stats-container .stat-card .stat-label {
font-size: 10px;
}
.module-users .stats-container .stat-card .stat-icon {
width: 28px;
height: 28px;
}
.module-users .stats-container .stat-card .stat-icon .icon-image {
width: 20px;
height: 20px;
}
/* Filter row mobile */
.module-users .filter-search-row {
flex-direction: column;
gap: 10px;
}
.module-users .filter-search-row .combined-filters {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 5px;
}
.module-users .filter-search-row .filter-buttons {
flex-wrap: nowrap;
width: max-content;
}
.module-users .filter-search-row .search-box {
width: 100%;
}
/* User list items mobile */
.module-users .user-list {
display: block !important;
}
.module-users .user-list .list-item {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
padding: 10px !important;
gap: 8px;
position: relative;
margin-bottom: 8px;
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.module-users .user-list .item-avatar {
width: 45px;
height: 45px;
flex-shrink: 0;
}
.module-users .user-list .item-avatar img {
width: 45px;
height: 45px;
border-radius: 50%;
}
.module-users .user-list .item-info {
flex: 1;
min-width: 0;
padding-right: 40px;
}
.module-users .user-list .first-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.module-users .user-list .item-cell {
margin-right: 0;
}
.module-users .user-list .login-cell .user-login {
font-size: 14px;
font-weight: 600;
}
.module-users .user-list .login-cell .user-name {
font-size: 11px;
color: #666;
}
.module-users .user-list .org-type-cell {
display: none;
}
.module-users .user-list .org-cell .org-name {
font-size: 11px;
}
.module-users .user-list .status-cell .status-badge {
font-size: 10px;
padding: 2px 6px;
}
.module-users .user-list .role-cell .role-badge {
font-size: 9px;
padding: 1px 5px;
}
.module-users .user-list .item-actions {
position: absolute;
top: 10px;
right: 10px;
margin: 0;
}
.module-users .user-list .item-actions .rec-actions {
gap: 4px;
}
.module-users .user-list .item-actions .action-btn {
width: 28px;
height: 28px;
font-size: 12px;
}
.module-users .user-list .second-row {
margin-top: 4px;
font-size: 10px;
}
}
@media (max-width: 480px) {
/* Extra small screens */
.module-users .stats-container .stat-card {
min-width: 85px;
max-width: 100px;
padding: 8px 6px;
}
.module-users .stats-container .stat-card .stat-value {
font-size: 16px;
}
.module-users .stats-container .stat-card .stat-label {
font-size: 9px;
}
.module-users .user-list .item-avatar {
width: 38px;
height: 38px;
}
.module-users .user-list .item-avatar img {
width: 38px;
height: 38px;
}
.module-users .user-list .login-cell .user-login {
font-size: 13px;
}
.module-users .user-list .role-cell {
display: none;
}
.filter-btn {
font-size: 11px;
padding: 3px 8px;
}
.filter-btn .count {
font-size: 9px;
padding: 1px 4px;
}
}
/* ===========================================
HR Employee Index Base Styles
=========================================== */
/* Stats container for HR */
.employee-index .stats-container {
display: flex;
flex-wrap: nowrap;
gap: 15px;
margin-bottom: 20px;
}
.employee-index .stats-container .stat-card {
flex: 1 1 0;
min-width: 0;
background: #fff;
border-radius: 12px;
padding: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
position: relative;
overflow: hidden;
text-align: center;
transition: all 0.2s ease;
}
.employee-index .stats-container .stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.employee-index .stats-container .stat-value {
font-size: 2rem;
font-weight: 700;
color: #283252;
margin-bottom: 5px;
}
.employee-index .stats-container .stat-label {
font-size: 12px;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.employee-index .stats-container .stat-icon {
position: absolute;
right: -30px;
top: -20px;
width: 152px;
height: 152px;
display: flex;
align-items: center;
justify-content: center;
}
.employee-index .stats-container .stat-icon .icon-image {
width: 152px;
height: 152px;
}
.employee-index .stats-container .stat-card .progress-thin {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: #f0f0f0;
}
.employee-index .stats-container .stat-card .progress-thin .progress-bar {
height: 100%;
transition: width 0.5s ease;
}
/* Search box for HR */
.employee-index .server-search-form {
margin-bottom: 15px;
}
.employee-index .search-box {
position: relative;
}
.employee-index .search-box .search-input {
width: 100%;
padding: 12px 45px 12px 40px;
border: 1px solid #e0e0e0;
border-radius: 25px;
font-size: 14px;
transition: all 0.3s ease;
background: #fff;
}
.employee-index .search-box .search-input:focus {
border-color: #4a89dc;
box-shadow: 0 0 0 3px rgba(74, 137, 220, 0.15);
outline: none;
}
.employee-index .search-box .search-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
z-index: 5;
}
.employee-index .search-box .search-clear-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #999;
font-size: 14px;
cursor: pointer;
padding: 5px;
border-radius: 50%;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.employee-index .search-box .search-clear-btn:hover {
color: #666;
background: #f0f0f0;
}
/* ===========================================
HR Employee Index Mobile Styles
=========================================== */
@media (max-width: 768px) {
/* HR page - tabs */
.employee-index .umc-period-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
}
.employee-index .umc-period-tab {
white-space: nowrap;
font-size: 13px;
padding: 6px 12px;
}
/* HR page - statistics */
.employee-index .stats-container {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px;
}
.employee-index .stats-container .stat-card {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
padding: 5px 6px 4px;
min-height: auto;
max-height: 98px;
}
.employee-index .stats-container .stat-value {
font-size: 26px;
}
.employee-index .stats-container .stat-label {
font-size: 10px;
}
.employee-index .stats-container .stat-icon {
width: 96px;
height: 96px;
right: -20%;
top: -20%;
}
.employee-index .stats-container .stat-icon .icon-image {
width: 96px;
height: 96px;
}
/* HR page - search */
.employee-index .server-search-form {
margin-bottom: 10px;
}
.employee-index .search-box {
width: 100%;
}
/* HR page - filters */
.employee-index .filter-buttons {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
padding-bottom: 5px;
margin: 10px 0;
}
/* HR page - employee list items */
.employee-index .item-list-container {
margin: 8px 0;
}
.employee-index .list-item {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
padding: 8px 10px !important;
gap: 10px;
position: relative;
margin-bottom: 6px !important;
}
.employee-index .employee-number {
display: none;
}
.employee-index .item-avatar {
width: 40px;
height: 40px;
flex-shrink: 0;
margin-left: 0 !important;
margin-right: 0 !important;
}
.employee-index .item-avatar img {
width: 40px;
height: 40px;
}
.employee-index .item-info {
flex: 1;
min-width: 0;
padding-right: 55px;
}
.employee-index .item-title {
margin-bottom: 2px !important;
}
.employee-index .item-title a {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.employee-index .item-details-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
margin-top: 2px;
}
.employee-index .item-label {
font-size: 10px;
padding: 1px 6px;
background: #e8f4fd;
color: #1976d2;
}
.employee-index .employee-groups {
font-size: 10px;
color: #666;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
margin-top: 0 !important;
}
.employee-index .employee-groups .fa-users {
font-size: 9px;
flex-shrink: 0;
}
.employee-index .employee-group-link {
font-size: 10px;
}
.employee-index .employee-groups br {
display: none;
}
/* Hide all meta fields on mobile */
.employee-index .item-meta-field {
display: none !important;
}
.employee-index .badge {
display: none !important;
}
.employee-index .item-actions {
position: absolute;
top: 8px;
right: 10px;
}
.employee-index .item-actions .rec-actions {
gap: 3px;
}
.employee-index .item-actions .action-btn {
width: 24px;
height: 24px;
font-size: 10px;
}
/* Content margin mobile */
.content {
margin: 0 14px !important;
}
/* Gender selection - centered on mobile */
.field-employee-gender,
.gender-avatars-wrapper,
.gender-avatars,
.radio-card-group {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
gap: 20px !important;
}
.field-employee-gender {
flex-direction: column !important;
}
.field-employee-gender > label {
text-align: center !important;
width: 100% !important;
}
.radio-card {
min-width: auto !important;
margin: 0 !important;
}
.gender-avatar,
.gender-avatar img {
width: 90px !important;
height: 90px !important;
}
.gender-description {
text-align: center !important;
width: 100% !important;
margin-top: 15px !important;
}
/* Simple breadcrumbs - full width block */
.simple-breadcrumbs {
display: flex !important;
flex-wrap: wrap;
width: 100% !important;
margin-bottom: 10px !important;
font-size: 11px !important;
}
/* Employee view page - buttons on separate row */
.employee-default-view .d-flex.justify-content-end.mb-2 {
display: flex !important;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px !important;
margin-bottom: 12px !important;
width: 100%;
background: #f9f9f9;
padding: 8px;
border-radius: 8px;
}
.employee-default-view .action-btn {
width: 34px;
height: 34px;
font-size: 14px;
}
.employee-default-view .rec-actions {
margin-top: 30px !important;
}
/* ===========================================
Groups Module Mobile Styles
=========================================== */
/* Groups stats container - uses universal styles below */
/* Groups - compact list like employees */
.groups-module .group-item,
.group-index .group-item {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
padding: 8px 10px !important;
gap: 8px;
position: relative !important;
margin-bottom: 6px !important;
}
/* Group number */
.groups-module .group-number,
.group-index .group-number {
flex-shrink: 0;
order: 1;
}
.groups-module .number-badge,
.group-index .number-badge {
width: 20px;
height: 20px;
font-size: 10px;
}
/* Group details - main info */
.groups-module .group-details,
.group-index .group-details {
flex: 1;
min-width: 0;
padding-right: 60px;
order: 2;
}
.groups-module .group-details h5,
.group-index .group-details h5 {
font-size: 14px;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.groups-module .group-name-link,
.group-index .group-name-link {
font-weight: 600;
}
.groups-module .category-badge,
.group-index .category-badge {
font-size: 8px;
padding: 1px 5px;
vertical-align: middle;
}
/* Hide language and type badges */
.groups-module .language-badge,
.group-index .language-badge,
.groups-module .type-badge,
.group-index .type-badge {
display: none !important;
}
/* Teacher info - one line */
.groups-module .group-details p,
.group-index .group-details p {
font-size: 11px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.groups-module .teacher-avatar,
.group-index .teacher-avatar {
width: 16px;
height: 16px;
font-size: 7px;
}
/* Hide extra info */
.groups-module .group-details .text-muted,
.group-index .group-details .text-muted {
display: none !important;
}
/* Hide progress bar on mobile */
.groups-module .progress-thin,
.group-index .progress-thin {
display: none;
}
/* Hide children count block */
.groups-module .group-children,
.group-index .group-children {
display: none !important;
}
/* Actions - absolute right */
.group-item.searchable-item > .group-actions,
.group-item.searchable-item > .child-item-right,
.group-item > .group-actions.ml-2,
.group-item > .ml-2.child-item-right {
position: absolute !important;
right: 10px !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
margin-left: 0 !important;
padding: 0 !important;
}
.group-item .rec-actions,
.group-item .group-actions .rec-actions {
display: flex !important;
flex-direction: row !important;
gap: 4px !important;
position: absolute !important;
right: -10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
}
.groups-module .action-btn,
.group-index .action-btn {
width: 26px;
height: 26px;
font-size: 11px;
}
/* Hide ribbon on mobile */
.groups-module .ribbon,
.group-index .ribbon {
display: none;
}
/* Groups - charts */
.groups-module .chart-container,
.group-index .chart-container {
height: 180px;
}
.groups-module .card-header,
.group-index .card-header {
padding: 10px 12px;
font-size: 13px;
}
.groups-module .card-body,
.group-index .card-body {
padding: 10px;
}
/* Groups - floating button */
.groups-module .btn-floating,
.group-index .btn-floating {
bottom: 90px !important;
right: 20px !important;
width: 50px !important;
height: 50px !important;
}
.groups-module .btn-floating i,
.group-index .btn-floating i {
font-size: 20px;
}
/* Groups - search */
.groups-module .search-box,
.group-index .search-box {
margin-bottom: 10px;
}
.groups-module .search-input,
.group-index .search-input {
font-size: 13px;
padding: 10px 40px;
}
/* ===========================================
Group View Page Mobile Styles
=========================================== */
/* Header with title and buttons */
.group-view .d-flex.justify-content-between {
flex-direction: column;
gap: 10px;
align-items: flex-start !important;
}
.group-view .d-flex.justify-content-between h1 {
font-size: 18px !important;
}
.group-view .d-flex.justify-content-between .rec-actions {
position: static !important;
display: flex;
gap: 6px;
}
/* Tabs */
.group-view .umc-period-tabs {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.group-view .umc-period-tab {
font-size: 12px;
padding: 8px 12px;
white-space: nowrap;
}
.group-view .tab-badge {
font-size: 10px;
padding: 2px 5px;
}
/* Group details - info cards */
#tab-info {
margin-top: 0 !important;
padding-top: 0 !important;
}
.group-details {
margin-top: 0 !important;
padding-top: 0 !important;
}
.group-details .row {
flex-direction: column;
}
.group-details .col-md-8,
.group-details .col-md-4 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
padding: 0 !important;
margin-bottom: 15px;
}
.group-details .info-card {
margin-bottom: 15px;
padding: 12px;
}
.group-details .section-header {
padding: 10px 12px;
margin-top: 0 !important;
}
.group-details .header-title {
font-size: 14px;
}
.group-details .card-subtitle {
font-size: 11px;
padding: 0 12px 10px;
}
.group-details .info-body {
padding: 0;
}
.group-details .info-body .table th,
.group-details .info-body .table td {
font-size: 12px;
padding: 8px;
}
.group-details .info-body .table th {
width: 35%;
}
/* Teacher info compact */
.group-details .teacher-info {
margin-bottom: 6px !important;
}
.group-details .avatar-circle {
width: 30px;
height: 30px;
font-size: 10px;
}
.group-details .teacher-name {
font-size: 12px;
}
.group-details .teacher-position {
font-size: 10px;
}
/* Gender stats */
.group-details .gender-stats {
flex-direction: row !important;
gap: 8px;
}
.group-details .gender-stat {
padding: 10px;
}
.group-details .gender-value {
font-size: 22px;
}
.group-details .gender-label {
font-size: 11px;
}
.group-details .gender-bg-avatar {
width: 50px;
height: 50px;
}
/* Age table */
.group-details .age-table-container {
overflow-x: auto;
}
.group-details .age-table {
min-width: 300px;
}
.group-details .age-table th,
.group-details .age-table td {
font-size: 11px;
padding: 6px 8px;
}
/* Sidebar card */
.group-details .sidebar-card {
margin-bottom: 15px;
padding: 12px;
}
.group-details .group-logo {
width: 80px;
height: 80px;
}
.group-details .quick-stats .stat-item {
padding: 8px;
}
.group-details .quick-stats .stat-value {
font-size: 18px;
}
.group-details .quick-stats .stat-label {
font-size: 10px;
}
/* ===========================================
Children List Tab Mobile Styles
=========================================== */
#tab-children {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ===========================================
Universal Stats Container Mobile Styles
(same as employee-index)
=========================================== */
.children-list .stats-container,
#tab-children .stats-container,
.group-view .stats-container,
.tab-consultations .stats-container,
.consultations-statistics .stats-container,
.profile-module .stats-container,
#tab-consultations .stats-container,
.consultations-statistics,
.organizations-module .stats-container,
.organization-index .stats-container,
.statistics-widget-wrapper .stats-container {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px;
margin-bottom: 10px;
}
/* Hide stats on groups list page (mobile) */
.groups-module .stats-container,
.group-index .stats-container {
display: none !important;
}
.consultations-statistics .stat-card {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
padding: 5px 6px 4px !important;
min-height: auto !important;
max-height: 98px !important;
position: relative !important;
overflow: hidden !important;
}
.consultations-statistics .stat-value {
font-size: 26px !important;
font-weight: 700 !important;
}
.consultations-statistics .stat-label {
font-size: 10px !important;
}
.consultations-statistics .stat-icon {
position: absolute !important;
width: 96px !important;
height: 96px !important;
right: -20% !important;
top: -20% !important;
}
.consultations-statistics .stat-icon .icon-image {
width: 96px !important;
height: 96px !important;
}
/* Hide first stat card (Всего консультаций) on mobile */
.consultations-statistics .stat-row > .col-6:first-child,
.consultations-statistics .stat-row > .col-md-3:first-child,
.consultations-statistics .stats-container > .stat-card:first-child {
display: none !important;
}
/* Consultations statistics - row layout like employees */
.consultations-statistics .stats-container {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
}
.consultations-statistics .stats-container .stat-card {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
padding: 5px 6px 4px !important;
max-height: 98px !important;
}
/* Row/col structure override */
.consultations-statistics .row.stat-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
margin: 0 !important;
width: 100% !important;
}
.consultations-statistics .row.stat-row > [class*="col-"] {
flex: 1 1 0 !important;
width: 0 !important;
min-width: 0 !important;
max-width: none !important;
padding: 0 !important;
}
.consultations-statistics .row.stat-row > [class*="col-"]:first-child {
display: none !important;
flex: 0 !important;
width: 0 !important;
}
.consultations-statistics .row.stat-row .stat-card {
padding: 5px 6px 4px !important;
max-height: 98px !important;
height: 100% !important;
}
.consultations-statistics .row.stat-row .stat-value {
font-size: 26px !important;
font-weight: 700 !important;
}
.consultations-statistics .row.stat-row .stat-label {
font-size: 10px !important;
}
.consultations-statistics .row.stat-row .stat-icon {
position: absolute !important;
width: 96px !important;
height: 96px !important;
right: -20% !important;
top: -20% !important;
}
.consultations-statistics .row.stat-row .stat-icon img {
width: 96px !important;
height: 96px !important;
}
.children-list .stats-container .stat-card,
#tab-children .stats-container .stat-card,
.groups-module .stats-container .stat-card,
.group-index .stats-container .stat-card,
.group-view .stats-container .stat-card,
.tab-consultations .stats-container .stat-card,
.consultations-statistics .stats-container .stat-card,
.profile-module .stats-container .stat-card,
.organizations-module .stats-container .stat-card,
.organization-index .stats-container .stat-card,
.statistics-widget-wrapper .stats-container .stat-card,
#tab-consultations .stats-container .stat-card {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
padding: 5px 6px 4px;
min-height: auto;
max-height: 98px;
position: relative;
overflow: hidden;
}
.children-list .stats-container .stat-value,
#tab-children .stats-container .stat-value,
.groups-module .stats-container .stat-value,
.group-index .stats-container .stat-value,
.group-view .stats-container .stat-value,
.tab-consultations .stats-container .stat-value,
.consultations-statistics .stats-container .stat-value,
.profile-module .stats-container .stat-value,
#tab-consultations .stats-container .stat-value,
.organizations-module .stats-container .stat-value,
.organization-index .stats-container .stat-value,
.statistics-widget-wrapper .stats-container .stat-value {
font-size: 26px;
font-weight: 700;
}
.children-list .stats-container .stat-label,
#tab-children .stats-container .stat-label,
.groups-module .stats-container .stat-label,
.group-index .stats-container .stat-label,
.group-view .stats-container .stat-label,
.tab-consultations .stats-container .stat-label,
.consultations-statistics .stats-container .stat-label,
.profile-module .stats-container .stat-label,
#tab-consultations .stats-container .stat-label,
.organizations-module .stats-container .stat-label,
.organization-index .stats-container .stat-label,
.statistics-widget-wrapper .stats-container .stat-label {
font-size: 10px;
}
.children-list .stats-container .stat-icon,
#tab-children .stats-container .stat-icon,
.groups-module .stats-container .stat-icon,
.group-index .stats-container .stat-icon,
.group-view .stats-container .stat-icon,
.tab-consultations .stats-container .stat-icon,
.consultations-statistics .stats-container .stat-icon,
.profile-module .stats-container .stat-icon,
#tab-consultations .stats-container .stat-icon,
.organizations-module .stats-container .stat-icon,
.organization-index .stats-container .stat-icon,
.statistics-widget-wrapper .stats-container .stat-icon {
position: absolute;
width: 96px;
height: 96px;
right: -20%;
top: -20%;
}
.children-list .stats-container .stat-icon .icon-image,
#tab-children .stats-container .stat-icon .icon-image,
.groups-module .stats-container .stat-icon .icon-image,
.group-index .stats-container .stat-icon .icon-image,
.group-view .stats-container .stat-icon .icon-image,
.tab-consultations .stats-container .stat-icon .icon-image,
.consultations-statistics .stats-container .stat-icon .icon-image,
.profile-module .stats-container .stat-icon .icon-image,
#tab-consultations .stats-container .stat-icon .icon-image,
.organizations-module .stats-container .stat-icon .icon-image,
.organization-index .stats-container .stat-icon .icon-image,
.statistics-widget-wrapper .stats-container .stat-icon .icon-image {
width: 96px;
height: 96px;
}
/* Organization module - icon with font-awesome */
.organizations-module .stats-container .stat-icon i,
.organization-index .stats-container .stat-icon i,
.statistics-widget-wrapper .stats-container .stat-icon i {
font-size: 70px !important;
opacity: 0.15;
}
/* Organization floating button */
.organizations-module .btn-floating,
.organizations-module .org-floating-btn {
bottom: 90px !important;
right: 20px !important;
width: 50px !important;
height: 50px !important;
}
/* Organization list card - no margin */
.organizations-module .organizations-list-card,
.organization-index .organizations-list-card {
margin: 0 !important;
}
.organizations-module .card-body,
.organization-index .card-body {
padding: 5px !important;
}
/* Organization view - stat cards horizontal */
.organization-view .org-stats,
.organizations-module .org-stats {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
margin-bottom: 10px !important;
}
.organization-view .org-stats .stat-card,
.organizations-module .org-stats .stat-card {
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 8px 6px !important;
max-height: 98px !important;
}
.organization-view .org-stats .stat-card h4,
.organizations-module .org-stats .stat-card h4 {
font-size: 10px !important;
margin-bottom: 4px !important;
}
.organization-view .org-stats .stat-card p,
.organizations-module .org-stats .stat-card p {
font-size: 26px !important;
font-weight: 700 !important;
margin: 0 !important;
}
/* Organization form - no padding */
.organization-form .box-body {
padding: 0 !important;
}
/* ===========================================
Reports Module Mobile Styles
=========================================== */
.reports-index {
padding: 0 !important;
}
/* Reports tabs */
.reports-index .umc-period-tabs {
overflow-x: auto;
flex-wrap: nowrap !important;
gap: 5px;
padding-bottom: 5px;
-webkit-overflow-scrolling: touch;
}
.reports-index .umc-period-tab {
white-space: nowrap;
font-size: 12px;
padding: 6px 12px;
}
/* Reports statistics - horizontal */
.reports-index .statistics-cards,
.reports-index .statistics-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
margin-bottom: 10px !important;
}
.reports-index .statistics-row .stat-card {
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 8px 6px !important;
max-height: 98px !important;
flex-direction: column !important;
}
.reports-index .statistics-row .stat-icon {
width: 32px !important;
height: 32px !important;
margin-bottom: 4px !important;
margin-right: 0 !important;
}
.reports-index .statistics-row .stat-icon i {
font-size: 14px !important;
}
.reports-index .statistics-row .stat-content {
text-align: center;
}
.reports-index .statistics-row .stat-value {
font-size: 18px !important;
font-weight: 700 !important;
}
.reports-index .statistics-row .stat-label {
font-size: 9px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Reports card */
.reports-index .card {
margin: 0 !important;
}
.reports-index .card-body {
padding: 8px !important;
}
/* Reports search and filters */
.reports-index .list-view-controls {
flex-direction: column;
gap: 8px;
}
.reports-index .search-box {
width: 100%;
}
.reports-index .search-box input {
font-size: 13px;
}
.reports-index .filter-buttons {
overflow-x: auto;
flex-wrap: nowrap !important;
gap: 6px;
padding-bottom: 5px;
-webkit-overflow-scrolling: touch;
}
.reports-index .filter-btn {
white-space: nowrap;
font-size: 11px;
padding: 5px 10px;
}
/* Reports list items */
.reports-index .report-item,
.reports-index .list-item {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
padding: 8px 10px !important;
margin-bottom: 6px !important;
gap: 8px !important;
}
.reports-index .report-number {
flex-shrink: 0 !important;
}
.reports-index .report-number .number-badge,
.reports-index .list-item .number-badge {
width: 20px;
height: 20px;
font-size: 10px;
}
.reports-index .item-avatar,
.reports-index .list-item .item-avatar {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
flex-shrink: 0 !important;
}
.reports-index .report-icon {
width: 36px !important;
height: 36px !important;
}
.reports-index .item-info,
.reports-index .list-item .item-info {
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
}
.reports-index .item-header,
.reports-index .list-item .item-header {
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
}
.reports-index .item-title,
.reports-index .list-item .item-title {
font-size: 13px !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 4px !important;
}
.reports-index .item-title a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
/* Category indicators compact */
.reports-index .category-indicator {
width: 18px !important;
height: 18px !important;
font-size: 8px !important;
}
/* Item info compact row */
.reports-index .item-info-compact {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
font-size: 11px !important;
}
.reports-index .fill-status {
font-size: 11px !important;
}
.reports-index .progress-percent {
font-size: 11px !important;
}
.reports-index .status-badge {
font-size: 9px !important;
padding: 2px 6px !important;
}
/* Hide detailed meta on mobile */
.reports-index .item-compact-details {
display: none !important;
}
#reports-app .item-info-compact {
margin: 0 !important;
}
#reports-app .item-avatar {
margin: 0 !important;
}
/* Report actions inline */
.reports-index .report-actions {
display: flex !important;
flex-direction: row !important;
gap: 4px !important;
margin-left: auto !important;
}
.reports-index .report-actions .action-btn {
width: 26px !important;
height: 26px !important;
font-size: 11px !important;
}
/* Admin panel - horizontal */
.reports-index .admin-panel {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
}
.reports-index .admin-panel .admin-card {
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 10px !important;
}
.reports-index .admin-panel .admin-card-icon {
font-size: 18px !important;
}
.reports-index .admin-panel .admin-card-title {
font-size: 11px !important;
}
.reports-index .admin-panel .admin-card-desc {
display: none !important;
}
/* Reports floating button */
.reports-index .btn-floating,
.reports-permissions .btn-floating {
bottom: 90px !important;
right: 20px !important;
width: 50px !important;
height: 50px !important;
}
/* ===========================================
Reports Permissions Mobile Styles
=========================================== */
.reports-permissions {
padding: 0 !important;
}
/* Permissions stats - horizontal */
.reports-permissions .stats-container {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
margin-bottom: 10px !important;
}
.reports-permissions .stats-container .stat-card {
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 8px 6px !important;
max-height: 98px !important;
}
.reports-permissions .stats-container .stat-value {
font-size: 26px !important;
font-weight: 700 !important;
}
.reports-permissions .stats-container .stat-label {
font-size: 10px !important;
}
.reports-permissions .stats-container .stat-icon {
position: absolute !important;
width: 96px !important;
height: 96px !important;
right: -20% !important;
top: -20% !important;
}
.reports-permissions .stats-container .stat-icon i {
font-size: 70px !important;
opacity: 0.15;
}
/* Info panel compact */
.reports-permissions .info-panel {
padding: 10px !important;
margin-bottom: 10px !important;
}
.reports-permissions .info-panel-header {
font-size: 13px !important;
}
.reports-permissions .info-list {
font-size: 11px !important;
}
.reports-permissions .info-list li {
margin-bottom: 4px !important;
}
/* Search box */
.reports-permissions .search-box {
margin-bottom: 10px !important;
}
.reports-permissions .search-box input {
font-size: 13px !important;
}
/* Filter buttons - horizontal scroll */
.reports-permissions .filter-buttons {
overflow-x: auto !important;
flex-wrap: nowrap !important;
gap: 6px !important;
padding-bottom: 5px !important;
-webkit-overflow-scrolling: touch;
}
.reports-permissions .filter-btn {
white-space: nowrap !important;
font-size: 11px !important;
padding: 5px 10px !important;
}
/* Permission items - compact */
.reports-permissions .permission-item {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
padding: 8px 10px !important;
margin-bottom: 6px !important;
gap: 6px !important;
}
.reports-permissions .permission-item-left {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
flex: 1 1 calc(100% - 70px) !important;
min-width: 0 !important;
}
.reports-permissions .permission-avatar {
width: 32px !important;
height: 32px !important;
flex-shrink: 0 !important;
}
.reports-permissions .permission-avatar img {
width: 32px !important;
height: 32px !important;
}
.reports-permissions .permission-info {
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
}
.reports-permissions .permission-name {
font-size: 12px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.reports-permissions .permission-details {
font-size: 10px !important;
}
.reports-permissions .profile-meta {
display: flex !important;
gap: 6px !important;
}
.reports-permissions .profile-meta-item {
font-size: 9px !important;
}
/* Categories - compact on mobile */
.reports-permissions .permission-categories {
display: flex !important;
flex-wrap: wrap !important;
gap: 3px !important;
flex: 0 0 100% !important;
order: 3 !important;
}
.reports-permissions .permission-categories .category-badge {
font-size: 8px !important;
padding: 2px 4px !important;
}
/* Actions - always visible */
.reports-permissions .permission-item-right {
display: flex !important;
flex-shrink: 0 !important;
position: absolute !important;
right: 10px !important;
top: 8px !important;
}
.reports-permissions .permission-item {
position: relative !important;
padding-right: 70px !important;
}
.reports-permissions .permission-item-right .rec-actions {
display: flex !important;
flex-direction: row !important;
gap: 4px !important;
}
.reports-permissions .permission-item-right .action-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 26px !important;
height: 26px !important;
font-size: 11px !important;
}
/* Permission modals - mobile */
#addPermissionModal .modal-dialog,
#editPermissionModal .modal-dialog {
margin: 10px !important;
max-width: calc(100% - 20px) !important;
}
#addPermissionModal .modal-content,
#editPermissionModal .modal-content {
max-height: calc(100vh - 20px) !important;
}
#addPermissionModal .modal-header,
#editPermissionModal .modal-header {
padding: 12px 15px !important;
}
#addPermissionModal .modal-title,
#editPermissionModal .modal-title {
font-size: 16px !important;
}
#addPermissionModal .modal-body,
#editPermissionModal .modal-body {
padding: 15px !important;
max-height: calc(100vh - 150px) !important;
overflow-y: auto !important;
}
#addPermissionModal .row,
#editPermissionModal .row {
margin: 0 -5px !important;
}
#addPermissionModal .col-md-6,
#editPermissionModal .col-md-6 {
padding: 0 5px !important;
margin-bottom: 10px !important;
}
#addPermissionModal .modern-form-group,
#editPermissionModal .modern-form-group {
margin-bottom: 10px !important;
}
#addPermissionModal .modern-label,
#editPermissionModal .modern-label {
font-size: 12px !important;
margin-bottom: 5px !important;
}
#addPermissionModal .modern-input,
#editPermissionModal .modern-input {
font-size: 13px !important;
padding: 8px 10px !important;
}
/* Category grid - mobile */
#addPermissionModal .category-toggle-grid,
#editPermissionModal .category-toggle-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 5px !important;
}
#addPermissionModal .category-toggle-item,
#editPermissionModal .category-toggle-item {
min-width: 0 !important;
height: auto !important;
}
#addPermissionModal .category-toggle-label,
#editPermissionModal .category-toggle-label {
padding: 8px 5px !important;
font-size: 9px !important;
min-height: auto !important;
height: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#addPermissionModal .category-icon-box,
#editPermissionModal .category-icon-box {
display: none !important;
}
#addPermissionModal .category-name,
#editPermissionModal .category-name {
font-size: 9px !important;
margin-top: 0 !important;
line-height: 1.2 !important;
}
#addPermissionModal .modal-footer,
#editPermissionModal .modal-footer {
padding: 10px 15px !important;
gap: 8px !important;
}
#addPermissionModal .modal-footer .btn,
#editPermissionModal .modal-footer .btn {
font-size: 12px !important;
padding: 8px 15px !important;
}
/* Reports table - disable sticky columns on mobile */
.reports-form .reports-table th.fixed-left,
.reports-form .reports-table td.fixed-left {
position: static !important;
}
/* Transfer Modal (Children Management) - Mobile */
#transferModal .modal-dialog {
margin: 10px !important;
max-width: calc(100% - 20px) !important;
}
#transferModal .modal-body {
padding: 10px !important;
}
#transferModal .report-info-header {
flex-direction: column !important;
gap: 6px !important;
padding: 8px 10px !important;
margin-bottom: 10px !important;
}
#transferModal .report-info-item {
gap: 4px !important;
}
#transferModal .report-info-label {
font-size: 11px !important;
}
#transferModal .report-info-value {
font-size: 12px !important;
}
#transferModal .report-children-modal-content .row {
flex-direction: column !important;
}
#transferModal .report-children-modal-content .col-md-6 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
padding: 0 !important;
margin-bottom: 10px !important;
}
#transferModal .panel {
margin-bottom: 10px !important;
}
#transferModal .panel-header {
padding: 6px 10px !important;
}
#transferModal .panel-title {
font-size: 12px !important;
}
#transferModal .panel-body {
padding: 8px !important;
}
#transferModal .children-list {
max-height: 200px !important;
min-height: 150px !important;
}
#transferModal .child-item {
padding: 6px 8px !important;
margin-bottom: 6px !important;
gap: 8px !important;
}
#transferModal .child-avatar {
width: 28px !important;
height: 28px !important;
display: none !important;
}
#transferModal .child-number {
position: static !important;
width: 18px !important;
height: 18px !important;
font-size: 10px !important;
flex-shrink: 0 !important;
display: inline-flex !important;
}
#transferModal .child-name {
font-size: 12px !important;
}
#transferModal .child-meta {
font-size: 10px !important;
display: none !important;
}
#transferModal .add-child-btn,
#transferModal .remove-child-btn {
width: 28px !important;
height: 28px !important;
}
#transferModal .children-search input {
font-size: 12px !important;
padding: 5px 8px !important;
}
/* Reports Statistics Page - Mobile */
.reports-statistics .box-header .box-title {
font-size: 11px !important;
line-height: 1.4 !important;
word-break: break-word !important;
}
.reports-statistics h4 {
font-size: 14px !important;
margin: 10px 0 !important;
}
.reports-statistics .box-body {
padding: 10px !important;
}
.reports-statistics > .row > .col-md-12 > .box > .box-body > .row {
flex-direction: column !important;
}
.reports-statistics > .row > .col-md-12 > .box > .box-body > .row > .col-md-6 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
padding: 0 !important;
margin-bottom: 15px !important;
}
.reports-statistics .table th,
.reports-statistics .table td {
font-size: 11px !important;
padding: 6px 8px !important;
}
.reports-statistics .progress {
height: 8px !important;
margin-top: 4px !important;
}
.reports-statistics canvas {
max-height: 180px !important;
}
.reports-statistics .box .box .box-header {
padding: 8px 10px !important;
}
.reports-statistics .box .box .box-header .box-title {
font-size: 12px !important;
}
.reports-statistics .box .box .box-body {
padding: 8px !important;
}
.reports-statistics .box-footer {
padding: 10px !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.reports-statistics .box-footer .btn {
font-size: 12px !important;
padding: 6px 12px !important;
}
/* Education Create Form - Mobile */
.education-module .edu-create-card {
padding: 12px !important;
}
.education-module .edu-create-header {
flex-direction: column !important;
gap: 10px !important;
align-items: flex-start !important;
}
.education-module .edu-create-title {
font-size: 16px !important;
}
.education-module .edu-form-row {
flex-direction: column !important;
gap: 10px !important;
}
.education-module .edu-form-row > div {
width: 100% !important;
flex: none !important;
}
.education-module .edu-form-group label {
font-size: 12px !important;
}
.education-module .edu-form-group select,
.education-module .edu-form-group input {
font-size: 13px !important;
padding: 8px 10px !important;
}
.education-module .edu-age-cards-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
.education-module .edu-age-card {
padding: 10px 6px 8px !important;
}
.education-module .edu-age-card-img {
height: 60px !important;
}
.education-module .edu-age-card-label {
font-size: 10px !important;
}
.education-module .edu-plan-item {
flex-direction: column !important;
gap: 10px !important;
padding: 10px !important;
align-items: stretch !important;
}
.education-module .edu-plan-item .subject {
flex: none !important;
width: 100% !important;
align-self: flex-start !important;
}
.education-module .edu-plan-item .subject select {
font-size: 13px !important;
padding: 8px 10px !important;
height: auto !important;
width: 100% !important;
}
.education-module .edu-plan-item .tasks {
width: 100% !important;
flex: none !important;
}
.education-module .edu-plan-item .tasks .note-editor {
min-height: 80px !important;
}
.education-module .edu-plan-item .actions {
align-self: flex-end !important;
}
.education-module .edu-actions-bar {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.education-module .edu-actions-bar .btn {
width: 100% !important;
font-size: 13px !important;
}
.education-module .edu-section-title {
font-size: 14px !important;
}
.education-module .note-editor {
font-size: 12px !important;
}
.education-module .note-editing-area {
min-height: 80px !important;
}
/* AI Modal - Mobile */
.ai-modal {
width: 95% !important;
max-width: none !important;
max-height: 95vh !important;
margin: 10px !important;
}
.ai-modal-header {
padding: 12px 15px !important;
}
.ai-modal-header span {
font-size: 14px !important;
}
.ai-modal-body {
padding: 12px !important;
}
.ai-aidana-block {
flex-direction: column !important;
text-align: center !important;
gap: 10px !important;
}
.ai-aidana-avatar {
width: 60px !important;
height: 60px !important;
}
.ai-aidana-name {
font-size: 14px !important;
}
.ai-aidana-desc {
font-size: 11px !important;
}
.ai-aidana-greeting {
font-size: 12px !important;
text-align: center !important;
}
.ai-subject-info {
padding: 10px !important;
margin-bottom: 12px !important;
}
.ai-subject-info label,
.ai-subject-info span {
font-size: 12px !important;
}
.ai-prompt-group label {
font-size: 12px !important;
}
.ai-prompt-group textarea {
font-size: 13px !important;
}
.ai-actions .btn {
width: 100% !important;
font-size: 13px !important;
}
.ai-variant-header {
flex-direction: column !important;
gap: 8px !important;
align-items: flex-start !important;
}
.ai-variant-header .btn {
width: 100% !important;
}
.ai-variant-text {
font-size: 12px !important;
padding: 10px !important;
}
.ai-variant-disclaimer {
font-size: 10px !important;
padding: 8px 10px !important;
}
.ai-modal-footer {
padding: 10px 12px !important;
}
.ai-modal-footer .btn {
width: 100% !important;
}
/* AI Loader - Mobile */
.ai-generate-loader-content {
min-width: auto !important;
width: 90% !important;
padding: 20px !important;
flex-direction: column !important;
text-align: center !important;
}
.ai-generate-loader-avatar {
width: 80px !important;
height: 80px !important;
}
.ai-generate-loader-text {
min-width: auto !important;
}
.ai-generate-loader-title {
font-size: 14px !important;
}
.ai-generate-loader-status {
font-size: 12px !important;
}
/* Cyclogram View - Mobile */
.cyclogram-header {
flex-direction: column !important;
align-items: flex-start !important;
padding: 12px !important;
gap: 10px !important;
}
.cyclogram-header .btn-link {
position: absolute !important;
top: 10px !important;
left: 10px !important;
padding: 5px !important;
}
.cyclogram-header .header-info {
width: 100% !important;
padding-left: 35px !important;
}
.cyclogram-header h2 {
font-size: 14px !important;
}
.cyclogram-header small {
font-size: 12px !important;
display: block !important;
}
.cyclogram-header .header-meta {
gap: 8px !important;
font-size: 11px !important;
flex-wrap: wrap !important;
}
.cyclogram-header .header-meta > span {
white-space: nowrap !important;
}
.cyclogram-header .header-meta .related-link {
font-size: 10px !important;
padding: 3px 8px !important;
}
.cyclogram-status-badge {
font-size: 10px !important;
padding: 3px 8px !important;
}
.cyclogram-header .header-actions {
width: 100% !important;
justify-content: flex-end !important;
gap: 6px !important;
}
.cyclogram-header .btn-export,
.cyclogram-header .btn-history,
.cyclogram-header .btn-delete {
padding: 6px 10px !important;
font-size: 12px !important;
height: auto !important;
}
.cyclogram-header .btn-export {
margin-right: 0 !important;
}
/* Week tabs - horizontal scroll */
.week-tabs {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
flex-wrap: nowrap !important;
}
.week-tabs::-webkit-scrollbar {
display: none !important;
}
.week-tab {
padding: 8px 14px !important;
font-size: 12px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* Cyclogram table - horizontal scroll */
.cyclogram-table-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
margin: 0 -10px !important;
padding: 0 10px !important;
}
.cyclogram-table {
min-width: 700px !important;
font-size: 11px !important;
}
.cyclogram-table th {
padding: 8px 4px !important;
font-size: 11px !important;
}
.cyclogram-table th:first-child {
width: 120px !important;
min-width: 120px !important;
position: sticky !important;
left: 0 !important;
z-index: 10 !important;
background: #f8f9fa !important;
}
.cyclogram-table td.activity-name {
width: 120px !important;
min-width: 120px !important;
max-width: 120px !important;
position: sticky !important;
left: 0 !important;
z-index: 5 !important;
background: #fff !important;
font-size: 10px !important;
padding: 6px !important;
}
.activity-num {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
line-height: 18px !important;
font-size: 9px !important;
margin-right: 4px !important;
}
.activity-text {
width: calc(100% - 30px) !important;
font-size: 10px !important;
}
.cyclogram-table td.day-cell {
min-width: 100px !important;
padding: 3px !important;
}
.cell-editable,
.cell-preview {
min-height: 50px !important;
font-size: 10px !important;
padding: 4px !important;
}
.cell-content,
.cell-preview span {
font-size: 10px !important;
}
.row-actions {
min-width: 30px !important;
}
.row-btn {
width: 24px !important;
height: 24px !important;
font-size: 10px !important;
}
/* General text row */
.general-text-row .general-text-cell {
font-size: 11px !important;
}
.general-editor-inline {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
position: relative !important;
}
.general-summernote-wrap {
width: 100% !important;
}
.general-editor-btns {
position: absolute !important;
top: 4px !important;
right: 4px !important;
z-index: 100 !important;
gap: 4px !important;
}
.general-editor-btns .btn {
padding: 4px 8px !important;
font-size: 12px !important;
}
.general-editor-inline .note-editor {
width: 100% !important;
}
.general-editor-inline .note-toolbar {
padding-right: 70px !important;
}
.general-editor-inline .note-editing-area {
min-height: 60px !important;
}
.general-text-display {
font-size: 11px !important;
padding: 6px !important;
}
/* Cyclogram footer */
.cyclogram-footer {
padding: 10px !important;
}
.cyclogram-footer .progress-info {
font-size: 11px !important;
}
.cyclogram-footer .progress-bar {
height: 6px !important;
}
/* Actions bar */
.cyclogram-actions-bar {
padding: 12px !important;
padding-right: 12px !important;
margin-bottom: 80px !important;
flex-direction: column !important;
}
.cyclogram-actions-bar .btn-send-review {
width: 100% !important;
justify-content: center !important;
}
/* Methodist section */
.cyclogram-methodist-section {
padding: 12px !important;
}
.cyclogram-methodist-section h5 {
font-size: 13px !important;
}
.cyclogram-methodist-section textarea {
font-size: 13px !important;
}
.cyclogram-methodist-actions {
flex-direction: column !important;
gap: 8px !important;
}
.cyclogram-methodist-actions .btn {
width: 100% !important;
}
/* Fixed save button */
#fixed-save-wrapper {
bottom: 10px !important;
right: 10px !important;
}
.fixed-save-btn {
padding: 10px 16px !important;
font-size: 13px !important;
}
/* History modal */
.history-modal {
width: 95% !important;
max-width: none !important;
max-height: 90vh !important;
}
.history-modal-header {
padding: 12px !important;
font-size: 14px !important;
}
.history-modal-body {
padding: 10px !important;
}
.history-item {
padding: 10px !important;
font-size: 12px !important;
}
/* AI day chips in cyclogram modal */
.ai-day-chips {
flex-wrap: wrap !important;
}
.ai-day-chip {
font-size: 11px !important;
padding: 6px 10px !important;
}
.ai-hints {
flex-wrap: wrap !important;
gap: 6px !important;
}
.ai-hint-btn {
font-size: 11px !important;
padding: 5px 10px !important;
}
/* Select Organization Page - Mobile */
.select-organization-page .organization-actions .action-btn[data-toast-tooltip*="Редактировать"],
.select-organization-page .organization-actions a[href*="/update"],
.select-organization-page .organization-actions .action-btn[data-toast-tooltip*="Удалить"],
.select-organization-page .organization-actions a[href*="/delete"] {
display: none !important;
}
.select-organization-page .organization-actions .enter-btn {
display: inline-flex !important;
background: #667eea !important;
color: #fff !important;
border-radius: 50% !important;
width: 36px !important;
height: 36px !important;
align-items: center !important;
justify-content: center !important;
}
.select-organization-page .organization-actions .enter-btn:hover {
background: #5a6fd6 !important;
}
/* Organization list - compact mobile */
.organizations-module .organization-item,
.organization-index .organization-item {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
padding: 8px 10px !important;
gap: 8px !important;
position: relative !important;
margin-bottom: 6px !important;
min-height: auto !important;
}
.organizations-module .organization-number,
.organization-index .organization-number {
flex-shrink: 0;
}
.organizations-module .number-badge,
.organization-index .number-badge {
width: 20px;
height: 20px;
font-size: 10px;
}
.organizations-module .organization-icon,
.organization-index .organization-icon {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
flex-shrink: 0 !important;
margin-right: 0 !important;
align-self: center !important;
order: 2 !important;
}
.organizations-module .organization-number,
.organization-index .organization-number {
order: 1 !important;
}
.organizations-module .organization-details,
.organization-index .organization-details {
order: 3 !important;
flex: 1 !important;
min-width: calc(100% - 125px) !important;
max-width: calc(100% - 125px) !important;
padding-right: 0 !important;
}
.organizations-module .organization-actions,
.organization-index .organization-actions {
order: 4 !important;
}
.organizations-module .organization-icon i,
.organization-index .organization-icon i {
font-size: 16px !important;
}
.organizations-module .organization-details h5,
.organization-index .organization-details h5 {
font-size: 13px !important;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block !important;
}
/* Hide badges on mobile */
.organizations-module .organization-details .type-badge,
.organizations-module .organization-details .status-badge,
.organization-index .organization-details .type-badge,
.organization-index .organization-details .status-badge {
display: none !important;
}
.organizations-module .org-info,
.organization-index .org-info {
display: flex;
flex-wrap: nowrap;
gap: 8px;
overflow: hidden;
}
.organizations-module .org-detail,
.organization-index .org-detail {
font-size: 10px !important;
white-space: nowrap;
}
/* Show only first 2 org-details */
.organizations-module .org-detail:nth-child(n+3),
.organization-index .org-detail:nth-child(n+3) {
display: none !important;
}
/* Hide organization stats on mobile */
.organizations-module .organization-stats,
.organization-index .organization-stats {
display: none !important;
}
/* Organization actions - right */
.organizations-module .organization-actions,
.organization-index .organization-actions {
position: static !important;
flex-shrink: 0 !important;
margin: 0 !important;
margin-left: auto !important;
align-self: center !important;
}
.organizations-module .organization-actions .rec-actions,
.organization-index .organization-actions .rec-actions {
display: flex !important;
flex-direction: row !important;
gap: 4px !important;
}
.organizations-module .organization-actions .action-btn,
.organization-index .organization-actions .action-btn {
width: 28px !important;
height: 28px !important;
font-size: 12px !important;
}
/* Organization filters - horizontal scroll */
.organizations-module .filter-pagination-container,
.organization-index .filter-pagination-container {
flex-direction: column !important;
gap: 10px;
align-items: stretch !important;
}
.organizations-module .filters-section,
.organization-index .filters-section {
overflow-x: auto;
flex-wrap: nowrap !important;
gap: 6px !important;
padding-bottom: 5px;
-webkit-overflow-scrolling: touch;
}
.organizations-module .filter-group,
.organization-index .filter-group {
flex-shrink: 0;
margin-right: 0 !important;
}
.organizations-module .filter-group select,
.organization-index .filter-group select {
min-width: 120px !important;
font-size: 12px !important;
padding: 5px 8px !important;
}
.organizations-module .search-form-container .input-group,
.organization-index .search-form-container .input-group {
flex-wrap: nowrap;
}
.organizations-module .search-form-container .form-control,
.organization-index .search-form-container .form-control {
font-size: 13px;
}
/* Children search */
.children-list .search-box,
#tab-children .search-box {
margin-bottom: 10px;
}
.children-list .search-input,
#tab-children .search-input {
font-size: 13px;
padding: 10px 40px;
}
/* Children filters */
.children-list .filter-buttons,
#tab-children .filter-buttons {
overflow-x: auto;
flex-wrap: nowrap;
gap: 6px;
margin-bottom: 10px;
padding-bottom: 5px;
}
.children-list .filter-btn,
#tab-children .filter-btn {
font-size: 11px;
padding: 5px 10px;
white-space: nowrap;
}
/* Children list - compact like employees */
.children-list .child-item,
#tab-children .child-item {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
padding: 8px 50px 8px 10px !important;
gap: 8px;
position: relative;
margin-bottom: 6px !important;
}
/* Hide any action-btn that's NOT inside child-item-right */
.children-list .child-item > .action-btn,
.children-list .child-item-left .action-btn,
.children-list .child-avatar .action-btn,
#tab-children .child-item > .action-btn,
#tab-children .child-item-left .action-btn,
#tab-children .child-avatar .action-btn {
display: none !important;
}
/* Child number */
.children-list .child-number,
#tab-children .child-number {
flex-shrink: 0;
}
.children-list .number-badge,
#tab-children .number-badge {
width: 20px;
height: 20px;
font-size: 10px;
}
/* Child avatar */
.children-list .child-avatar,
#tab-children .child-avatar {
width: 38px;
height: 38px;
flex-shrink: 0;
}
.children-list .child-avatar img,
#tab-children .child-avatar img {
width: 38px;
height: 38px;
}
/* Child info */
.children-list .child-item-left,
#tab-children .child-item-left {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.children-list .child-info,
#tab-children .child-info {
flex: 1;
min-width: 0;
padding-right: 55px;
}
.children-list .child-name,
#tab-children .child-name {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.children-list .child-name a,
#tab-children .child-name a {
color: #333 !important;
text-decoration: none !important;
display: block;
}
.children-list .child-name a:active,
#tab-children .child-name a:active {
color: #007bff !important;
}
.children-list .child-details,
#tab-children .child-details {
font-size: 11px;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hide some details on mobile */
.children-list .child-iin,
#tab-children .child-iin {
display: none;
}
/* Child actions - right */
.children-list .child-item .child-item-right,
#tab-children .child-item .child-item-right,
#children-list-app .child-item .child-item-right {
position: absolute !important;
right: 8px !important;
top: 0 !important;
left: auto !important;
margin: 0 !important;
border: none !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
text-align: right !important;
height: 100% !important;
}
.children-list .child-item .child-item-right .action-buttons,
#tab-children .child-item .child-item-right .action-buttons,
#children-list-app .child-item .child-item-right .action-buttons {
display: flex !important;
flex-direction: row !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 4px !important;
}
.children-list .child-item .child-item-right .action-btn,
#tab-children .child-item .child-item-right .action-btn,
#children-list-app .child-item .child-item-right .action-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
font-size: 13px !important;
}
/* Compact profile-meta on mobile children list */
.children-list .profile-meta,
#tab-children .profile-meta {
display: flex !important;
flex-direction: row !important;
gap: 10px;
}
.children-list .profile-meta-item,
#tab-children .profile-meta-item {
display: inline-flex !important;
align-items: center;
gap: 3px;
}
.children-list .profile-meta-item i,
#tab-children .profile-meta-item i {
font-size: 10px;
color: #999;
}
.children-list .profile-meta-item span,
#tab-children .profile-meta-item span {
font-size: 10px;
}
/* Pagination compact */
.children-list .d-flex.justify-content-between,
#tab-children .d-flex.justify-content-between {
flex-direction: column;
gap: 8px;
align-items: flex-start !important;
}
.children-list .pagination-info,
#tab-children .pagination-info {
font-size: 11px;
}
.children-list .pagination-btn,
#tab-children .pagination-btn {
padding: 4px 8px;
font-size: 12px;
}
/* Selection floating bar */
.children-list .selection-floating-bar,
#tab-children .selection-floating-bar {
padding: 10px;
font-size: 13px;
}
/* Checkbox */
.children-list .child-checkbox,
#tab-children .child-checkbox {
margin-right: 5px;
}
/* Add child floating button */
.children-list .btn-floating,
#tab-children .btn-floating {
bottom: 90px !important;
right: 20px !important;
width: 50px !important;
height: 50px !important;
}
/* ===========================================
Child View Page Mobile Styles
=========================================== */
.child-view {
padding-top: 0 !important;
}
.child-view > .d-flex.justify-content-end {
position: relative !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
padding: 8px;
background: #f8f9fa;
border-radius: 8px;
justify-content: flex-end !important;
flex-wrap: wrap;
gap: 6px;
}
.child-view .rec-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.child-view .action-btn {
width: 34px;
height: 34px;
font-size: 14px;
}
/* ===========================================
Profile Module Mobile Styles
=========================================== */
.profile-module {
padding: 0 !important;
}
.profile-index {
padding: 0 !important;
}
/* Profile header card */
.profile-header-card {
flex-direction: column !important;
text-align: center;
padding: 15px !important;
gap: 10px;
}
.profile-avatar-large {
width: 80px !important;
height: 80px !important;
margin: 0 auto;
}
.profile-avatar-large img {
width: 80px !important;
height: 80px !important;
}
.profile-info-block {
text-align: center;
}
.profile-name {
font-size: 18px !important;
margin-bottom: 5px;
}
.profile-username {
font-size: 13px !important;
}
.profile-badges {
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
.profile-badge {
font-size: 11px !important;
padding: 3px 8px !important;
}
/* Profile tabs */
.profile-tabs-container {
margin-top: 10px;
}
.custom-tabs-nav {
overflow-x: auto;
flex-wrap: nowrap !important;
gap: 5px;
padding-bottom: 5px;
-webkit-overflow-scrolling: touch;
}
.tab-nav-item {
font-size: 12px !important;
padding: 8px 12px !important;
white-space: nowrap;
}
/* Tab content */
.tab-content-panel {
padding: 10px !important;
}
/* ===========================================
Consultation View Mobile Styles
=========================================== */
.consultation-view {
padding: 0 !important;
}
.back-button-container {
margin-bottom: 10px;
}
.back-button-container .btn {
font-size: 13px;
padding: 8px 12px;
}
/* Consultation header */
.consultation-header-card {
flex-direction: column !important;
text-align: center;
padding: 15px !important;
gap: 10px;
}
.consultation-icon-wrapper {
margin: 0 auto;
}
.consultation-icon {
width: 60px !important;
height: 60px !important;
}
.consultation-icon img {
width: 60px !important;
height: 60px !important;
}
.consultation-info {
text-align: center;
}
.consultation-info h2 {
font-size: 16px !important;
margin-bottom: 8px;
}
.consultation-meta {
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.consultation-meta .meta-item {
font-size: 11px;
}
.consultation-status {
margin-top: 5px;
}
.status-badge {
font-size: 11px !important;
padding: 4px 10px !important;
}
/* Messages container - WhatsApp style */
.messages-container.whatsapp-style {
padding: 10px !important;
}
.message-bubble {
max-width: 90% !important;
padding: 10px 12px !important;
font-size: 13px !important;
}
.message-time {
font-size: 10px !important;
}
/* My consultations panel */
.my-consultations-panel {
flex-direction: column !important;
}
.tickets-panel {
width: 100% !important;
max-width: none !important;
border-right: none !important;
border-bottom: 1px solid #e0e0e0;
max-height: 300px;
overflow-y: auto;
}
.tickets-header {
flex-direction: column;
gap: 8px;
padding: 10px !important;
}
.tickets-header .search-input,
.tickets-header .status-filter {
width: 100% !important;
font-size: 13px;
}
.ticket-item {
padding: 10px !important;
}
.ticket-subject {
font-size: 13px !important;
}
.ticket-preview {
font-size: 11px !important;
}
.ticket-meta {
font-size: 10px !important;
}
/* Chat panel */
.chat-panel {
width: 100% !important;
min-height: 400px;
}
/* Tables - horizontal scroll on mobile (all tables) */
.table-responsive,
.box-body,
.card-body {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
table.table {
min-width: 500px;
}
.table th,
.table td {
white-space: nowrap;
font-size: 12px;
padding: 8px 10px !important;
}
/* User profile sections - compact on mobile */
.user-profile-section {
margin-bottom: 10px;
}
.user-profile-section-header h3 {
font-size: 14px !important;
margin: 0;
padding: 10px !important;
}
.user-profile-section-body {
padding: 10px !important;
}
/* Info tables - no scroll, wrap text */
.user-profile-section .info-table,
.user-profile-section table.table {
min-width: auto !important;
width: 100%;
}
.user-profile-section .info-table th,
.user-profile-section .info-table td {
white-space: normal !important;
word-break: break-word;
font-size: 12px;
padding: 6px 8px !important;
display: block;
width: 100%;
}
.user-profile-section .info-table th {
background: #f5f5f5;
font-weight: 600;
border-bottom: none;
}
.user-profile-section .info-table tr {
display: block;
margin-bottom: 8px;
border-bottom: 1px solid #eee;
}
/* Universal form - remove padding */
.universal-form > div > div {
padding: 0;
}
/* Floating button mobile - выше консультанта */
.employee-index .btn-floating {
bottom: 90px !important;
right: 20px !important;
width: 50px !important;
height: 50px !important;
}
.employee-index .btn-floating i {
font-size: 20px;
}
/* Pagination mobile */
.employee-index .pagination-info {
font-size: 11px;
}
.employee-index .pagination-btn {
padding: 4px 8px;
font-size: 12px;
}
}
@media (max-width: 480px) {
/* HR extra small */
.employee-index .stats-container .stat-card {
padding: 8px 5px;
}
.employee-index .stats-container .stat-value {
font-size: 26px;
}
.employee-index .stats-container .stat-label {
font-size: 8px;
}
.employee-index .list-item {
padding: 6px 8px !important;
}
.employee-index .item-avatar {
width: 36px;
height: 36px;
}
.employee-index .item-avatar img {
width: 36px;
height: 36px;
}
.employee-index .item-title a {
font-size: 13px;
}
.employee-index .item-label {
font-size: 9px;
padding: 1px 5px;
}
.employee-index .employee-groups {
font-size: 9px;
}
.employee-index .item-actions .action-btn {
width: 24px;
height: 24px;
font-size: 10px;
}
.employee-index .umc-period-tab {
font-size: 12px;
padding: 5px 10px;
}
}
/* ===========================================
HR Employee Index Mobile - Enhanced Styles
=========================================== */
/* Action buttons for HR employee list */
.employee-index .rec-actions {
display: flex;
flex-direction: row;
gap: 8px;
}
.employee-index .action-btn {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
color: #666;
border: 1px solid #e0e0e0;
transition: all 0.2s ease;
text-decoration: none;
}
.employee-index .action-btn:hover {
background: #fff;
color: #333;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transform: scale(1.1);
text-decoration: none;
}
.employee-index .action-btn.view-btn:hover {
color: #4a89dc;
border-color: #4a89dc;
}
.employee-index .action-btn.edit-btn:hover {
color: #f39c12;
border-color: #f39c12;
}
/* Archive actions */
.employee-index .archive-actions {
display: flex;
align-items: center;
gap: 8px;
}
.employee-index .restore-action-wrapper {
display: flex;
align-items: center;
gap: 4px;
}
.employee-index .restore-countdown {
font-size: 11px;
color: #6c757d;
white-space: nowrap;
background: #fff3cd;
padding: 2px 6px;
border-radius: 4px;
}
.employee-index .restore-countdown .countdown-time {
font-family: monospace;
font-weight: 600;
}
.employee-index .restore-employee-btn:hover {
color: #28a745;
border-color: #28a745;
}
.employee-index .rehire-employee-btn:hover {
color: #17a2b8;
border-color: #17a2b8;
}
/* Skeleton loading styles */
.employee-index .skeleton-loading-state {
animation: skeleton-fade 0.3s ease;
}
.employee-index .skeleton-stat {
background: #f8f9fa;
min-height: 80px;
}
.employee-index .skeleton-stat-value {
height: 28px;
width: 50px;
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
border-radius: 4px;
margin: 0 auto 8px;
}
.employee-index .skeleton-stat-label {
height: 12px;
width: 70px;
background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
border-radius: 3px;
margin: 0 auto;
}
.employee-index .skeleton-stat-icon {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
border-radius: 50%;
}
.employee-index .skeleton-progress-bar {
height: 100%;
width: 60%;
background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.employee-index .skeleton-search-input {
height: 42px;
background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
border-radius: 20px;
}
.employee-index .skeleton-list-item {
background: #fff;
min-height: 60px;
}
.employee-index .skeleton-number-badge {
width: 22px;
height: 22px;
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
border-radius: 50%;
display: inline-block;
}
.employee-index .skeleton-avatar {
width: 50px;
height: 50px;
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
border-radius: 50%;
}
.employee-index .skeleton-title {
height: 16px;
width: 180px;
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
border-radius: 4px;
margin-bottom: 8px;
}
.employee-index .skeleton-details {
height: 12px;
width: 250px;
background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
border-radius: 3px;
}
.employee-index .skeleton-actions {
width: 70px;
height: 32px;
background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
border-radius: 16px;
}
@keyframes skeleton-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes skeleton-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Mobile styles - 768px */
@media (max-width: 768px) {
/* HR - rec-actions mobile */
.employee-index .rec-actions {
gap: 4px;
}
.employee-index .action-btn {
width: 28px;
height: 28px;
font-size: 12px;
}
/* Archive actions mobile */
.employee-index .archive-actions {
flex-wrap: wrap;
gap: 4px;
}
.employee-index .restore-action-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.employee-index .restore-countdown {
font-size: 9px;
padding: 1px 4px;
}
/* Pagination mobile improvements */
.employee-index .d-flex.justify-content-between {
flex-direction: column;
gap: 10px;
}
.employee-index .pagination-buttons {
justify-content: center;
}
/* Skeleton mobile */
.employee-index .skeleton-avatar {
width: 45px;
height: 45px;
}
.employee-index .skeleton-title {
width: 140px;
}
.employee-index .skeleton-details {
width: 180px;
}
/* Employee groups mobile */
.employee-index .employee-groups {
display: block;
margin-top: 2px;
}
.employee-index .employee-group-link {
font-size: 11px;
}
/* Badge mobile */
.employee-index .badge {
font-size: 10px;
padding: 2px 6px;
}
}
/* Mobile styles - 480px */
@media (max-width: 480px) {
/* Extra small HR mobile */
.employee-index .action-btn {
width: 26px;
height: 26px;
font-size: 11px;
}
.employee-index .archive-actions {
flex-direction: column;
align-items: flex-start;
}
.employee-index .restore-action-wrapper {
flex-direction: row;
align-items: center;
}
/* Hide countdown on very small screens */
.employee-index .restore-countdown {
display: none;
}
/* Skeleton extra small */
.employee-index .skeleton-avatar {
width: 38px;
height: 38px;
}
.employee-index .skeleton-title {
width: 120px;
height: 14px;
}
.employee-index .skeleton-details {
width: 150px;
height: 10px;
}
/* Employee groups extra small */
.employee-index .employee-groups {
font-size: 10px;
}
.employee-index .employee-group-link {
font-size: 10px;
}
}
/* ===========================================
Group List Styles
=========================================== */
.search-input {
padding: 10px 10px 10px 40px;
width: 100%;
border: 1px solid #e0e0e0;
border-radius: 4px;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.search-input:focus {
border-color: #7e57c2;
outline: none;
box-shadow: 0 1px 3px rgba(126, 87, 194, 0.3);
}
.filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.employee-index .filter-buttons {
margin: 20px 0;
}
.filter-btn {
border: none;
background-color: #f5f5f5;
padding: 2px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
color: gray;
}
.filter-btn .count {
background-color: #e0e0e0;
color: #666;
padding: 2px 6px;
border-radius: 10px;
margin-left: 5px;
font-size: 12px;
font-weight: bold;
}
.filter-btn:hover {
background-color: #eeeeee;
}
.filter-btn.active {
background-color: var(--primary-hover);
color: white;
}
.filter-btn.active .count {
background-color: rgba(255, 255, 255, 0.3);
color: white;
}
.item-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.group-item {
display: flex;
align-items: center;
background-color: white;
border-radius: 8px;
padding: 5px;
border-left: 4px solid #4db6ac;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: all 0.2s;
position: relative;
}
.group-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.group-icon {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 25px;
margin-left: 15px;
font-size: 20px;
}
.group-details {
flex: 1;
overflow: hidden;
}
.group-details h5 {
margin: 0 0 5px 0;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
.group-details p {
margin: 0;
color: #666;
font-size: 14px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.category-badge, .language-badge {
padding: 3px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
color: white;
}
.teacher-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #e0e0e0;
color: #666;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
}
.progress-thin {
height: 4px;
margin-top: 8px;
margin-bottom: 0;
background-color: #f5f5f5;
border-radius: 2px;
overflow: hidden;
}
.progress-bar {
height: 100%;
border-radius: 2px;
}
.group-children {
padding: 8px 12px;
border-radius: 16px;
font-weight: bold;
margin: 0 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 80px;
text-align: center;
}
.group-children small {
font-weight: normal;
font-size: 11px;
opacity: 0.8;
}
.group-actions {
display: flex;
gap: 5px;
}
.empty-state {
text-align: center;
padding: 50px 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.empty-icon {
font-size: 64px;
color: #e0e0e0;
margin-bottom: 20px;
}
.empty-title {
font-size: 24px;
font-weight: 500;
margin-bottom: 10px;
color: #333;
}
.empty-desc {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}
.ribbon {
position: absolute;
top: 10px;
right: 290px;
padding: 3px 10px;
background-color: #ff9800;
color: white;
font-size: 12px;
font-weight: 500;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
border-radius: 3px 0 0 3px;
}
.ribbon::after {
content: '';
position: absolute;
right: 0;
bottom: -5px;
width: 5px;
height: 5px;
background-color: #e65100;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.group-number {
display: flex;
align-items: flex-start;
justify-content: center;
margin-right: -18px;
margin-top: 3px;
min-width: 24px;
}
.number-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: #f8f9fa;
color: #333;
font-weight: 600;
font-size: 10px;
border-radius: 50%;
border: 1.5px solid #dee2e6;
transition: all 0.2s ease;
position: absolute;
top: 5px;
left: 5px;
}
.group-item:hover .number-badge {
background: #e9ecef;
border-color: #ced4da;
color: #000;
}
.pagination-container {
display: flex;
justify-content: center;
margin-top: 25px;
}
.pagination {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 5px;
}
.pagination li {
display: inline-block;
}
.pagination li a, .pagination li span {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border-radius: 18px;
background-color: #f5f5f5;
color: #333;
text-decoration: none;
transition: all 0.2s;
}
.pagination li.active a, .pagination li.active span {
background-color: #7e57c2;
color: white;
}
.pagination li a:hover {
background-color: #e0e0e0;
}
@media (max-width: 768px) {
.group-item {
flex-direction: column;
align-items: flex-start;
}
.group-icon {
margin-bottom: 10px;
}
.group-children {
margin: 10px 0;
}
.group-actions {
margin-top: 10px;
align-self: flex-end;
}
.filter-buttons {
overflow-x: auto;
padding-bottom: 5px;
-webkit-overflow-scrolling: touch;
}
}
/* ===========================================
Group Index Styles
=========================================== */
:root {
--yellow-color: #FFBB33;
--yellow-light: #FFE8B9;
--green-color: #77CC77;
--green-light: #D6F0D6;
--blue-color: #5AC8FA;
--blue-light: #CCEEFA;
--purple-color: #9C6ADE;
--purple-light: #E9DEFF;
--gray-light: #F0F0F5;
}
.modern-dashboard {
padding: 0;
}
.stat-card {
position: relative;
background-color: white;
border-radius: 12px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
display: flex;
align-items: center;
}
.stat-card .icon {
background-color: rgba(0, 0, 0, 0.05);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
}
.stat-card .icon i {
font-size: 24px;
color: inherit;
}
.stat-card .stat-content {
flex: 1;
}
.stat-card h3 {
font-size: 24px;
font-weight: 700;
margin: 0 0 5px;
}
.stat-card p {
margin: 0;
color: #777;
font-size: 14px;
}
.stat-card .bg-icon {
position: absolute;
font-size: 80px;
right: -15px;
bottom: -15px;
opacity: 0.1;
color: inherit;
}
.stat-card.blue { color: #3498db; }
.stat-card.green { color: #2ecc71; }
.stat-card.orange { color: #f39c12; }
.stat-card.red { color: #e74c3c; }
.chart-container {
position: relative;
height: 300px;
margin-bottom: 10px;
}
.modern-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
margin-right: 5px;
}
/* ========== Group Details Enhanced ========== */
.group-details {
margin-top: 24px;
}
.group-details .row {
margin-left: -12px;
margin-right: -12px;
}
.group-details .row > [class*="col-"] {
padding-left: 12px;
padding-right: 12px;
}
.group-details .info-card {
position: relative;
margin-bottom: var(--spacing-lg);
padding: var(--spacing-lg);
background-color: white;
border-radius: var(--group-border-radius);
box-shadow: var(--group-shadow);
overflow: hidden;
transition: var(--group-transition);
}
.group-details .info-card:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.group-details .section-header {
display: flex;
align-items: center;
margin-bottom: var(--spacing-md);
position: relative;
}
.group-details .header-title {
font-size: 18px;
font-weight: 700;
color: var(--group-text-dark);
position: relative;
padding-left: var(--spacing-sm);
}
.group-details .header-title::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background-color: var(--group-primary);
border-radius: 2px;
}
.group-details .info-body {
position: relative;
margin-top: var(--spacing-md);
}
.group-details .info-body table.table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
margin-bottom: 0;
}
.group-details .info-body table.table tr th,
.group-details .info-body table.table tr td {
padding: var(--spacing-sm) var(--spacing-md);
border: none;
transition: var(--group-transition);
}
.group-details .info-body table.table tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.02);
}
.group-details .info-body table.table tr:hover {
background-color: rgba(66, 133, 244, 0.05);
}
.group-details .info-body table.table tr th {
width: 35%;
font-weight: 600;
color: var(--group-text-dark);
vertical-align: middle;
}
.group-details .info-body table.table tr td {
color: var(--group-text-dark);
vertical-align: middle;
}
.group-details .language-badge {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.group-details .stat-counter {
text-align: center;
padding: var(--spacing-md) 0;
position: relative;
background: linear-gradient(to bottom, var(--group-light), white);
border-radius: var(--group-border-radius);
margin-bottom: var(--spacing-md);
}
.group-details .stat-value {
font-size: 42px;
font-weight: 800;
color: var(--group-primary);
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
margin-bottom: var(--spacing-xs);
line-height: 1.2;
}
.group-details .stat-label {
font-size: 15px;
color: var(--group-text-dark);
font-weight: 500;
}
.group-details .gender-stats {
display: flex;
border-radius: var(--group-border-radius);
padding: 0;
margin: var(--spacing-md) 0;
gap: var(--spacing-sm);
}
.group-details .gender-stat {
flex: 1;
text-align: center;
position: relative;
overflow: hidden;
padding: var(--spacing-md) var(--spacing-sm);
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
transition: var(--group-transition);
}
.group-details .gender-stat:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
.group-details .gender-stat-boys {
background: linear-gradient(135deg, #e8f4fd, #d4e9fb);
border: none;
}
.group-details .gender-stat-girls {
background: linear-gradient(135deg, #fde8e8, #fdfbfa);
border: none;
}
.group-details .gender-bg-avatar {
position: absolute;
width: 80px;
height: 80px;
opacity: 0.2;
right: -15px;
bottom: -15px;
z-index: 0;
transition: var(--group-transition);
}
.group-details .gender-stat:hover .gender-bg-avatar {
opacity: 0.3;
transform: scale(1.1);
}
.group-details .gender-value {
font-size: 32px;
font-weight: 800;
position: relative;
z-index: 1;
margin-bottom: var(--spacing-xs);
line-height: 1.2;
}
.group-details .boys-value {
color: var(--group-boys);
}
.group-details .girls-value {
color: var(--group-girls);
}
.group-details .gender-label {
font-size: 14px;
font-weight: 500;
color: var(--group-text-dark);
position: relative;
z-index: 1;
}
.group-details .age-table-container {
margin-top: var(--spacing-lg);
background-color: white;
border-radius: var(--group-border-radius);
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.group-details .age-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.group-details .age-table thead {
background-color: var(--group-light);
}
.group-details .age-table th {
padding: var(--spacing-sm);
font-weight: 600;
color: var(--group-text-dark);
font-size: 14px;
text-align: left;
text-transform: uppercase;
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
.group-details .age-table td {
padding: var(--spacing-sm);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: var(--group-transition);
}
.group-details .age-table tbody tr:hover {
background-color: rgba(66, 133, 244, 0.05);
}
.group-details .age-table tr:last-child td {
border-bottom: none;
}
.group-details .age-value {
font-weight: 600;
color: var(--group-text-dark);
display: flex;
align-items: center;
}
.group-details .age-value::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--group-primary);
margin-right: var(--spacing-xs);
}
.group-details .count-badge {
background: #eef2ff;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: var(--group-primary);
display: inline-block;
min-width: 32px;
text-align: center;
}
.group-details .card-decoration {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
background: linear-gradient(135deg, transparent 70%, rgba(66, 133, 244, 0.1) 100%);
border-radius: 0 0 0 100px;
pointer-events: none;
}
.group-details .avatar-circle {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--group-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 14px;
}
.group-details .extra-info {
margin-top: var(--spacing-md);
background-color: rgba(80, 200, 120, 0.08);
border-radius: var(--group-border-radius);
padding: var(--spacing-md);
border-left: 3px solid var(--group-secondary);
}
.group-details .extra-info-title {
font-weight: 600;
color: var(--group-text-dark);
margin-bottom: var(--spacing-sm);
display: flex;
align-items: center;
}
.group-details .extra-info-title i {
margin-right: var(--spacing-xs);
color: var(--group-secondary);
}
.group-details .extra-info-content {
color: #626262;
font-size: 14px;
line-height: 1.6;
text-align: left;
margin-left: 55px;
}
.group-details .card-subtitle {
font-size: 14px;
color: var(--group-text-light);
margin-bottom: var(--spacing-sm);
}
.group-details .custom-badge {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-right: var(--spacing-xs);
}
.group-details .badge-primary {
background-color: rgba(66, 133, 244, 0.15);
color: var(--group-primary);
}
.group-details .badge-success {
background-color: rgba(80, 200, 120, 0.15);
color: var(--group-secondary);
}
.group-details .teacher-info {
display: flex;
align-items: center;
margin-top: var(--spacing-xs);
}
.group-details .teacher-info-text {
margin-left: var(--spacing-sm);
}
.group-details .teacher-name {
font-weight: 600;
color: var(--group-text-dark);
}
.group-details .teacher-position {
font-size: 12px;
color: var(--group-text-light);
}
@media (max-width: 767px) {
.group-details .info-card {
padding: var(--spacing-md);
}
.group-details .info-body table.table tr th,
.group-details .info-body table.table tr td {
padding: var(--spacing-sm);
}
.group-details .info-body table.table tr th {
width: 40%;
}
.group-details .stat-value {
font-size: 32px;
}
.group-details .gender-stats {
flex-direction: column;
gap: var(--spacing-sm);
}
.group-details .gender-stat {
padding: var(--spacing-sm);
}
.group-details .gender-value {
font-size: 28px;
}
}
/* ===========================================
Group Details Compact - Redesigned Layout
=========================================== */
.group-details-compact {
margin-top: 20px;
}
.group-details-compact .info-card {
background: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.group-details-compact .section-header {
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #eee;
}
.group-details-compact .header-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
/* Info Grid */
.group-details-compact .info-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.group-details-compact .info-row {
display: flex;
align-items: flex-start;
gap: 12px;
}
.group-details-compact .info-label {
width: 120px;
flex-shrink: 0;
color: #666;
font-size: 13px;
padding-top: 2px;
}
.group-details-compact .info-value {
flex: 1;
font-size: 14px;
color: #333;
}
.group-details-compact .group-name {
font-size: 16px;
color: #2c3e50;
}
.group-details-compact .org-name {
color: #555;
}
/* Teachers */
.group-details-compact .teachers-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.group-details-compact .teacher-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: #f0f4f8;
padding: 4px 10px 4px 4px;
border-radius: 20px;
}
.group-details-compact .teacher-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: #4285f4;
color: #fff;
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.group-details-compact .teacher-name {
font-size: 13px;
color: #333;
}
/* Badges */
.group-details-compact .badge-tag {
display: inline-block;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
color: #fff;
}
/* Meta info */
.group-details-compact .meta-info {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #eee;
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.group-details-compact .meta-info span {
font-size: 12px;
color: #888;
}
.group-details-compact .meta-info i {
margin-right: 4px;
color: #aaa;
}
/* Stats Card */
.group-details-compact .stats-card {
text-align: center;
}
.group-details-compact .stats-hero {
position: relative;
padding: 20px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 10px;
margin-bottom: 16px;
overflow: hidden;
}
.group-details-compact .stats-hero-bg {
position: absolute;
right: 10px;
bottom: -10px;
height: 80px;
opacity: 0.15;
}
.group-details-compact .stats-hero-number {
font-size: 48px;
font-weight: 700;
color: #4285f4;
line-height: 1;
position: relative;
z-index: 1;
}
.group-details-compact .stats-hero-label {
font-size: 14px;
color: #666;
margin-top: 4px;
position: relative;
z-index: 1;
}
/* Gender Row */
.group-details-compact .gender-row {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 12px;
background: #f8f9fa;
border-radius: 10px;
margin-bottom: 16px;
}
.group-details-compact .gender-item {
display: flex;
align-items: center;
gap: 8px;
}
.group-details-compact .gender-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
}
.group-details-compact .gender-data {
display: flex;
flex-direction: column;
text-align: left;
}
.group-details-compact .gender-count {
font-size: 20px;
font-weight: 700;
line-height: 1.1;
}
.group-details-compact .gender-boys .gender-count {
color: #3498db;
}
.group-details-compact .gender-girls .gender-count {
color: #e74c3c;
}
.group-details-compact .gender-label {
font-size: 11px;
color: #888;
}
.group-details-compact .gender-divider {
width: 1px;
height: 30px;
background: #ddd;
}
/* Age Distribution */
.group-details-compact .age-distribution {
text-align: left;
}
.group-details-compact .age-distribution-title {
font-size: 12px;
color: #888;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.group-details-compact .age-bar-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.group-details-compact .age-bar-label {
width: 60px;
font-size: 12px;
color: #555;
flex-shrink: 0;
}
.group-details-compact .age-bar-track {
flex: 1;
height: 8px;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
}
.group-details-compact .age-bar-fill {
height: 100%;
background: linear-gradient(90deg, #4285f4, #34a853);
border-radius: 4px;
transition: width 0.3s ease;
}
.group-details-compact .age-bar-count {
width: 24px;
font-size: 12px;
font-weight: 600;
color: #333;
text-align: right;
}
/* Responsive */
@media (max-width: 991px) {
.group-details-compact .info-row {
flex-direction: column;
gap: 4px;
}
.group-details-compact .info-label {
width: auto;
font-weight: 500;
}
}
@media (max-width: 576px) {
.group-details-compact .gender-row {
flex-direction: column;
gap: 12px;
}
.group-details-compact .gender-divider {
width: 50px;
height: 1px;
}
.group-details-compact .meta-info {
flex-direction: column;
gap: 8px;
}
}
/* ===========================================
Archive Empty State
=========================================== */
.archive-list .empty-state {
text-align: center;
padding: 50px 20px 60px;
background: #fff;
border-radius: 16px;
margin: 20px 0;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.archive-list .empty-state .empty-icon {
margin-bottom: 20px;
position: relative;
display: inline-block;
animation: archiveHeartbeat 3s ease-out forwards;
}
.archive-list .empty-state .empty-icon img {
height: 140px;
width: auto;
}
.archive-list .empty-state .empty-title {
font-size: 18px;
font-weight: 600;
color: #374151;
margin: 0 0 8px 0;
animation: archiveFadeIn 0.6s ease-out 0.5s both;
}
.archive-list .empty-state .empty-desc {
font-size: 14px;
color: #9ca3af;
max-width: 280px;
margin: 0 auto;
line-height: 1.6;
animation: archiveFadeIn 0.6s ease-out 0.7s both;
}
@keyframes archiveHeartbeat {
/* Появление (0-33% = 1сек) */
0% {
opacity: 0;
transform: scale(0.3);
}
33% {
opacity: 1;
transform: scale(1);
}
/* Сердцебиение (33-100% = 2сек) */
44% {
transform: scale(1.15);
}
52% {
transform: scale(0.92);
}
63% {
transform: scale(1.10);
}
74% {
transform: scale(0.95);
}
86% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes archiveFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-box {
position: relative;
margin-bottom: 10px;
}
.search-box input {
width: 100%;
height: 40px;
padding: 0 15px 0 40px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 15px;
}
.search-box input:focus {
outline: none;
border-color: #5AC8FA;
box-shadow: 0 0 0 3px rgba(90, 200, 250, 0.2);
}
.search-box .search-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #999;
pointer-events: none;
z-index: 1;
}
.children-list-container {
margin-bottom: 30px;
}
.children-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.child-item {
display: flex;
align-items: center;
justify-content: space-between;
background-color: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
overflow: hidden;
position: relative;
transition: transform 0.2s, box-shadow 0.2s;
padding: 10px;
border-left: 5px solid transparent;
}
.child-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.child-item-male {
border-left-color: #5AC8FA;
}
.child-item-female {
border-left-color: #9C6ADE;
}
.child-item-left {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.child-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
overflow: hidden;
}
.child-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.child-info {
flex: 1;
min-width: 0;
}
.child-name {
font-weight: 600;
font-size: 16px;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.child-name a {
color: #333;
text-decoration: none;
}
.child-name a:hover {
color: #5AC8FA;
}
.childrenList .child-item-left .child-name {
margin-bottom: 0;
}
.child-details {
display: flex;
font-size: 13px;
color: #777;
}
.profile-meta {
display: flex;
gap: 15px;
}
.profile-meta-item {
display: flex;
align-items: center;
gap: 5px;
}
.child-item-right {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.children-list .empty-state {
text-align: center;
padding: 50px 20px;
background-color: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.children-list .empty-icon {
font-size: 48px;
color: #ddd;
margin-bottom: 20px;
}
.children-list .empty-title {
font-size: 20px;
margin-bottom: 10px;
color: #333;
}
.children-list .empty-desc {
color: #777;
margin-bottom: 20px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.empty-results-message {
text-align: center;
padding: 30px;
background-color: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
margin-top: 15px;
}
.empty-results-message .empty-icon {
font-size: 48px;
color: #ddd;
margin-bottom: 15px;
}
.empty-results-message .empty-title {
font-size: 20px;
margin-bottom: 10px;
}
.empty-results-message .empty-desc {
color: #777;
margin-bottom: 0;
}
@media (max-width: 768px) {
.child-item {
flex-wrap: wrap;
}
.child-item-left {
width: 100%;
margin-bottom: 15px;
}
.child-item-right {
width: 100%;
justify-content: space-between;
padding-top: 15px;
border-top: 1px solid #eee;
}
}
/* ========== Groups Section ========== */
.groups-section {
padding: 30px 0;
}
.group-card {
position: relative;
border-radius: 10px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
height: 100%;
background-color: #fff;
}
.group-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.group-header {
position: relative;
overflow: hidden;
padding: 20px;
background: linear-gradient(135deg, var(--primary-color, #4a89dc) 0%, var(--primary-dark, #3a79cc) 100%);
color: white;
}
.group-header::before {
content: '';
position: absolute;
top: -15px;
right: -15px;
border-radius: 50%;
width: 100px;
height: 100px;
background-color: rgba(255, 255, 255, 0.1);
}
.group-header::after {
content: '';
position: absolute;
bottom: -20px;
left: -20px;
border-radius: 50%;
width: 120px;
height: 120px;
background-color: rgba(255, 255, 255, 0.05);
}
.group-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 5px;
z-index: 1;
position: relative;
}
.group-code {
font-size: 0.9rem;
opacity: 0.8;
z-index: 1;
position: relative;
}
.group-body {
padding: 20px;
}
.group-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.group-info-item {
display: flex;
margin-bottom: 15px;
align-items: center;
}
.group-info-item:last-child {
margin-bottom: 0;
}
.group-info-icon {
flex: 0 0 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
margin-right: 12px;
background-color: rgba(74, 137, 220, 0.1);
color: var(--primary-color, #4a89dc);
}
.group-info-content {
flex: 1;
}
.group-info-label {
font-size: 0.8rem;
color: #777;
margin-bottom: 2px;
}
.group-info-value {
font-weight: 500;
color: #333;
}
.group-actions {
padding: 12px 20px;
border-top: 1px solid #f0f0f0;
text-align: right;
}
.group-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
color: var(--primary-color, #4a89dc);
background-color: rgba(74, 137, 220, 0.1);
transition: background-color 0.2s;
}
.group-action-btn:hover {
background-color: rgba(74, 137, 220, 0.15);
color: var(--primary-dark, #3a79cc);
text-decoration: none;
}
.group-action-btn i {
margin-right: 5px;
}
.children-count {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #f5f5f5;
color: #777;
font-size: 0.8rem;
font-weight: 500;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.age-card {
border-radius: 8px;
padding: 12px;
margin-bottom: 10px;
color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
transition: transform 0.2s;
}
.age-card:hover {
transform: translateX(5px);
}
.age-icon {
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.age-content {
flex: 1;
}
.age-name {
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 2px;
}
.age-count {
font-size: 0.8rem;
opacity: 0.9;
}
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.filter-select {
flex: 1;
min-width: 150px;
padding: 10px 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 0.95rem;
transition: box-shadow 0.2s, border-color 0.2s;
background-color: white;
}
.filter-select:focus {
border-color: var(--primary-color, #4a89dc);
box-shadow: 0 0 0 3px rgba(74, 137, 220, 0.1);
outline: none;
}
/* ========== Group View Tabs ========== */
.group-view .nav-tabs {
border-bottom: 1px solid #dee2e6;
margin-bottom: 20px;
}
.group-view .nav-tabs .nav-item {
margin-bottom: -1px;
}
.nav-tabs .nav-link {
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
font-size: 15px;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
border-color: #e9ecef #e9ecef #dee2e6;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
}
.group-view .tab-content > .tab-pane {
display: none;
}
.group-view .tab-content > .active {
display: block;
}
.group-view .tab-content > .tab-pane.fade {
opacity: 0;
transition: opacity 0.15s linear;
}
.group-view .tab-content > .tab-pane.fade.show {
opacity: 1;
}
.group-view .nav-tabs .badge {
font-size: 0.75em;
padding: 0.25em 0.6em;
border-radius: 50rem;
vertical-align: middle;
margin-left: 5px;
}
.server-search-form {
margin-bottom: 0;
}
.server-search-form .search-box {
position: relative;
}
.server-search-form .search-box .search-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
z-index: 5;
}
.server-search-form .search-box .search-input {
width: 100%;
padding: 10px 15px 10px 40px;
border: 1px solid #ddd;
border-radius: 1.2rem;
font-size: 1rem;
transition: all 0.3s ease;
}
.server-search-form .search-box .search-input:focus {
border-color: #4a89dc;
box-shadow: 0 0 0 0.2rem rgba(74, 137, 220, 0.25);
outline: none;
}
.server-search-form .search-box .search-clear-btn {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
font-size: 1.2rem;
cursor: pointer;
z-index: 5;
transition: color 0.2s ease;
text-decoration: none;
}
.server-search-form .search-box .search-clear-btn:hover {
color: #666;
}
/* Стили для пагинации */
.pagination-buttons .pagination-btn {
border: none !important;
background: #f8f9fa;
color: #495057;
margin-right: 4px;
border-radius: 50% !important;
width: 32px;
height: 32px;
font-size: 12px;
line-height: 1;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
.pagination-buttons .pagination-btn:hover {
background: #e9ecef;
color: #495057;
text-decoration: none;
transform: translateY(-1px);
transition: all 0.2s ease;
}
.pagination-buttons .pagination-btn.active {
background: #007bff !important;
color: white !important;
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}
.pagination-buttons .pagination-btn.active:hover {
background: #0056b3 !important;
color: white !important;
transform: translateY(-1px);
}
.organizations-module.organization-view .org-badge {
display: inline-block;
padding: 3px 8px !important;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
margin-left: 10px;
vertical-align: middle;
color: #fff;
border-left: none !important;
}
.organizations-module.organization-view .org-badge.active {
background-color: #00d0a8 !important;
}
.organizations-module.organization-view .org-type-badge {
background-color: #3c8dbc !important;
}
.pagination-info {
font-size: 14px;
font-weight: 500;
}
.pagination-info i {
margin-right: 5px;
}
.stats-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
/* Стили для одной карточки статистики */
.stat-card {
border-top: 3px solid var(--reports-success, #4a89dc);
flex: 1;
min-width: 200px;
min-height: 130px;
background-color: var(--white, white);
border-radius: 12px;
padding: 30px 0 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
/* Расположение элементов внутри карточки */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Эффект при наведении на карточку */
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
/* Числовое значение статистики */
.stat-value {
font-size: 2.1rem;
font-weight: 600;
margin-bottom: 5px;
color: var(--dark, #333);
}
/* Цветовые варианты для значений разных типов */
.total-groups {
color: var(--blue, #4FC3F7);
}
.total-children,
.total-employees {
color: var(--primary, #4a89dc);
}
.total-boys,
.total-male {
color: var(--male-color, #4285F4);
}
.total-girls,
.total-female {
color: var(--female-color, #E91E63);
}
.avg-children {
color: var(--danger, #EF5350);
}
/* Подпись к статистике */
.stat-label {
color: var(--gray, #777);
font-size: 1.1rem;
}
/* Иконка в карточке */
.stat-icon {
position: absolute;
right: -25px;
top: -30px;
opacity: 0.15;
width: 130px;
height: 130px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
color: var(--white, white);
}
.stat-icon > div {
width: 130px !important;
height: 130px !important;
}
.stat-icon.groups {
background-color: var(--primary, #4285F4);
}
.stat-icon.children {
background-color: var(--success, #34A853);
}
.stat-icon.languages {
background-color: var(--warning, #FBBC05);
}
.stat-icon.ages {
background-color: var(--danger, #EA4335);
}
/* Стиль для изображений в иконках */
.stat-icon img {
height: 140px;
}
/* Тонкий прогресс-бар внизу карточки */
.progress-thin {
height: 4px;
background-color: var(--light, #eee);
margin-top: 15px;
border-radius: 2px;
overflow: hidden;
}
/* Полоса прогресса */
.progress-bar {
height: 100%;
border-radius: 2px;
}
/* Варианты стилей карточек по цветам */
.stat-card-success {
background: linear-gradient(to bottom right, #f8fffd, #f0fff7);
border-top: 3px solid var(--success, #2ecc71);
}
.stat-card-warning {
background: linear-gradient(to bottom right, #fffdf6, #fff9e6);
border-top: 3px solid var(--warning, #f39c12);
}
.stat-card-danger {
background: linear-gradient(to bottom right, #fff6f6, #ffeeee);
border-top: 3px solid var(--danger, #e74c3c);
}
/* Стили для иконок в разных типах карточек */
.stat-card-icon {
font-size: 24px;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.stat-card-success .stat-card-icon {
color: var(--success, #2ecc71);
background-color: rgba(46, 204, 113, 0.1);
}
.stat-card-warning .stat-card-icon {
color: var(--warning, #f39c12);
background-color: rgba(243, 156, 18, 0.1);
}
.stat-card-danger .stat-card-icon {
color: var(--danger, #e74c3c);
background-color: rgba(231, 76, 60, 0.1);
}
/* Дополнительный стиль для значений в цветных карточках */
.stat-card-value {
font-size: 32px;
font-weight: 700;
line-height: 1.2;
}
.stat-card-success .stat-card-value {
color: var(--success-dark, #27ae60);
}
.stat-card-warning .stat-card-value {
color: var(--warning-dark, #e67e22);
}
.stat-card-danger .stat-card-value {
color: var(--danger-dark, #c0392b);
}
.stat-card .icon {
background: linear-gradient(45deg, var(--primary, #4a89dc), var(--success, #43A047));
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
color: var(--white, white);
font-size: 24px;
}
/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
.stats-container {
flex-direction: column;
}
}
/* not used - duplicates functionality */
/* Enhanced Group Details Style */
:root {
--group-primary: #4285f4;
--group-secondary: #50c878;
--group-light: #f8f9fa;
--group-border-radius: 12px;
--group-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
--group-accent: #f8d7da;
--group-boys: #5c9ce6;
--group-girls: #e87e79;
--group-transition: all 0.3s ease;
--group-text-dark: #2c3e50;
--group-text-light: #7f8c8d;
}
/* Main container */
.group-details {
margin-top: 24px;
}
/* Unified spacing variables */
.group-details {
--spacing-xs: 6px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
}
/* Row with consistent spacing */
.group-details .row {
margin-left: -12px;
margin-right: -12px;
}
.group-details .row > [class*="col-"] {
padding-left: 12px;
padding-right: 12px;
}
/* Redesigned cards */
.info-card {
position: relative;
margin-bottom: var(--spacing-lg);
padding: var(--spacing-lg);
background-color: white;
border-radius: var(--group-border-radius);
box-shadow: var(--group-shadow);
overflow: hidden;
transition: var(--group-transition);
}
.info-card:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
/* Card headers */
.section-header {
display: flex;
align-items: center;
margin-bottom: var(--spacing-md);
position: relative;
}
.header-title {
font-size: 18px;
font-weight: 700;
color: var(--group-text-dark);
position: relative;
padding-left: var(--spacing-sm);
}
.header-title::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background-color: var(--group-primary);
border-radius: 2px;
}
/* Main info section */
.info-body {
position: relative;
margin-top: var(--spacing-md);
}
/* Styled table */
.info-body table.table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
margin-bottom: 0;
}
.info-body table.table tr th,
.info-body table.table tr td {
padding: var(--spacing-sm) var(--spacing-md);
border: none;
transition: var(--group-transition);
}
.info-body table.table tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.02);
}
.info-body table.table tr:hover {
background-color: rgba(66, 133, 244, 0.05);
}
.info-body table.table tr th {
width: 35%;
font-weight: 600;
color: var(--group-text-dark);
vertical-align: middle;
}
.info-body table.table tr td {
color: var(--group-text-dark);
vertical-align: middle;
}
.info-body tbody {
text-align: left;
}
/* Language badge */
.language-badge {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Stats section */
.stat-counter {
text-align: center;
padding: var(--spacing-md) 0;
position: relative;
background: linear-gradient(to bottom, var(--group-light), white);
border-radius: var(--group-border-radius);
margin-bottom: var(--spacing-md);
}
.stat-value {
font-size: 42px;
font-weight: 800;
color: var(--group-primary);
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
margin-bottom: var(--spacing-xs);
line-height: 1.2;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.03); }
100% { transform: scale(1); }
}
.stat-label {
font-size: 15px;
color: var(--group-text-dark);
font-weight: 500;
}
/* Gender stats with enhanced design */
.gender-stats {
display: flex;
border-radius: var(--group-border-radius);
padding: 0;
margin: var(--spacing-md) 0;
gap: var(--spacing-sm);
}
.gender-stat {
flex: 1;
text-align: center;
position: relative;
overflow: hidden;
padding: var(--spacing-md) var(--spacing-sm);
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
transition: var(--group-transition);
}
.gender-stat:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
.gender-stat-boys {
background: linear-gradient(135deg, #e8f4fd, #d4e9fb);
border: none;
}
.gender-stat-girls {
background: linear-gradient(135deg, #fde8e8, #fbdad4);
border: none;
}
.gender-bg-avatar {
position: absolute;
width: 80px;
height: 80px;
opacity: 0.2;
right: -15px;
bottom: -15px;
z-index: 0;
transition: var(--group-transition);
}
.gender-stat:hover .gender-bg-avatar {
opacity: 0.3;
transform: scale(1.1);
}
.gender-value {
font-size: 32px;
font-weight: 800;
position: relative;
z-index: 1;
margin-bottom: var(--spacing-xs);
line-height: 1.2;
}
.boys-value {
color: var(--group-boys);
}
.girls-value {
color: var(--group-girls);
}
.gender-label {
font-size: 14px;
font-weight: 500;
color: var(--group-text-dark);
position: relative;
z-index: 1;
}
/* Age distribution table */
.age-table-container {
margin-top: var(--spacing-lg);
background-color: white;
border-radius: var(--group-border-radius);
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.age-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.age-table thead {
background-color: var(--group-light);
}
.age-table th {
padding: var(--spacing-sm);
font-weight: 600;
color: var(--group-text-dark);
font-size: 14px;
text-align: left;
text-transform: uppercase;
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
.age-table td {
padding: var(--spacing-sm);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: var(--group-transition);
}
.age-table tbody tr:hover {
background-color: rgba(66, 133, 244, 0.05);
}
.age-table tr:last-child td {
border-bottom: none;
}
.age-value {
font-weight: 600;
color: var(--group-text-dark);
display: flex;
align-items: center;
}
.age-value::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--group-primary);
margin-right: var(--spacing-xs);
}
.count-badge {
background: #eef2ff;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: var(--group-primary);
display: inline-block;
min-width: 32px;
text-align: center;
}
/* Add decorative elements */
.card-decoration {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
background: linear-gradient(135deg, transparent 70%, rgba(66, 133, 244, 0.1) 100%);
border-radius: 0 0 0 100px;
pointer-events: none;
}
/* Responsive styles */
@media (max-width: 767px) {
.info-card {
padding: var(--spacing-md);
}
.info-body table.table tr th,
.info-body table.table tr td {
padding: var(--spacing-sm);
}
.info-body table.table tr th {
width: 40%;
}
.stat-value {
font-size: 32px;
}
.gender-stats {
flex-direction: column;
gap: var(--spacing-sm);
}
.gender-stat {
padding: var(--spacing-sm);
}
.gender-value {
font-size: 28px;
}
}
/* Add a beautiful avatar for teacher */
.teacher-avatar {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
}
.avatar-circle {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--group-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 14px;
}
/* Extra info section */
.extra-info {
margin-top: var(--spacing-md);
background-color: rgba(80, 200, 120, 0.08);
border-radius: var(--group-border-radius);
padding: var(--spacing-md);
border-left: 3px solid var(--group-secondary);
}
.extra-info-title {
font-weight: 600;
color: var(--group-text-dark);
margin-bottom: var(--spacing-sm);
display: flex;
align-items: center;
}
.extra-info-title i {
margin-right: var(--spacing-xs);
color: var(--group-secondary);
}
.extra-info-content {
color: #626262;
font-size: 14px;
line-height: 1.6;
text-align: left;
margin-left: 55px;
}
/* Add animation for the cards */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(var(--spacing-md));
}
to {
opacity: 1;
transform: translateY(0);
}
}
.info-card {
animation: fadeInUp 0.5s ease forwards;
}
.info-card:nth-child(2) {
animation-delay: 0.1s;
}
/* Additional sections styling */
.card-subtitle {
font-size: 14px;
color: var(--group-text-light);
margin-bottom: var(--spacing-sm);
}
/* Add badge styles */
.custom-badge {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-right: var(--spacing-xs);
}
.badge-primary {
background-color: rgba(66, 133, 244, 0.15);
color: var(--group-primary);
}
.badge-success {
background-color: rgba(80, 200, 120, 0.15);
color: var(--group-secondary);
}
/* Teacher info styling */
.teacher-info {
display: flex;
align-items: center;
margin-top: var(--spacing-xs);
}
.teacher-info-text {
margin-left: var(--spacing-sm);
}
.teacher-name {
font-weight: 600;
color: var(--group-text-dark);
}
.teacher-position {
font-size: 12px;
color: var(--group-text-light);
}
/* Group Details Style */
.section-header {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.header-title {
font-size: 18px;
font-weight: 600;
color: #2c3e50;
text-transform: uppercase;
}
.info-card {
margin-bottom: 25px;
padding: 20px;
background-color: #f8f9fa;
border-radius: var(--reports-radius-sm);
border-left: 4px solid var(--reports-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.info-body {
padding: 15px;
background: white;
}
.stat-counter {
text-align: center;
}
.stat-value {
font-size: 36px;
font-weight: 700;
color: #2c3e50;
}
.stat-label {
font-size: 14px;
color: #7f8c8d;
}
.gender-stats {
display: flex;
border-radius: 8px;
padding: 10px;
margin-top: 15px;
}
.gender-stat {
flex: 1;
text-align: center;
position: relative;
overflow: hidden;
padding: 10px;
border-radius: 6px;
}
.gender-stat-boys {
background-color: rgba(52, 152, 219, 0.1);
}
.gender-stat-girls {
background-color: rgba(231, 76, 60, 0.1);
}
.gender-bg-avatar {
position: absolute;
width: 80px;
height: 80px;
opacity: 0.15;
right: -15px;
bottom: -15px;
z-index: 0;
}
.gender-divider {
width: 2px;
height: 50px;
background: #2ecc71;
border-radius: 3px;
margin: 0 10px;
align-self: center;
}
.gender-value {
font-size: 28px;
font-weight: 700;
position: relative;
z-index: 1;
}
.boys-value {
color: #3498db;
}
.girls-value {
color: #e74c3c;
}
.gender-label {
font-size: 12px;
color: #7f8c8d;
position: relative;
z-index: 1;
}
.age-table {
width: 100%;
margin-top: 15px;
border-collapse: separate;
border-spacing: 0 5px;
}
.age-table th {
padding: 8px;
background: #f8f9fa;
font-size: 12px;
font-weight: 600;
color: #7f8c8d;
}
.age-table td {
padding: 8px;
background: white;
box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}
.age-value {
font-weight: 600;
color: #2c3e50;
}
.count-badge {
background: #f1f3f5;
padding: 2px 6px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
color: #2c3e50;
}
.language-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
color: white;
}
/* ========== HR Employee List ========== */
.employee-list-container {
margin-top: 20px;
}
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.stat-icon {
position: absolute;
top: 20px;
right: 20px;
}
.progress-thin {
height: 4px;
background-color: #f0f0f0;
border-radius: 2px;
overflow: hidden;
}
.progress-thin .progress-bar {
height: 100%;
border-radius: 2px;
}
#employeeSearchInput {
width: 100%;
padding: 12px 20px 12px 40px;
border: 1px solid #e0e0e0;
border-radius: 10px;
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
#employeeSearchInput:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
.employee-item {
display: flex;
align-items: center;
background-color: white;
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
animation-duration: 0.5s;
}
.employee-item:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.employee-item-male {
border-left: 4px solid #3498db;
}
.employee-item-female {
border-left: 4px solid #e74c3c;
}
.employee-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
flex-shrink: 0;
}
.employee-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.employee-info {
flex: 1;
min-width: 0;
}
.employee-name {
font-size: 16px;
font-weight: 600;
color: #333;
margin-bottom: 5px;
}
.employee-name a {
color: inherit;
text-decoration: none;
}
.employee-details {
color: #777;
font-size: 13px;
}
.employee-position {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
background-color: #f0f0f0;
margin-right: 8px;
font-size: 12px;
}
.employee-item-right {
display: flex;
align-items: center;
}
.employee-index .list-item {
padding: 5px 15px;
margin-bottom: 0;
position: relative;
}
.item-avatar-sm {
width: 36px;
height: 36px;
margin-right: 10px;
}
.employee-number {
position: absolute;
top: 5px;
left: 5px;
z-index: 10;
}
.employee-index .list-item .number-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: #f8f9fa;
color: #333;
font-weight: 600;
font-size: 10px;
border-radius: 50%;
border: 1.5px solid #dee2e6;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.employee-index .list-item:hover .number-badge {
background: #e9ecef;
border-color: #ced4da;
color: #000;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.employee-index .list-item .item-avatar {
margin-left: 18px;
}
.item-title {
font-size: 0.95rem;
margin-bottom: 2px;
}
.item-label {
padding: 2px 8px;
font-size: 0.75rem;
margin-bottom: 4px;
}
.item-details-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 2px;
}
.item-details-row .item-label {
margin-bottom: 0;
}
.item-details-row .item-meta-field {
font-size: 0.8rem;
display: flex;
align-items: center;
color: #666;
}
.item-details-row .item-meta-field i {
font-size: 0.75rem;
margin-right: 4px;
color: #aaa;
}
.input-group.date .input-group-addon {
padding: 10px;
}
.input-group.date { max-width: 180px; }
@media (max-width: 768px) {
.employee-item {
flex-direction: column;
align-items: flex-start;
}
.employee-avatar {
margin-bottom: 10px;
}
.employee-item-right {
margin-top: 15px;
width: 100%;
justify-content: flex-end;
}
.stats-container {
grid-template-columns: 1fr;
}
}
.report-card-wrapper,
.list-item {
margin-bottom: 20px;
}
.report-card,
.list-item {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
overflow: hidden;
padding: 8px !important;
}
/* Report item header layout */
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: -8px;
width: 100%;
}
/* Compact information display */
.item-info-compact {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.fill-status {
display: flex;
align-items: center;
gap: 4px;
color: #666;
font-size: 12px;
white-space: nowrap;
}
.progress-percent {
color: #2196F3;
background-color: rgba(33, 150, 243, 0.1);
padding: 2px 6px;
border-radius: 10px;
font-size: 11px;
white-space: nowrap;
}
/* Report icon styling */
.report-icon {
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: white;
background-color: #f1f1f1;
border: 2px solid #e0e0e0;
}
.report-icon.status-completed {
background-color: rgba(76, 175, 80, 0.1);
border-color: #4CAF50;
color: #4CAF50;
}
.report-icon.status-in_progress {
background-color: rgba(255, 152, 0, 0.1);
border-color: #FF9800;
color: #FF9800;
}
.report-icon.status-revision {
background-color: rgba(255, 193, 7, 0.1);
border-color: #FFC107;
color: #FFC107;
}
/* Status badge styling */
.status-badge {
font-size: 12px;
padding: 3px 8px;
border-radius: 10px;
font-weight: normal;
background-color: #f1f1f1;
color: #666;
}
.status-badge.completed {
background-color: rgba(76, 175, 80, 0.1);
color: #2e7d32;
border: 1px solid rgba(76, 175, 80, 0.3);
}
.status-badge.in_progress {
background-color: rgba(255, 152, 0, 0.1);
color: #f57f17;
border: 1px solid rgba(255, 152, 0, 0.3);
}
.status-badge.revision {
background-color: rgba(255, 193, 7, 0.1);
color: #f57f17;
border: 1px solid rgba(255, 193, 7, 0.3);
}
/* Combined age and actions block */
.item-age-actions {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
.item-age-actions .item-label {
margin-right: 5px;
}
/* Compact metadata display */
.item-meta-compact {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 4px;
}
.item-compact-details {
margin-top: 0;
}
.item-meta-field {
display: flex;
align-items: center;
color: #666;
font-size: 12px;
}
.item-meta-field i {
margin-right: 5px;
color: #aaa;
font-size: 11px;
}
.progress-thin {
height: 4px;
margin: 0px !important;
background-color: #f1f1f1;
border-radius: 2px;
overflow: hidden;
}
/* Search box styling */
.search-box {
position: relative;
margin-bottom: 20px;
}
.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
}
.search-input {
width: 100%;
padding: 10px 10px 10px 40px;
border: 1px solid #ddd;
border-radius: 20px;
font-size: 14px;
}
.search-input:focus {
border-color: #2196F3;
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
outline: none;
}
/* Empty state styling */
.empty-state {
text-align: center;
padding: 60px 20px;
background-color: #f9f9fa;
border-radius: 8px;
}
.empty-icon {
font-size: 64px;
color: #ddd;
margin-bottom: 20px;
}
.empty-title {
font-size: 24px;
color: #333;
margin-bottom: 10px;
}
.empty-desc {
color: #777;
margin-bottom: 30px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* Additional compact styles */
.item-label {
display: inline-block;
background-color: #f5f5f5;
color: #666;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.8rem;
white-space: nowrap;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.item-header {
flex-direction: column;
align-items: flex-start;
}
.item-info-compact {
margin-top: 8px;
flex-wrap: wrap;
}
.status-badge {
margin-top: 5px;
align-self: flex-start;
}
.filter-buttons {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 10px;
-webkit-overflow-scrolling: touch;
}
.filter-btn {
flex: 0 0 auto;
}
}
/* Стили для карточек статистики */
.stat-card {
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
position: relative;
background-color: #fff;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
overflow: hidden;
}
.stat-card .icon {
position: absolute;
top: 15px;
right: 15px;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
z-index: 1;
}
.stat-card.blue .icon {
background: linear-gradient(45deg, #2196F3, #4FC3F7);
}
.stat-card.green .icon {
background: linear-gradient(45deg, #4CAF50, #8BC34A);
}
.stat-card.orange .icon {
background: linear-gradient(45deg, #FF9800, #FFCA28);
}
.stat-card.red .icon {
background: linear-gradient(45deg, #F44336, #FF7043);
}
.stat-card .bg-icon {
position: absolute;
right: -15px;
bottom: -15px;
font-size: 100px;
color: rgba(0,0,0,0.05);
transform: rotate(-15deg);
z-index: 0;
}
.stat-card .stat-content {
position: relative;
z-index: 1;
padding-top: 10px;
}
.stat-card h3 {
font-size: 28px;
margin: 0;
font-weight: bold;
}
.stat-card p {
margin: 5px 0 0;
color: #666;
}
/* Стили для карточек */
.card {
margin-bottom: 20px;
border: none;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.card-header {
background-color: #f8f9fa;
padding: 15px 20px;
border-bottom: 1px solid #e9ecef;
border-radius: 8px 8px 0 0 !important;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-body {
padding: 20px;
}
.left-border {
border-left: 3px solid #2196F3;
}
.top-border {
border-top: 3px solid #2196F3;
}
/* Стили для плавающей кнопки */
.btn-floating {
position: fixed !important;
bottom: 30px !important;
right: 30px !important;
width: 60px !important;
height: 60px !important;
border-radius: 50% !important;
background-color: #2196F3 !important;
color: white !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 24px !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
z-index: 9999 !important;
cursor: pointer !important;
border: none !important;
outline: none !important;
text-decoration: none !important;
pointer-events: auto !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
.btn-floating:hover {
background-color: #1976D2 !important;
color: white !important;
transform: scale(1.1) !important;
}
.btn-floating:active {
transform: scale(0.95) !important;
}
.btn-floating i {
pointer-events: none !important;
}
/* Стили для тонкого прогресс-бара */
.progress-thin {
height: 6px;
margin-bottom: 5px;
}
/* Стили для статусов отчетов */
.report-status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}
.report-status.completed {
background-color: #c8e6c9;
color: #2e7d32;
}
.report-status.in-progress {
background-color: #fff9c4;
color: #f57f17;
}
.report-status.revision {
background-color: #fff9c4;
color: #f57f17;
}
/* Стили для подсказок */
.info-tooltip {
color: #2196F3;
margin-left: 5px;
cursor: help;
}
/* Стили для пустого состояния */
.empty-state {
text-align: center;
padding: 40px 20px;
}
.empty-state i {
font-size: 64px;
color: #e0e0e0;
margin-bottom: 15px;
}
.empty-state h4 {
font-size: 24px;
color: #333;
margin-bottom: 10px;
}
.empty-state p {
color: #777;
margin-bottom: 20px;
}
/* Категории табов */
.category-icon {
margin-right: 5px;
}
/* Стили для модальных окон - исправляем проблему с .fade */
.modal.fade {
opacity: 0;
transition: opacity 0.15s linear;
}
.modal.fade.show {
opacity: 1;
}
.modal-content {
border-radius: 8px;
border: none;
}
.modal-header {
border-bottom: 1px solid #e9ecef;
padding: 15px 20px;
}
.modal-body {
padding: 20px;
}
.modal-footer {
border-top: 1px solid #e9ecef;
padding: 15px 20px;
}
.input-icon {
position: relative;
}
.input-icon i {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
}
.input-icon select,
.input-icon input {
padding-left: 35px;
}
/* Анимации для таблицы */
@keyframes highlight {
0% {
background-color: #fff9c4;
}
100% {
background-color: transparent;
}
}
.highlight {
animation: highlight 2s ease-in-out;
}
/* Дополнительные стили для форм */
.form-group {
margin-bottom: 20px;
}
label {
font-weight: 500;
margin-bottom: 5px;
display: block;
}
.form-control {
border-radius: 4px;
border: 1px solid #ced4da;
}
.form-control:focus {
border-color: #2196F3;
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}
/* Report card styles */
.report-card-wrapper {
margin-bottom: 20px;
}
.report-card {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
overflow: hidden;
}
.report-header {
padding: 15px;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.report-title h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
.report-meta {
display: flex;
gap: 15px;
font-size: 13px;
color: #666;
margin-top: 5px;
}
.report-status-badge {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}
.report-status-badge.completed {
background-color: #c8e6c9;
color: #2e7d32;
}
.report-status-badge.in-progress {
background-color: #fff9c4;
color: #f57f17;
}
.report-status-badge.draft {
background-color: #e1f5fe;
color: #0277bd;
}
.report-body {
padding: 15px;
}
.report-stats {
display: flex;
justify-content: space-around;
margin-bottom: 15px;
}
.report-progress {
margin-bottom: 10px;
}
.progress-text {
font-size: 12px;
color: #666;
}
/* Search box styling */
.search-box {
position: relative;
margin-bottom: 20px;
}
.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
}
.search-input {
width: 100%;
padding: 10px 10px 10px 40px;
border: 1px solid #ddd;
border-radius: 20px;
font-size: 14px;
}
.search-input:focus {
border-color: #2196F3;
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
outline: none;
}
/* Стили для нумерации отчетов */
.list-item {
position: relative !important;
}
.report-number {
position: absolute;
top: 5px;
left: 5px;
z-index: 10;
}
.list-item .number-badge {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: #f8f9fa;
color: #333;
font-weight: 600;
font-size: 10px;
border-radius: 50%;
border: 1.5px solid #dee2e6;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.list-item:hover .number-badge {
background: #e9ecef;
border-color: #ced4da;
color: #000;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.list-item .item-avatar {
margin-left: 10px;
}
/* Стили для кликабельного названия группы */
.item-title a {
transition: opacity 0.2s ease;
}
.item-title a:hover {
opacity: 0.7;
text-decoration: underline !important;
cursor: pointer;
}
/* Панель администратора - две колонки */
.admin-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 24px;
}
.admin-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
text-decoration: none !important;
transition: all 0.2s ease;
text-align: center;
}
.admin-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
transform: translateY(-2px);
}
.admin-card-icon {
width: 52px;
height: 52px;
border-radius: 12px;
background: #eef1f5;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
transition: all 0.2s ease;
}
.admin-card-icon i {
color: #5c6bc0;
font-size: 22px;
}
.admin-card:hover .admin-card-icon {
background: #5c6bc0;
}
.admin-card:hover .admin-card-icon i {
color: #fff;
}
.admin-card-title {
display: block;
font-size: 15px;
font-weight: 600;
color: #333;
margin-bottom: 6px;
}
.admin-card-desc {
display: block;
font-size: 13px;
color: #888;
}
@media (max-width: 576px) {
.admin-panel {
grid-template-columns: 1fr;
}
}
/* Современный дизайн */
.modern-dashboard {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Статистика в карточках */
.stats-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 25px;
}
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 130px;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.stat-value {
font-size: 36px;
font-weight: 700;
margin-bottom: 5px;
position: relative;
z-index: 1;
}
.stat-label {
color: var(--text-muted);
font-size: 14px;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.stat-icon {
position: absolute;
right: 20px;
top: -20px;
font-size: 112px;
color: var(--blue-color);
opacity: 0.1;
z-index: 0;
}
.progress-thin {
height: 4px;
background-color: var(--gray-light);
border-radius: 2px;
overflow: hidden;
margin-top: 10px;
}
.progress-bar {
height: 100%;
border-radius: 2px;
}
/* Информационная панель */
.info-panel {
background-color: white;
border-radius: var(--border-radius);
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
margin-bottom: 25px;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.info-panel:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.info-panel-header {
background-color: #F8FDFF;
color: #0B222D;
padding:
15px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 1px solid rgba(90, 200, 250, 0.2);
}
.info-panel-body {
padding: 20px;
}
.info-list {
list-style: none;
padding: 0;
margin: 0;
}
.info-list li {
padding: 8px 0;
display: flex;
align-items: center;
color: var(--text-color);
}
.info-list li i {
color: var(--green-color);
margin-right: 12px;
font-size: 16px;
}
.info-list li svg {
color: var(--primary-hover);
margin-right: 12px;
font-size: 16px;
}
/* Поиск */
.search-box {
position: relative;
margin-bottom: 25px;
}
.search-box input {
width: 100%;
padding: 12px 20px 12px 50px;
border: 2px solid #eee;
border-radius: 25px;
font-size: 14px;
transition: all 0.3s;
background-color: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.search-box input:focus {
outline: none;
border-color: var(--blue-color);
box-shadow: 0 0 0 3px rgba(90, 200, 250, 0.2);
}
.search-box .search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 16px;
pointer-events: none;
}
/* Контейнер списка разрешений */
.permissions-list-container {
margin-bottom: 30px;
margin-top: 15px;
}
#create-permission-form select {
padding: 4px 12px;
}
#edit-permission-form select {
padding: 4px 12px;
}
.permissions-list {
display: flex;
flex-direction: column;
gap: 15px;
}
/* Карточка разрешения */
.permission-item {
display: flex;
align-items: center;
background-color: white;
border-radius: var(--border-radius);
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
overflow: hidden;
position: relative;
transition: transform 0.2s, box-shadow 0.2s;
padding: 15px;
border-left: 5px solid var(--blue-color);
}
.permission-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
/* Левая часть с аватаром и информацией */
.permission-item-left {
display: flex;
align-items: center;
margin-right: 15px;
flex: 0 0 20%;
}
.permission-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
background-color: var(--blue-light);
color: var(--blue-color);
font-size: 18px;
}
.permission-info {
flex: 1;
min-width: 0;
}
.permission-name {
font-weight: 600;
font-size: 16px;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.permission-details {
display: flex;
font-size: 13px;
color: var(--text-muted);
}
.profile-meta {
display: flex;
gap: 15px;
}
.profile-meta-item {
display: flex;
align-items: center;
gap: 5px;
}
/* Средняя часть с категориями */
.permission-categories {
padding: 0 20px;
display: flex;
flex-wrap: wrap;
gap: 5px;
flex: 0 0 70%;
}
/* Бейджи категорий */
.category-badge {
display: inline-block;
padding:
4px 10px;
border-radius:
15px;
background-color: #F3FAFD;
color: #42545C;
font-size: 12px;
white-space:
nowrap;
}
/* Правая часть с действиями */
.permission-item-right {
display: flex;
align-items: center;
flex: 0 0 10%;
}
/* Пустое состояние */
.empty-state {
text-align: center;
padding: 50px 20px;
background-color: white;
border-radius: var(--border-radius);
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.empty-state .empty-icon {
font-size: 60px;
color: #ddd;
margin-bottom: 20px;
}
.empty-state .empty-title {
font-size: 22px;
margin-bottom: 10px;
color: var(--text-color);
}
.empty-state .empty-desc {
color: var(--text-muted);
margin-bottom: 25px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
/* Кнопка добавления разрешения */
.btn-add-permission {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 28px;
background-color: #3c8dbc;
color: white !important;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
text-decoration: none !important;
box-shadow: 0 4px 12px rgba(60, 141, 188, 0.3);
transition: all 0.3s ease;
}
.btn-add-permission:hover {
background-color: #367fa9;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(60, 141, 188, 0.4);
color: white !important;
}
.btn-add-permission:active {
transform: translateY(-1px);
}
.btn-add-permission i {
font-size: 22px;
margin-bottom: 0;
}
/* Контейнер категорий для чекбоксов */
.categories-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-height: 200px;
overflow-y: auto;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
}
.category-checkbox {
flex: 0 0 30%;
margin-bottom: 8px;
}
.category-input {
margin-right: 8px;
}
.category-label {
font-weight: normal;
font-size: 14px;
cursor: pointer;
}
/* Модальное окно */
.modal-content {
border: none;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}
.modal-header {
background-color: #f8f9fa;
border-radius: 12px 12px 0 0;
padding: 15px 20px;
border-bottom: 1px solid #eee;
}
.modal-title {
font-weight: 600;
font-size: 18px;
color: #333;
}
.modal-body {
padding: 20px;
}
.modal-footer {
border-top: 1px solid #eee;
padding: 15px 20px;
border-radius: 0 0 12px 12px;
}
/* Современный дизайн модального окна */
.modern-modal {
border-radius: 16px;
border: none;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.modern-modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 16px 16px 0 0;
padding: 20px 30px;
border-bottom: none;
}
.modern-modal-header .modal-title {
color: white;
font-size: 20px;
font-weight: 600;
}
.modern-modal-header .modal-title i {
margin-right: 10px;
}
.modern-modal-header .close {
color: white;
opacity: 0.8;
text-shadow: none;
font-size: 28px;
font-weight: 300;
}
.modern-modal-header .close:hover {
opacity: 1;
}
.modern-modal-body {
padding: 30px;
background-color: #f8f9fa;
}
.modern-form-group {
margin-bottom: 25px;
}
.modern-label {
font-weight: 600;
color: #333;
margin-bottom: 10px;
display: block;
font-size: 14px;
}
.modern-label i {
margin-right: 8px;
}
.modern-input {
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 15px;
transition: all 0.3s;
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.modern-input:hover {
border-color: #b8c5f0;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}
.modern-input:focus {
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
background-color: white;
outline: none;
}
/* Новый дизайн тоглов для категорий */
.category-toggle-grid {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 20px;
flex-wrap: wrap;
}
.category-toggle-item {
position: relative;
flex: 1;
min-width: 180px;
max-width: 220px;
}
.category-toggle-input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.category-toggle-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 15px;
background-color: white;
border: 1px solid #e0e0e0;
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
user-select: none;
height: 300px;
position: relative;
}
.category-toggle-label:hover {
border-color: #667eea;
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
}
.category-toggle-input:checked + .category-toggle-label {
border-color: #667eea;
background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.category-toggle-input:checked + .category-toggle-label::before {
content: '\f00c';
font-family: 'FontAwesome';
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
}
.category-icon-box {
width: 100%;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 45px;
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
border-radius: 16px;
transition: all 0.3s;
}
.category-toggle-input:checked + .category-toggle-label .category-icon-box {
background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
}
.category-icon-box img,
.category-icon-box .category-icon {
width: 200px;
object-fit: contain;
}
.category-name {
font-size: 13px;
color: #333;
font-weight: 600;
text-align: center;
line-height: 1.4;
}
.category-toggle-input:checked + .category-toggle-label .category-name {
color: #667eea;
}
.modern-modal-footer {
background-color: #f8f9fa;
padding: 20px 30px;
border-top: 1px solid #e0e0e0;
border-radius: 0 0 16px 16px;
}
.btn-modern {
padding: 10px 24px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s;
border: none;
}
.btn-modern i {
margin-right: 8px;
}
.btn-modern.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.btn-modern.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}
.btn-modern.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-modern.btn-secondary:hover {
background-color: #5a6268;
transform: translateY(-2px);
}
/* Плавающая кнопка добавления */
.floating-add-button {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 900;
}
.btn-floating {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background-color: var(--blue-color);
color: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
text-decoration: none;
transition: all 0.3s;
}
.btn-floating i {
font-size: 24px;
}
.btn-floating:hover {
background-color: #4aB8EA;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
color: white;
text-decoration: none;
}
/* Адаптивность */
@media (max-width: 992px) {
.permission-item {
flex-wrap: wrap;
}
.permission-item-left {
flex: 0 0 100%;
margin-bottom: 10px;
}
.permission-categories {
flex: 0 0 100%;
max-width: 100%;
padding: 10px 0;
margin-bottom: 10px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.permission-item-right {
flex: 0 0 100%;
justify-content: flex-end;
}
}
@media (max-width: 576px) {
.stats-container {
flex-direction: column;
}
.stat-card {
min-width: 100%;
}
.filter-buttons {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 10px;
-webkit-overflow-scrolling: touch;
}
.filter-btn {
flex: 0 0 auto;
}
}
#transferModal .modal-dialog {
max-width: 1100px;
}
#transferModal .modal-header {
background: #f5f4f4 !important;
padding: 10px 16px !important;
color: #605e5e !important;
}
#transferModal .modal-header::before, #transferModal .modal-header::after {
content: none !important;
}
#transferModal .modal-header .modal-title {
font-size: 14px !important;
font-weight: 600;
}
#transferModal .modal-header .modal-title i {
display: none;
}
#transferModal .modal-header .close {
color: #605e5e !important;
opacity: 0.7;
}
#transferModal .modal-header .close:hover {
opacity: 1;
}
#transferModal .modal-body {
padding: 16px !important;
min-height: auto !important;
}
#addPermissionModal .modal-header,
#editPermissionModal .modal-header {
background: #f5f4f4 !important;
padding: 10px 16px !important;
color: #605e5e !important;
border-radius: 12px 12px 0 0;
}
#addPermissionModal .modal-header .modal-title,
#editPermissionModal .modal-header .modal-title {
font-size: 14px !important;
font-weight: 600;
color: #605e5e !important;
}
#addPermissionModal .modal-header .modal-title i,
#editPermissionModal .modal-header .modal-title i {
display: none;
}
#addPermissionModal .modal-header .btn-close,
#editPermissionModal .modal-header .btn-close {
opacity: 0.7;
}
#addPermissionModal .modal-header .btn-close:hover,
#editPermissionModal .modal-header .btn-close:hover {
opacity: 1;
}
#addPermissionModal .modal-body,
#editPermissionModal .modal-body {
padding: 16px !important;
}
#transferModal .report-children-modal-content {
padding: inherit;
}
#transferModal .report-info-header {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 10px 12px;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 12px;
}
#transferModal .report-info-item {
display: flex;
align-items: center;
gap: 6px;
}
#transferModal .report-info-label {
font-size: 12px;
color: #888;
}
#transferModal .report-info-value {
font-size: 13px;
font-weight: 600;
color: #333;
}
#transferModal .report-children-modal-content .col-md-6 {
padding: 0 8px;
}
#transferModal .report-children-modal-content .col-md-6:first-child {
padding-left: 0;
}
#transferModal .report-children-modal-content .col-md-6:last-child {
padding-right: 0;
}
#transferModal .panel {
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 0;
background: #fff;
}
#transferModal .panel-primary {
border-color: #4CAF50;
}
#transferModal .panel-primary .panel-header {
background: #4CAF50;
color: white;
}
#transferModal .panel-secondary {
border-color: #78909c;
}
#transferModal .panel-secondary .panel-header {
background: #78909c;
color: white;
}
#transferModal .panel-header {
padding: 8px 12px;
border-radius: 7px 7px 0 0;
}
#transferModal .panel-title {
margin: 0;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 0;
background-color: #f9fafc;
color: #f9fafc;
padding:0;
}
#transferModal .panel-primary .panel-title {
background-color: #4CAF50;
}
#transferModal .panel-secondary .panel-title {
background-color: #78909c;
}
#transferModal .panel-title .badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
background: rgba(255,255,255,0.25);
color: white;
font-weight: 500;
}
#transferModal .panel-body {
padding: 12px;
}
#transferModal .children-search {
margin-bottom: 10px;
}
#transferModal .children-search input {
border-radius: 6px;
padding: 6px 10px;
font-size: 13px;
border: 1px solid #ddd;
}
#transferModal .children-list {
max-height: calc(70vh - 120px);
min-height: 300px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
}
#transferModal .children-list::-webkit-scrollbar {
width: 6px;
}
#transferModal .children-list::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
#transferModal .children-list::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
#transferModal .children-list::-webkit-scrollbar-thumb:hover {
background: #a1a1a1;
}
#transferModal .child-item {
display: flex;
align-items: center;
padding: 24px 12px;
border: 0;
border-radius: 8px;
margin-bottom: 8px;
background: #fafafa;
transition: all 0.2s ease;
gap: 10px;
height: 48px;
}
#transferModal .child-item:hover {
background: #fff;
border-color: #ddd;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
#transferModal .child-info {
display: flex;
align-items: center;
flex: 1;
gap: 10px;
}
#transferModal .child-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
overflow: visible;
position: relative;
}
#transferModal .child-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
#transferModal .child-avatar.male {
background: linear-gradient(135deg, #64B5F6, #42A5F5);
color: white;
}
#transferModal .child-avatar.female {
background: linear-gradient(135deg, #F48FB1, #EC407A);
color: white;
}
#transferModal .child-number {
position: absolute;
top: -2px;
left: -2px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #9ACD32;
color: white;
font-size: 9px;
font-weight: 400;
z-index: 10;
}
#transferModal .child-details {
flex: 1;
min-width: 0;
}
#transferModal .child-name {
font-weight: 500;
font-size: 13px;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#transferModal .child-meta {
font-size: 11px;
color: #888;
}
#transferModal .add-child-btn,
#transferModal .remove-child-btn {
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s ease;
flex-shrink: 0;
}
#transferModal .add-child-btn:hover {
background: #4CAF50;
border-color: #4CAF50;
color: white;
transform: scale(1.1);
}
#transferModal .remove-child-btn:hover {
background: #f44336;
border-color: #f44336;
color: white;
transform: scale(1.1);
}
#transferModal .empty-state {
padding: 30px 20px;
}
#transferModal .empty-state i {
display: block;
margin-bottom: 10px;
}
/* Анимация перемещения */
#transferModal .child-item.moving {
animation: moveOut 0.4s ease forwards;
overflow: hidden;
}
@keyframes moveOut {
0% {
opacity: 1;
transform: scale(1);
background-color: #fafafa;
}
100% {
opacity: 0;
transform: scale(0.9);
background-color: #ffebee;
}
}
/* Зелёная анимация - добавление в отчёт */
#transferModal .child-item.moving-in-green {
animation: moveInGreen 2s ease-out forwards;
}
@keyframes moveInGreen {
0% {
opacity: 0;
transform: scale(0.9);
background-color: #e8f5e9;
box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
}
15% {
opacity: 1;
transform: scale(1.02);
background-color: #c8e6c9;
box-shadow: 0 0 25px rgba(76, 175, 80, 0.6);
}
30% {
transform: scale(1);
background-color: #a5d6a7;
box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
}
100% {
opacity: 1;
transform: scale(1);
background-color: #fafafa;
box-shadow: none;
}
}
/* Красная анимация - удаление из отчёта */
#transferModal .child-item.moving-in-red {
animation: moveInRed 2s ease-out forwards;
}
@keyframes moveInRed {
0% {
opacity: 0;
transform: scale(0.9);
background-color: #ffebee;
box-shadow: 0 0 20px rgba(244, 67, 54, 0.5);
}
15% {
opacity: 1;
transform: scale(1.02);
background-color: #ffcdd2;
box-shadow: 0 0 25px rgba(244, 67, 54, 0.6);
}
30% {
transform: scale(1);
background-color: #ef9a9a;
box-shadow: 0 0 20px rgba(244, 67, 54, 0.4);
}
100% {
opacity: 1;
transform: scale(1);
background-color: #fafafa;
box-shadow: none;
}
}
/* Предотвращаем горизонтальный скролл при анимации */
#transferModal .report-children-modal-content {
overflow: hidden;
}
#transferModal .panel-body {
overflow: hidden;
}
/* ===================================
Password Strength Indicator
=================================== */
.password-strength-container {
width: 100%;
}
.password-strength-bar {
height: 6px;
background: #e9ecef;
border-radius: 3px;
overflow: hidden;
margin-bottom: 5px;
}
.password-strength-fill {
height: 100%;
width: 0%;
border-radius: 3px;
transition: all 0.3s ease;
}
.password-strength-text {
font-size: 12px;
font-weight: 500;
min-height: 16px;
}
.strength-weak { background: linear-gradient(90deg, #dc3545, #e74c3c); }
.strength-fair { background: linear-gradient(90deg, #fd7e14, #f39c12); }
.strength-good { background: linear-gradient(90deg, #ffc107, #f1c40f); }
.strength-strong { background: linear-gradient(90deg, #28a745, #27ae60); }
.strength-very-strong { background: linear-gradient(90deg, #20c997, #1abc9c); }
.text-weak { color: #dc3545; }
.text-fair { color: #fd7e14; }
.text-good { color: #ffc107; }
.text-strong { color: #28a745; }
.text-very-strong { color: #20c997; }
/* Change Password Form Styles */
#change-password-form .form-group {
width: 100% !important;
max-width: 100% !important;
}
#change-password-form .password-input {
width: 100% !important;
box-sizing: border-box;
}
#change-password-form .input-wrapper {
position: relative;
width: 100%;
}
#change-password-form .input-container {
width: 100%;
}
#change-password-form .field-firsttimepasswordform-newpassword,
#change-password-form .field-firsttimepasswordform-newpasswordrepeat {
width: 100% !important;
max-width: 100% !important;
}
/* ===================================
Email Verification Page
=================================== */
.email-verification-page {
min-height: 100vh;
display: flex;
align-items: center;
padding: 40px 0;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.email-verification-page .card {
border: none;
border-radius: 12px;
overflow: hidden;
}
.email-verification-page .card-header {
padding: 20px;
border: none;
}
.email-verification-page .card-body {
padding: 30px;
}
.email-verification-page .email-display {
font-size: 16px;
color: #333;
}
/* Timer Styles */
.email-verification-page .timer-container {
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 20px;
}
.email-verification-page .timer-value {
font-size: 24px;
font-family: 'Courier New', monospace;
}
.email-verification-page .timer-label {
color: #6c757d;
}
/* Code Input Styles */
.email-verification-page .code-input {
font-size: 28px;
letter-spacing: 10px;
font-family: 'Courier New', monospace;
font-weight: bold;
padding: 15px;
}
.email-verification-page .code-input::placeholder {
color: #ccc;
letter-spacing: 5px;
}
/* Success Icon Animation */
.email-verification-page .success-icon i {
animation: pulse 1.5s ease-in-out;
}
@keyframes pulse {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}
/* Responsive */
@media (max-width: 576px) {
.email-verification-page {
padding: 20px 15px;
}
.email-verification-page .card-body {
padding: 20px;
}
.email-verification-page .code-input {
font-size: 22px;
letter-spacing: 6px;
}
}
/* ===================================
Email Verification Banner
=================================== */
.email-verification-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
padding: 12px 20px;
background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
color: white;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.email-verification-banner .banner-content {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}
.email-verification-banner .banner-text {
font-size: 14px;
}
.email-verification-banner .banner-text strong {
font-size: 15px;
}
.email-verification-banner .btn-verify {
background: white;
color: #ff5722;
border: none;
padding: 6px 16px;
border-radius: 4px;
font-weight: 600;
transition: all 0.2s;
}
.email-verification-banner .btn-verify:hover {
background: #fff3e0;
transform: translateY(-1px);
}
.email-verification-banner .btn-close-banner {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
opacity: 0.8;
}
.email-verification-banner .btn-close-banner:hover {
opacity: 1;
}
/* Body offset when banner is shown */
body.has-verification-banner {
padding-top: 52px;
}
body.has-verification-banner .header,
body.has-verification-banner .navbar-fixed-top {
top: 52px;
}
/* ==========================================================================
Word Document Preview Styles
Used in: dismiss-bulk, transfer-bulk, restore, reenroll, change-personal-data
========================================================================== */
.word-document {
background: #e8e8e8;
padding: 20px;
margin-top: 10px;
display: flex;
justify-content: center;
}
.word-page {
background: white;
width: 210mm;
min-height: 297mm;
max-width: 100%;
margin: 0 auto;
padding: 15mm 20mm;
font-family: "Times New Roman", serif;
font-size: 12pt;
line-height: 1.3;
color: #000;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
box-sizing: border-box;
}
.word-page,
.word-page *,
.word-page input,
.word-page select,
.word-page option,
.word-page p,
.word-page div,
.word-page span {
font-family: "Times New Roman", serif !important;
font-size: 12pt;
}
.order-org-header {
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
.order-divider {
border-bottom: 1px solid #000;
margin: 10px 0 20px;
}
.order-type {
text-align: center;
margin: 20px 0 15px;
}
.order-date-number {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.order-title {
text-align: center;
margin: 20px 0;
}
.order-body {
text-align: justify;
}
.order-body p {
margin: 0 0 5px;
text-indent: 1cm;
}
.order-body p.first-para {
text-indent: 1cm;
}
.children-list-order {
margin: 5px 0 5px 0;
}
.children-list-order p {
margin: 0;
text-indent: 0;
}
.order-input {
border: none;
border-bottom: 1px solid #000;
padding: 0 2px;
background: transparent;
}
.order-input:focus {
outline: none;
background: #fffde7;
}
.order-input-noborder {
border: none;
padding: 0 2px;
background: transparent;
}
.order-input-noborder:focus {
outline: none;
background: #fffde7;
}
.order-select {
border: none;
border-bottom: 1px solid #000;
padding: 0 2px;
background: transparent;
}
.order-select:focus {
outline: none;
background: #fffde7;
}
.order-signature {
margin-top: 30px;
}
.order-signature p {
text-indent: 0;
}
.order-signature-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.order-signer-position {
flex-shrink: 0;
}
.order-signer-name {
text-align: right;
}
.current-data-block {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
}
@media (max-width: 800px) {
.word-page {
width: 100%;
min-height: auto;
padding: 10mm;
}
}
/* Order Document Mobile Styles */
@media (max-width: 768px) {
.order-document-widget {
margin: 0 -10px;
}
.order-document-widget .nav-tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
margin-bottom: 0;
}
.order-document-widget .nav-link {
padding: 8px 16px;
font-size: 13px;
white-space: nowrap;
}
.word-document {
padding: 10px;
background: #f0f0f0;
}
.word-page {
width: 100%;
min-height: auto;
padding: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.word-page,
.word-page *,
.word-page input,
.word-page p,
.word-page div,
.word-page span {
font-size: 11pt !important;
}
.order-org-header {
font-size: 12pt !important;
text-align: center;
padding: 0 5px;
}
.order-type {
font-size: 13pt !important;
}
.order-title {
font-size: 12pt !important;
padding: 10px 0;
}
.order-date-number {
flex-direction: column;
gap: 5px;
align-items: flex-start;
}
.order-date-number span {
display: block;
}
.order-body {
padding: 10px 0;
}
.order-body p {
margin-bottom: 8px;
text-indent: 20px !important;
}
.order-signature {
margin-top: 20px;
}
.order-signature-row {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.order-signer-position,
.order-signer-name {
text-align: left;
}
/* Order inputs on mobile */
.order-input-medium {
width: 140px;
}
.order-input-basis {
width: 100%;
max-width: 250px;
}
/* Children list in order */
.children-list-order {
margin-left: 10px !important;
}
.children-list-order p {
text-indent: 0 !important;
margin-bottom: 5px;
}
}
/* ========================================
Order Document - Date Picker Styles
======================================== */
.order-date-picker {
width: 24px;
height: 24px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
position: relative;
top: 2px;
margin-left: 4px;
}
.order-date-picker::-webkit-calendar-picker-indicator {
width: 20px;
height: 20px;
cursor: pointer;
opacity: 0.6;
}
.order-date-picker::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
.order-date-text {
cursor: pointer;
}
/* Order input widths */
.order-input-date {
width: 100px;
}
.order-input-short {
width: 80px;
}
.order-input-number {
width: 50px;
}
.order-input-medium {
width: 180px;
}
.order-input-basis {
width: 300px;
}
/* Children list in orders - margin */
.children-list-order.ml-20 {
margin-left: 20px;
}
/* Order list item without text-indent */
.order-list-item {
text-indent: 0 !important;
margin-left: 1cm;
}
/* Order signature block */
.order-signature-block {
margin-top: 30px;
border-top: 1px dashed #999;
padding-top: 10px;
}
.order-signature-block p {
text-indent: 0;
}
/* ========================================
Orders History Modal Styles
======================================== */
.order-modal-header {
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
color: white;
border-radius: 16px 16px 0 0;
padding: 12px;
border-bottom: none;
}
.order-modal-header .modal-title {
color: white;
font-size: 20px;
font-weight: 600;
}
.order-modal-header .modal-title i {
margin-right: 10px;
}
.modern-modal-body {
padding: 0;
}
#viewOrderModal .modal-dialog {
max-height: calc(100vh - 40px);
}
#viewOrderModal .modern-modal-body {
padding: 20px;
max-height: calc(100vh - 200px);
overflow-y: auto;
}
#editOrderModal .modal-dialog {
max-height: calc(100vh - 40px);
}
#editOrderModal .modern-modal-body {
padding: 20px;
max-height: calc(100vh - 200px);
overflow-y: auto;
}
/* ========================================
Form Controls - Width Utilities
======================================== */
.form-control-w-400 {
max-width: 400px;
}
.form-control-w-500 {
max-width: 500px;
}
/* Scrollable table container */
.table-scroll-container {
max-height: 200px;
overflow-y: auto;
}
/* ========================================
Tutorial Widget Styles
======================================== */
.tutorial-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
pointer-events: none;
}
.tutorial-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
pointer-events: auto;
}
.tutorial-highlight-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.tutorial-highlight {
position: absolute;
box-shadow: 0 0 0 4px #007bff, 0 0 0 9999px rgba(0, 0, 0, 0.5);
border-radius: 4px;
pointer-events: auto;
z-index: 10001;
animation: tutorial-pulse 2s infinite;
}
@keyframes tutorial-pulse {
0% { box-shadow: 0 0 0 4px #007bff, 0 0 0 9999px rgba(0, 0, 0, 0.5); }
50% { box-shadow: 0 0 0 8px rgba(0, 123, 255, 0.5), 0 0 0 9999px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0 0 0 4px #007bff, 0 0 0 9999px rgba(0, 0, 0, 0.5); }
}
.tutorial-tooltip {
position: absolute;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
padding: 16px;
max-width: 320px;
min-width: 250px;
pointer-events: auto;
z-index: 10002;
}
.tutorial-tooltip-arrow {
position: absolute;
width: 12px;
height: 12px;
background: #fff;
transform: rotate(45deg);
}
.tutorial-tooltip-arrow.top { bottom: -6px; left: 50%; margin-left: -6px; }
.tutorial-tooltip-arrow.bottom { top: -6px; left: 50%; margin-left: -6px; }
.tutorial-tooltip-arrow.left { right: -6px; top: 50%; margin-top: -6px; }
.tutorial-tooltip-arrow.right { left: -6px; top: 50%; margin-top: -6px; }
.tutorial-tooltip-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}
.tutorial-tooltip-title {
font-weight: 600;
font-size: 14px;
color: #333;
}
.tutorial-tooltip-counter {
font-size: 12px;
color: #888;
}
.tutorial-tooltip-body {
font-size: 13px;
color: #666;
line-height: 1.5;
margin-bottom: 12px;
}
.tutorial-tooltip-footer {
display: flex;
justify-content: space-between;
gap: 8px;
}
.tutorial-tooltip-footer .btn {
flex: 1;
}
/* ============================================
ID Card Tooltip Styles
============================================ */
/* ID Card Tooltip Container */
.user-profile-wrapper {
position: relative;
display: inline-block;
}
.id-card-tooltip {
position: absolute;
top: 100%;
right: 0;
margin-top: 10px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px) scale(0.95);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10000;
pointer-events: none;
}
.id-card-tooltip.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* ID Card Design - European Style */
.id-card {
width: 340px;
background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
overflow: hidden;
font-family: 'Segoe UI', system-ui, sans-serif;
}
/* Header with gradient band */
.id-card-header {
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 50%, #1e3a5f 100%);
padding: 0;
height: 8px;
position: relative;
}
.id-card-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #00ec9e 0%, #00b7ff 33%, #00b7ff 33%, #00b7ff 66%, #00b7ff 66%);
}
.id-card-flag {
display: none;
}
/* Body with photo and info */
.id-card-body {
display: flex;
padding: 16px;
gap: 16px;
background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);
}
.id-card-photo {
flex-shrink: 0;
width: 80px;
height: 100px;
border-radius: 6px;
overflow: hidden;
border: 2px solid #dee2e6;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
background: #fff;
}
.id-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.id-card-info {
flex: 1;
min-width: 0;
line-height: 22px;
margin-top: -7px;
}
.id-card-field {
margin-bottom: 0;
}
.id-card-field:last-child {
margin-bottom: 0;
}
.id-card-label {
display: block;
font-size: 8px;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0;
}
.id-card-value {
display: block;
font-size: 12px;
color: #212529;
font-weight: 600;
line-height: 1.1;
word-break: break-word;
}
.id-card-org {
font-size: 11px;
font-weight: 500;
}
/* Footer with ID and security elements */
.id-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
border-top: 1px solid #dee2e6;
}
.id-card-username {
font-size: 11px;
color: #495057;
font-family: 'Courier New', monospace;
}
.id-card-lang-switch {
display: flex;
gap: 2px;
background: #e0e0e0;
border-radius: 4px;
padding: 2px;
}
.id-card-lang-btn {
padding: 3px 8px;
font-size: 10px;
font-weight: 600;
color: #6c757d;
background: transparent;
border-radius: 3px;
text-decoration: none;
transition: all 0.15s;
}
.id-card-lang-btn:hover {
color: #495057;
text-decoration: none;
}
.id-card-lang-btn.active {
background: #fff;
color: #495057;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* ID Card Menu */
.id-card-menu {
border-top: 1px solid #dee2e6;
}
/* Training Mode Toggle */
.id-card-menu-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
font-size: 13px;
color: #495057;
cursor: pointer;
transition: background 0.15s;
border-bottom: 1px solid #f0f0f0;
}
.id-card-menu-toggle:hover {
background: #f8f9fa;
}
.id-card-menu-toggle-label {
display: flex;
align-items: center;
gap: 10px;
}
.id-card-menu-toggle-label i {
width: 16px;
text-align: center;
color: #6c757d;
}
.id-card-menu-toggle-switch {
position: relative;
width: 36px;
height: 20px;
background: #ccc;
border-radius: 10px;
transition: background 0.2s;
}
.id-card-menu-toggle-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.id-card-menu-toggle.active .id-card-menu-toggle-switch {
background: #28a745;
}
.id-card-menu-toggle.active .id-card-menu-toggle-switch::after {
transform: translateX(16px);
}
.id-card-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 16px;
color: #495057;
text-decoration: none;
font-size: 13px;
transition: background 0.15s, color 0.15s;
border-bottom: 1px solid #f0f0f0;
}
.id-card-menu-item:last-child {
border-bottom: none;
}
.id-card-menu-item:hover {
background: #f8f9fa;
color: #212529;
text-decoration: none;
}
.id-card-menu-item i {
width: 16px;
text-align: center;
color: #6c757d;
}
.id-card-menu-item:hover i {
color: #495057;
}
.id-card-logout {
color: #dc3545;
}
.id-card-logout i {
color: #dc3545;
}
.id-card-logout:hover {
background: #fff5f5;
color: #c82333;
}
.id-card-menu-badge {
margin-left: auto;
background: #dc3545;
color: #fff;
font-size: 11px;
font-weight: 600;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
}
.id-card-menu-divider {
height: 1px;
background: #e9ecef;
margin: 6px 0;
}
/* Arrow pointer */
.id-card-tooltip::before {
content: '';
position: absolute;
top: -8px;
right: 16px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #f8f9fa;
}
/* Hologram effect overlay */
.id-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
transparent 0%,
rgba(255,255,255,0.1) 25%,
transparent 50%,
rgba(255,255,255,0.05) 75%,
transparent 100%
);
pointer-events: none;
}
/* Security pattern */
.id-card-body::before {
content: '';
position: absolute;
top: 50px;
right: 10px;
width: 60px;
height: 60px;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 2px,
rgba(0,0,0,0.02) 2px,
rgba(0,0,0,0.02) 4px
);
border-radius: 50%;
opacity: 0.5;
}
/* ========================================
Organization List - Список организаций
======================================== */
/* Стили для порядкового номера организации */
.organization-number {
display: flex;
align-items: flex-start;
justify-content: center;
margin-right: -18px;
margin-top: 3px;
min-width: 24px;
}
.organization-item .number-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: #f8f9fa;
color: #333;
font-weight: 600;
font-size: 10px;
border-radius: 50%;
border: 1.5px solid #dee2e6;
transition: all 0.2s ease;
position: absolute;
top: 5px;
left: 5px;
}
.organization-item:hover .number-badge {
background: #e9ecef;
border-color: #ced4da;
color: #000;
}
/* Контейнер действий организации */
.organization-actions {
display: flex;
align-items: center;
gap: 8px;
}
/* ========================================
Contract 2026 - Договор 2026
======================================== */
/* Кнопка toggle договора в списке организаций */
.contract-toggle-btn {
cursor: pointer;
}
.contract-toggle-btn:hover {
background-color: #6c757d;
color: white;
}
.contract-toggle-btn.active {
background-color: #28a745;
color: white;
}
.contract-toggle-btn.active:hover {
background-color: #218838;
color: white;
}
/* Баннер напоминания о договорах */
.contract-reminder-banner {
background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
color: white;
padding: 45px 20px 10px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.contract-reminder-banner .container {
max-width: 1200px;
margin: 0 auto;
}
.contract-reminder-banner .banner-content {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.contract-reminder-banner .banner-icon {
font-size: 24px;
}
.contract-reminder-banner .banner-text {
text-align: left;
}
.contract-reminder-banner .banner-title {
font-size: 15px;
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.contract-reminder-banner .banner-subtitle {
font-size: 14px;
opacity: 0.95;
}
/* Язык обучения (преподавания) - выбор */
.teaching-language-select {
display: flex;
gap: 8px;
margin: 8px 0;
flex-wrap: wrap;
}
.teaching-lang-item {
padding: 8px 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
font-size: 13px;
transition: all 0.2s ease;
background: #f5f5f5;
color: #333;
border: 2px solid transparent;
}
.teaching-lang-item:hover {
background: #e8e8e8;
}
.teaching-lang-item.active {
color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
border-color: transparent;
}
.lang-kazakh.active,
.lang-russian.active {
background: #4caf50;
}
.lang-other.active {
background: #ff9800;
}
.lang-mixed.active {
background: #9c27b0;
}
/* Трудовая деятельность (Work Experience) */
.work-experience-container {
margin-bottom: 10px;
}
.work-experience-table {
font-size: 13px;
margin-bottom: 10px;
}
.work-experience-table th {
font-weight: 500;
font-size: 12px;
color: #666;
white-space: nowrap;
}
.work-experience-table td {
vertical-align: middle;
}
.pedagogical-experience-summary {
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
padding: 10px 15px;
border-radius: 8px;
margin-bottom: 15px;
font-size: 14px;
border-left: 4px solid #4caf50;
}
#add-work-exp-btn {
margin-top: 5px;
}
#workExpModal .modal-dialog {
margin-top: 80px !important;
}
/* Ставка в модалке */
.rate-select-modal {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.rate-item-m {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 12px;
transition: all 0.2s ease;
background: transparent;
color: #333;
}
.rate-item-m:hover {
background: rgba(0,0,0,0.05);
}
.rate-item-m.active {
color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.rate-item-m.rate-red.active {
background: #ef5350;
}
.rate-item-m.rate-orange.active {
background: #ff9800;
}
.rate-item-m.rate-green.active {
background: #4caf50;
}
/* Язык обучения в модалке */
.teaching-lang-select-modal {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.lang-item-m {
padding: 8px 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
font-size: 13px;
transition: all 0.2s ease;
background: #f5f5f5;
color: #333;
border: 2px solid transparent;
}
.lang-item-m:hover {
background: #e0e0e0;
}
.lang-item-m.active {
color: #fff;
border-color: transparent;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.lang-item-m.lang-kazakh.active,
.lang-item-m.lang-russian.active {
background: #4caf50;
}
.lang-item-m.lang-other.active {
background: #ff9800;
}
.lang-item-m.lang-mixed.active {
background: #9c27b0;
}
/* ========================================
Notification Component Styles
======================================== */
.notification-dropdown-container {
position: relative;
display: inline-flex;
align-items: center
}
.notification-trigger-btn {
position: relative;
background: transparent;
border: none;
padding: 8px;
cursor: pointer;
color: #666;
font-size: 18px;
transition: color 0.2s ease;
border-radius: 50%
}
.notification-trigger-btn:hover {
color: #333;
background-color: rgba(0,0,0,0.05)
}
.notification-badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 10px;
font-weight: 600;
color: #fff;
background-color: #e53935;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
animation: notification-pulse 2s infinite
}
@keyframes notification-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.notification-dropdown {
position: absolute;
top: 100%;
right: 0;
width: 360px;
max-height: 480px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
z-index: 1050;
display: flex;
flex-direction: column;
overflow: hidden;
margin-top: 8px
}
.notification-dropdown-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #eee;
background: #f8f9fa
}
.notification-dropdown-title {
font-weight: 600;
font-size: 14px;
color: #333
}
.notification-mark-all-btn {
background: none;
border: none;
color: #1976d2;
font-size: 12px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: background-color 0.2s
}
.notification-mark-all-btn:hover {
background-color: rgba(25,118,210,0.1)
}
.notification-dropdown-body {
flex: 1;
overflow-y: auto;
max-height: 360px
}
.notification-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: #999;
font-size: 14px
}
.notification-loading i {
margin-right: 8px
}
.notification-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: #999
}
.notification-empty i {
font-size: 36px;
margin-bottom: 12px;
opacity: 0.5
}
.notification-empty p {
margin: 0;
font-size: 14px
}
.notification-list {
padding: 0
}
.notification-item {
display: flex;
align-items: flex-start;
padding: 12px 16px;
cursor: pointer;
transition: background-color 0.2s;
border-bottom: 1px solid #f0f0f0
}
.notification-item:hover {
background-color: #f8f9fa
}
.notification-item:last-child {
border-bottom: none
}
.notification-item-unread {
background-color: #e3f2fd
}
.notification-item-unread:hover {
background-color: #bbdefb
}
.notification-item-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0
}
.notification-item-icon i {
font-size: 14px
}
.notification-item-icon .text-warning { color: #ff9800 }
.notification-item-icon .text-danger { color: #f44336 }
.notification-item-icon .text-success { color: #4caf50 }
.notification-item-icon .text-info { color: #2196f3 }
.notification-item-content {
flex: 1;
min-width: 0
}
.notification-item-title {
font-weight: 600;
font-size: 13px;
color: #333;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.notification-item-message {
font-size: 12px;
color: #666;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.notification-item-time {
font-size: 11px;
color: #999;
margin-top: 4px
}
.notification-item-delete {
background: none;
border: none;
color: #999;
padding: 4px;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s, color 0.2s;
margin-left: 8px;
flex-shrink: 0
}
.notification-item:hover .notification-item-delete {
opacity: 1
}
.notification-item-delete:hover {
color: #f44336
}
.notification-dropdown-footer {
padding: 10px 16px;
border-top: 1px solid #eee;
background: #f8f9fa;
text-align: center
}
.notification-view-all {
color: #1976d2;
font-size: 13px;
text-decoration: none;
font-weight: 500
}
.notification-view-all:hover {
text-decoration: underline
}
.notification-employee-link {
color: #1976d2;
font-weight: 500;
text-decoration: none;
cursor: pointer
}
.notification-employee-link:hover {
text-decoration: underline;
color: #1565c0
}
.notification-item-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px
}
.notification-item-goto {
color: #1976d2;
font-size: 11px;
font-weight: 500;
text-decoration: none;
cursor: pointer
}
.notification-item-goto:hover {
text-decoration: underline;
color: #1565c0
}
.notification-item-goto i {
font-size: 10px
}
@media (max-width: 576px) {
.notification-dropdown {
position: fixed;
top: 60px;
right: 10px;
left: 10px;
width: auto;
max-height: calc(100vh - 80px)
}
}
/* ===== EMPLOYEE REPORTS STYLES ===== */
/* Вкладки По детям / По сотрудникам */
.reports-tabs {
display: flex;
gap: 4px;
margin-bottom: 20px;
background: var(--light-bg);
padding: 4px;
border-radius: var(--radius);
width: fit-content;
}
.reports-tab {
padding: 10px 24px;
border-radius: var(--radius-sm);
color: var(--text-color);
text-decoration: none;
font-weight: 500;
transition: var(--group-transition);
display: flex;
align-items: center;
gap: 8px;
}
.reports-tab:hover {
background: rgba(255, 255, 255, 0.7);
color: var(--text-color);
text-decoration: none;
}
.reports-tab.active {
background: var(--white);
color: var(--reports-primary);
box-shadow: var(--shadow);
}
/* Контейнер отчетов по сотрудникам */
.employee-reports-container {
position: relative;
display: flex;
gap: 20px;
min-height: calc(100vh - 200px);
}
/* Боковая панель - развернутая двигает контент */
.reports-sidebar {
width: 240px;
min-width: 240px;
flex-shrink: 0;
max-height: calc(100vh - 120px);
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
transition: all 0.25s ease;
overflow: hidden;
border: 1px solid #eee;
position: sticky;
top: 80px;
align-self: flex-start;
}
/* Свернутая - поверх контента, не занимает место */
.reports-sidebar.collapsed {
position: absolute;
left: 0;
top: 0;
width: auto;
min-width: auto;
max-height: none;
border-radius: 10px;
box-shadow: 0 2px 12px rgba(0,0,0,0.12);
z-index: 50;
}
.reports-sidebar.collapsed .sidebar-content,
.reports-sidebar.collapsed .sidebar-header h5 {
display: none;
}
.reports-sidebar.collapsed .sidebar-header {
justify-content: center;
border-bottom: none;
padding: 6px;
}
.reports-sidebar.collapsed .sidebar-toggle {
width: 36px;
height: 36px;
border-radius: 10px;
background: #f5f5f5;
color: #666;
font-size: 14px;
}
.reports-sidebar.collapsed .sidebar-toggle:hover {
background: #eee;
color: #43a047;
}
.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid #f0f0f0;
}
.sidebar-header h5 {
margin: 0;
font-size: 10px;
font-weight: 600;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 5px;
}
.sidebar-toggle {
background: #f5f5f5;
border: none;
width: 24px;
height: 24px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #888;
font-size: 11px;
transition: all 0.15s ease;
}
.sidebar-toggle:hover {
background: #eee;
color: #555;
}
.sidebar-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
/* Список отчетов */
.reports-list {
flex: 1;
overflow-y: auto;
padding: 4px;
font-size: 11px;
}
/* Кастомный скроллбар */
.reports-list::-webkit-scrollbar {
width: 3px;
}
.reports-list::-webkit-scrollbar-track {
background: transparent;
}
.reports-list::-webkit-scrollbar-thumb {
background: #a5d6a7;
border-radius: 3px;
}
.report-item {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 6px;
margin-bottom: 2px;
transition: all 0.15s ease;
line-height: 1.3;
cursor: pointer;
font-size: 11px;
color: #555;
border-left: 3px solid transparent;
}
.report-item:hover {
background: rgba(46, 125, 50, 0.06);
}
.report-item i {
font-size: 11px;
color: #999;
width: 16px;
text-align: center;
}
.report-item .report-name {
flex: 1;
}
.report-item.active {
background: rgba(46, 125, 50, 0.1);
border-left-color: #43a047;
}
.report-item.active .report-name {
color: #2e7d32;
font-weight: 600;
}
.report-item.active i {
color: #43a047;
}
.report-item:hover i {
color: #43a047;
}
.report-item:hover .report-name {
color: #2e7d32;
}
.btn-export-single {
background: none;
border: none;
width: 0;
height: 20px;
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
cursor: pointer;
color: #999;
transition: all 0.2s ease;
border-radius: 4px;
margin-left: auto;
}
.report-item:hover .btn-export-single {
width: 22px;
color: #43a047;
}
.btn-export-single:hover {
background: rgba(46, 125, 50, 0.12);
color: #2e7d32;
transform: scale(1.1);
}
.sidebar-footer {
padding: 6px 8px;
border-top: 1px solid #f0f0f0;
}
.btn-select-mode {
font-size: 10px;
padding: 7px 12px;
border-radius: 6px;
background: transparent;
border: 1px dashed #ccc;
color: #888;
width: 100%;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-select-mode:hover {
border-color: #43a047;
color: #43a047;
background: rgba(46, 125, 50, 0.04);
}
.btn-select-mode i {
margin-right: 4px;
}
/* Панель режима выбора */
.select-mode-panel {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px;
background: #f8f8f8;
border-bottom: 1px solid #eee;
gap: 8px;
}
.btn-cancel-select {
font-size: 10px;
padding: 5px 10px;
border-radius: 5px;
background: #fff;
border: 1px solid #ddd;
color: #666;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-cancel-select:hover {
background: #f5f5f5;
border-color: #ccc;
}
.btn-cancel-select i {
margin-right: 3px;
}
.btn-download-selected {
font-size: 10px;
padding: 5px 12px;
border-radius: 5px;
background: #43a047;
border: none;
color: #fff;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-download-selected:hover:not(:disabled) {
background: #388e3c;
}
.btn-download-selected:disabled {
background: #ccc;
cursor: not-allowed;
}
.btn-download-selected i {
margin-right: 3px;
}
/* Выбранный элемент в режиме выбора */
.report-item.selected {
background: rgba(46, 125, 50, 0.12);
border-left: 3px solid #43a047;
padding-left: 5px;
}
.report-item.selected .report-name {
color: #2e7d32;
font-weight: 500;
}
.report-item.selected i {
color: #43a047;
}
/* Основной контент */
.reports-main-content {
flex: 1;
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 24px;
overflow: auto;
position: relative;
min-height: 300px;
}
/* Кнопка экспорта */
.btn-export {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: #f5f5f5;
color: #666;
text-decoration: none;
transition: all 0.15s ease;
border: 1px solid #e8e8e8;
}
.btn-export:hover {
background: #43a047;
color: #fff;
border-color: #43a047;
text-decoration: none;
}
.btn-export i {
font-size: 14px;
}
/* Лоадер */
.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.loading-spinner {
width: 36px;
height: 36px;
border: 3px solid #e8e8e8;
border-top-color: #43a047;
border-radius: 50%;
animation: reportSpin 0.7s linear infinite;
}
@keyframes reportSpin {
to { transform: rotate(360deg); }
}
/* Пагинация */
.pagination-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px;
border-top: 1px solid #f0f0f0;
font-size: 12px;
}
.pagination-info {
font-weight: 500;
color: #555;
}
.pagination-total {
color: #888;
font-size: 11px;
}
.report-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
}
.report-title {
display: flex;
align-items: center;
gap: 12px;
}
.report-title i {
font-size: 24px;
color: var(--reports-primary);
}
.report-title h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: var(--text-color);
}
.report-actions {
display: flex;
align-items: center;
gap: 12px;
}
.report-actions .search-form {
width: 280px;
}
/* Предупреждения */
.warnings-block {
margin-bottom: 20px;
}
.warnings-block .alert {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
padding: 12px 16px;
font-size: 13px;
}
/* KPI карточки */
.kpi-cards {
display: flex;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.kpi-card {
flex: 1;
min-width: 180px;
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: var(--white);
border-radius: var(--radius);
border: 1px solid var(--border-color);
transition: var(--group-transition);
}
.kpi-card:hover {
box-shadow: var(--reports-shadow-lg);
transform: translateY(-2px);
}
.kpi-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.kpi-primary .kpi-icon {
background: rgba(22, 163, 74, 0.1);
color: var(--reports-primary);
}
.kpi-success .kpi-icon {
background: rgba(76, 175, 80, 0.1);
color: var(--reports-success);
}
.kpi-info .kpi-icon {
background: rgba(33, 150, 243, 0.1);
color: var(--reports-info);
}
.kpi-warning .kpi-icon {
background: rgba(255, 193, 7, 0.1);
color: #f59e0b;
}
.kpi-danger .kpi-icon {
background: rgba(239, 68, 68, 0.1);
color: var(--reports-danger);
}
.kpi-content {
flex: 1;
}
.kpi-value {
font-size: 24px;
font-weight: 700;
color: var(--text-color);
line-height: 1.2;
}
.kpi-label {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
/* Таблица отчета */
.report-table-container {
overflow-x: auto;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
}
.report-table {
margin: 0;
font-size: 13px;
}
.report-table thead th {
background: var(--light-bg);
font-weight: 600;
white-space: nowrap;
padding: 12px 16px;
border-bottom: 2px solid var(--border-color);
}
.report-table tbody td {
padding: 10px 16px;
vertical-align: middle;
}
.report-table tbody tr:hover {
background: var(--light-bg);
}
/* Сводная таблица */
.summary-table tbody td {
text-align: center;
font-weight: 500;
font-size: 16px;
}
.summary-table thead th {
text-align: center;
}
/* Детальная таблица */
.detailed-table .fio-cell {
position: sticky;
left: 0;
background: var(--white);
z-index: 1;
min-width: 200px;
}
.detailed-table tbody tr:hover .fio-cell {
background: var(--light-bg);
}
.employee-link {
color: var(--reports-primary);
text-decoration: none;
font-weight: 500;
}
.employee-link:hover {
text-decoration: underline;
}
/* Пустые данные */
.empty-data {
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
}
.empty-data i {
color: var(--border-color);
margin-bottom: 16px;
}
.empty-data p {
margin: 0;
font-size: 14px;
}
/* Адаптив */
@media (max-width: 992px) {
.employee-reports-container {
flex-direction: column;
}
.reports-sidebar {
width: 100%;
min-width: 100%;
max-height: 300px;
position: relative;
top: 0;
}
.reports-sidebar.collapsed {
position: relative;
width: 100%;
min-width: 100%;
max-height: 60px;
}
.report-header {
flex-direction: column;
align-items: flex-start;
}
.report-actions {
width: 100%;
flex-wrap: wrap;
}
.report-actions .search-form {
width: 100%;
}
.kpi-cards {
flex-direction: column;
}
.kpi-card {
min-width: 100%;
}
}
/* =========================================
Analytics Tabs Styles
========================================= */
.analytics-tabs {
margin-bottom: 0;
border-bottom: 2px solid #3c8dbc;
background: #f8f9fa;
padding: 10px 10px 0;
border-radius: 4px 4px 0 0;
}
.analytics-tabs > li {
margin-bottom: -2px;
}
.analytics-tabs > li > a {
border-radius: 4px 4px 0 0;
border: 1px solid transparent;
color: #555;
font-weight: 500;
padding: 12px 20px;
transition: all 0.2s ease;
}
.analytics-tabs > li > a:hover {
background-color: rgba(60, 141, 188, 0.1);
border-color: transparent;
color: #3c8dbc;
}
.analytics-tabs > li.active > a,
.analytics-tabs > li.active > a:hover,
.analytics-tabs > li.active > a:focus {
background-color: #fff;
border: 2px solid #3c8dbc;
border-bottom-color: #fff;
color: #3c8dbc;
font-weight: 600;
}
.analytics-tabs > li > a i {
margin-right: 8px;
}
/* Tab Content Containers */
.tab-content-sabidamu,
.tab-content-monitoring,
.tab-content-ai {
background: #fff;
border: 1px solid #e8e8e8;
border-top: none;
padding: 20px;
border-radius: 0 0 8px 8px;
}
/* AI Chat Container */
.tab-content-ai {
padding: 0;
overflow: hidden;
}
.tab-content-ai .row {
margin: 0;
}
.tab-content-ai .col-md-3 {
padding: 0;
border-right: 1px solid #eee;
}
.tab-content-ai .col-md-9 {
padding: 0;
}
/* Sidebar */
.tab-content-ai .box.box-solid {
background: #fafbfc;
border: none;
margin: 0;
box-shadow: none;
}
.tab-content-ai .box-header.with-border {
background: #fff;
border-bottom: 1px solid #eee;
padding: 15px;
}
.tab-content-ai .box-header .box-title {
color: #333;
font-size: 14px;
font-weight: 600;
}
.tab-content-ai .box-header .box-title i {
color: #3c8dbc;
margin-right: 8px;
}
.tab-content-ai .box-header .btn-box-tool {
color: #fff;
background: #3c8dbc;
border-radius: 4px;
padding: 4px 10px;
}
.tab-content-ai .box-header .btn-box-tool:hover {
background: #357ca5;
}
/* Conversations List */
#conversations-list {
margin: 0;
padding: 10px;
}
#conversations-list > li {
margin-bottom: 4px;
}
#conversations-list > li > a {
border-radius: 6px;
padding: 10px 12px;
color: #555;
background: #fff;
border: 1px solid #eee;
display: block;
transition: all 0.2s;
}
#conversations-list > li > a:hover {
background: #f0f7ff;
border-color: #3c8dbc;
}
#conversations-list > li > a strong {
display: block;
font-size: 13px;
color: #333;
margin-bottom: 3px;
}
#conversations-list > li > a small {
color: #999 !important;
font-size: 11px;
}
#conversations-list > li.text-center {
color: #999;
padding: 20px;
font-size: 13px;
}
/* Main Chat Box */
.tab-content-ai .box.box-primary {
background: #fff;
border: none;
margin: 0;
box-shadow: none;
}
.tab-content-ai .box.box-primary > .box-header {
background: #fff;
border-bottom: 1px solid #eee;
padding: 15px 20px;
}
.tab-content-ai .box.box-primary .box-title {
color: #333;
font-size: 16px;
font-weight: 600;
}
.tab-content-ai .box.box-primary .box-title i {
color: #3c8dbc;
margin-right: 8px;
}
.tab-content-ai .badge.bg-blue {
background: #3c8dbc;
font-size: 11px;
padding: 4px 10px;
border-radius: 12px;
}
.tab-content-ai #share-conversation-btn {
color: #3c8dbc;
margin-left: 10px;
}
/* Chat Messages */
.tab-content-ai .direct-chat-messages {
background: #f8f9fa;
padding: 20px;
height: 420px !important;
overflow-y: auto;
}
.tab-content-ai .direct-chat-msg {
margin-bottom: 16px;
display: flex;
align-items: flex-start;
}
.tab-content-ai .direct-chat-msg.right {
flex-direction: row-reverse;
}
.tab-content-ai .direct-chat-img {
width: 36px;
height: 36px;
border-radius: 50%;
background: #3c8dbc;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
flex-shrink: 0;
}
.tab-content-ai .direct-chat-msg.right .direct-chat-img {
background: #667eea;
}
.tab-content-ai .direct-chat-text {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 12px;
padding: 12px 16px;
margin-left: 10px;
max-width: 75%;
color: #333;
font-size: 14px;
line-height: 1.6;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.tab-content-ai .direct-chat-msg.right .direct-chat-text {
background: #e8f4fd;
border-color: #c5e1f5;
margin-left: 0;
margin-right: 10px;
}
.tab-content-ai .direct-chat-text p {
margin-bottom: 8px;
}
.tab-content-ai .direct-chat-text p:last-child {
margin-bottom: 0;
}
.tab-content-ai .direct-chat-text pre {
background: #2d3748;
color: #e2e8f0;
padding: 12px;
border-radius: 6px;
overflow-x: auto;
margin: 10px 0;
font-size: 12px;
}
.tab-content-ai .direct-chat-text code {
background: #f1f5f9;
color: #e11d48;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.85em;
}
.tab-content-ai .direct-chat-text pre code {
background: transparent;
color: inherit;
padding: 0;
}
.tab-content-ai .direct-chat-text ul,
.tab-content-ai .direct-chat-text ol {
padding-left: 18px;
margin: 8px 0;
}
.tab-content-ai .direct-chat-text li {
margin-bottom: 4px;
}
.tab-content-ai .direct-chat-text h1,
.tab-content-ai .direct-chat-text h2,
.tab-content-ai .direct-chat-text h3 {
color: #1a1a1a;
margin: 12px 0 8px;
font-weight: 600;
}
.tab-content-ai .direct-chat-text h1 { font-size: 1.3em; }
.tab-content-ai .direct-chat-text h2 { font-size: 1.15em; }
.tab-content-ai .direct-chat-text h3 { font-size: 1.05em; }
.tab-content-ai .direct-chat-text table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
font-size: 13px;
}
.tab-content-ai .direct-chat-text table th,
.tab-content-ai .direct-chat-text table td {
padding: 8px 10px;
border: 1px solid #ddd;
text-align: left;
}
.tab-content-ai .direct-chat-text table th {
background: #f5f5f5;
font-weight: 600;
}
.tab-content-ai .direct-chat-infos {
display: none;
}
/* Chat Footer */
.tab-content-ai .box-footer {
background: #fff;
border-top: 1px solid #eee;
padding: 15px 20px;
}
.tab-content-ai .box-footer label {
color: #666;
font-size: 13px;
margin-bottom: 8px;
}
.tab-content-ai .btn-group label.btn {
background: #fff;
border: 1px solid #ddd;
color: #555;
padding: 6px 14px;
font-size: 13px;
border-radius: 6px !important;
margin-right: 6px;
}
.tab-content-ai .btn-group label.btn:hover {
background: #f5f5f5;
}
.tab-content-ai .btn-group label.btn.active {
background: #3c8dbc;
border-color: #3c8dbc;
color: #fff;
}
.tab-content-ai .input-group {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.tab-content-ai .input-group:focus-within {
border-color: #3c8dbc;
box-shadow: 0 0 0 2px rgba(60,141,188,0.1);
}
.tab-content-ai #ai-prompt {
border: none;
padding: 12px 15px;
font-size: 14px;
resize: none;
}
.tab-content-ai #ai-prompt:focus {
box-shadow: none;
outline: none;
}
.tab-content-ai .input-group-btn .btn {
background: #3c8dbc;
border: none;
color: #fff;
padding: 12px 20px;
font-size: 14px;
height: auto !important;
}
.tab-content-ai .input-group-btn .btn:hover {
background: #357ca5;
}
.tab-content-ai #prompt-counter {
color: #999;
font-size: 12px;
margin-top: 6px;
}
/* Welcome Screen */
.tab-content-ai .ai-chat-welcome {
text-align: center;
padding: 50px 20px;
}
.tab-content-ai .ai-chat-welcome i.fa-robot {
font-size: 48px;
color: #3c8dbc;
margin-bottom: 20px;
}
.tab-content-ai .ai-chat-welcome h3 {
color: #333;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.tab-content-ai .ai-chat-welcome p {
color: #666;
font-size: 14px;
max-width: 350px;
margin: 0 auto;
}
/* Error & Loading */
.tab-content-ai .direct-chat-text.error-message {
background: #fef2f2 !important;
border-color: #fecaca !important;
color: #dc2626 !important;
}
.typing-indicator {
display: inline-flex;
gap: 3px;
margin-right: 6px;
}
.typing-indicator span {
width: 5px;
height: 5px;
background: #3c8dbc;
border-radius: 50%;
animation: typing 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.3s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.15s; }
@keyframes typing {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
40% { transform: scale(1); opacity: 1; }
}
.tab-content-ai .loading-message {
display: flex;
align-items: center;
color: #666;
}
.tab-content-ai .direct-chat-img i {
font-size: 14px;
}
/* =====================================================
AI Analytics Page - Минималистичный интерфейс
===================================================== */
.ai-analytics-page {
display: flex;
height: calc(100vh - 150px);
min-height: 600px;
background: #f7f7f8;
border-radius: 8px;
overflow: hidden;
}
/* Боковая панель */
.ai-sidebar {
width: 280px;
background: #171717;
color: #fff;
display: flex;
flex-direction: column;
transition: width 0.3s ease;
}
.ai-sidebar.collapsed {
width: 60px;
}
.ai-sidebar-header {
padding: 12px;
display: flex;
gap: 8px;
border-bottom: 1px solid #2d2d2d;
}
.ai-new-btn {
flex: 1;
background: transparent;
border: 1px solid #4d4d4d;
color: #fff;
padding: 10px 16px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s;
}
.ai-new-btn:hover {
background: #2d2d2d;
}
.ai-sidebar.collapsed .ai-new-btn span,
.ai-sidebar.collapsed .ai-new-btn i.fa-plus + span {
display: none;
}
.ai-sidebar-toggle {
background: transparent;
border: 1px solid #4d4d4d;
color: #fff;
width: 40px;
height: 40px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.ai-sidebar-toggle:hover {
background: #2d2d2d;
}
.ai-sidebar-title {
padding: 16px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #8e8e8e;
display: flex;
align-items: center;
gap: 8px;
}
.ai-sidebar.collapsed .ai-sidebar-title {
justify-content: center;
}
.ai-sidebar.collapsed .ai-sidebar-title span {
display: none;
}
.ai-history-list {
flex: 1;
overflow-y: auto;
padding: 0 8px;
}
.ai-history-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
border-radius: 8px;
color: #ececec;
text-decoration: none;
margin-bottom: 4px;
transition: background 0.2s;
}
.ai-history-item:hover {
background: #2d2d2d;
color: #fff;
}
.ai-history-item.active {
background: #343541;
}
.ai-history-item-icon {
width: 32px;
height: 32px;
background: #3c8dbc;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ai-history-item-content {
flex: 1;
min-width: 0;
}
.ai-history-item-title {
font-size: 14px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
}
.ai-history-item-meta {
display: flex;
gap: 8px;
font-size: 12px;
color: #8e8e8e;
}
.ai-sidebar.collapsed .ai-history-item-content {
display: none;
}
.ai-history-empty {
text-align: center;
padding: 40px 20px;
color: #8e8e8e;
}
.ai-history-empty i {
font-size: 32px;
margin-bottom: 12px;
display: block;
}
/* Основная область */
.ai-main-area {
flex: 1;
display: flex;
flex-direction: column;
background: #fff;
}
/* Экран приветствия */
.ai-welcome-screen {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
}
.ai-welcome-content {
max-width: 680px;
width: 100%;
text-align: center;
}
.ai-logo {
margin-bottom: 24px;
}
.ai-logo-img {
width: 80px;
height: 80px;
object-fit: contain;
}
.ai-welcome-title {
font-size: 32px;
font-weight: 600;
color: #171717;
margin: 0 0 12px;
}
.ai-welcome-subtitle {
font-size: 16px;
color: #6b6b6b;
margin: 0 0 32px;
}
/* Выбор источника данных */
.ai-source-selector {
display: flex;
gap: 16px;
justify-content: center;
margin-bottom: 40px;
}
.ai-source-btn {
background: #fff;
border: 2px solid #e5e5e5;
border-radius: 12px;
padding: 20px 24px;
cursor: pointer;
transition: all 0.2s;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 180px;
}
.ai-source-btn:hover {
border-color: #3c8dbc;
background: #f8fbfd;
}
.ai-source-btn.active {
border-color: #3c8dbc;
background: #e8f4fc;
}
.ai-source-btn i {
font-size: 28px;
color: #3c8dbc;
}
.ai-source-btn span {
font-size: 15px;
font-weight: 600;
color: #171717;
}
.ai-source-btn small {
font-size: 12px;
color: #8e8e8e;
}
/* Примеры запросов */
.ai-suggestions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
max-width: 560px;
margin: 0 auto;
}
.ai-suggestion-item {
background: #f7f7f8;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 16px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
}
.ai-suggestion-item:hover {
background: #fff;
border-color: #3c8dbc;
box-shadow: 0 2px 8px rgba(60, 141, 188, 0.15);
}
.ai-suggestion-item i {
font-size: 18px;
color: #3c8dbc;
flex-shrink: 0;
}
.ai-suggestion-item span {
font-size: 14px;
color: #171717;
}
/* Поле ввода */
.ai-input-container {
padding: 0 40px 40px;
width: 100%;
max-width: 760px;
margin: 0 auto;
}
.ai-input-form {
width: 100%;
}
.ai-input-wrapper {
display: flex;
align-items: flex-end;
background: #f7f7f8;
border: 1px solid #e5e5e5;
border-radius: 24px;
padding: 8px 8px 8px 20px;
transition: all 0.2s;
}
.ai-input-wrapper:focus-within {
border-color: #3c8dbc;
box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.1);
background: #fff;
}
.ai-input {
flex: 1;
border: none;
background: transparent;
font-size: 16px;
line-height: 1.5;
resize: none;
max-height: 200px;
padding: 8px 0;
outline: none;
}
.ai-input::placeholder {
color: #8e8e8e;
}
.ai-send-btn {
width: 40px;
height: 40px;
background: #171717;
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
}
.ai-send-btn:hover {
background: #3c8dbc;
}
.ai-send-btn:disabled {
background: #d1d1d1;
cursor: not-allowed;
}
.ai-input-footer {
display: flex;
justify-content: space-between;
padding: 8px 20px 0;
font-size: 12px;
color: #8e8e8e;
}
/* Экран результатов */
.ai-result-screen {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.ai-result-header {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 24px;
border-bottom: 1px solid #e5e5e5;
background: #fff;
}
.ai-back-btn {
background: transparent;
border: 1px solid #e5e5e5;
color: #171717;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.ai-back-btn:hover {
background: #f7f7f8;
}
.ai-result-title {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
}
.ai-type-badge {
background: #3c8dbc;
color: #fff;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.ai-result-title h2 {
font-size: 18px;
font-weight: 600;
color: #171717;
margin: 0;
}
.ai-result-actions {
display: flex;
gap: 8px;
}
.ai-action-btn {
width: 40px;
height: 40px;
background: #f7f7f8;
border: 1px solid #e5e5e5;
border-radius: 8px;
color: #6b6b6b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.ai-action-btn:hover {
background: #e5e5e5;
color: #171717;
}
.ai-result-content {
flex: 1;
overflow-y: auto;
padding: 24px;
}
/* Контейнер для дашборда */
.ai-dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.ai-dashboard-card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ai-dashboard-card-title {
font-size: 14px;
font-weight: 600;
color: #6b6b6b;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.ai-dashboard-card-title i {
color: #3c8dbc;
}
/* AI мнение в дашборде */
.ai-opinion-card {
grid-column: 1 / -1;
background: linear-gradient(135deg, #f8fbfd 0%, #fff 100%);
border-left: 4px solid #3c8dbc;
}
.ai-opinion-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.ai-opinion-avatar {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #3c8dbc 0%, #5dade2 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.ai-opinion-header h4 {
font-size: 16px;
font-weight: 600;
color: #171717;
margin: 0;
}
.ai-opinion-content {
font-size: 14px;
line-height: 1.7;
color: #4a4a4a;
}
/* Поле для дополнительных вопросов */
.ai-followup-container {
padding: 16px 24px;
border-top: 1px solid #e5e5e5;
background: #f7f7f8;
}
.ai-followup-container .ai-input-wrapper {
background: #fff;
}
/* =====================================================
AI Dashboard - Стили для результатов анализа
===================================================== */
.ai-dashboard-wrapper {
padding: 20px;
}
.dashboard-section {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.dashboard-section.summary-section {
background: linear-gradient(135deg, #f8fbfd 0%, #fff 100%);
border-left: 4px solid #3c8dbc;
}
.dashboard-section.recommendations-section {
background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
border-left: 4px solid #22c55e;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #171717;
margin: 0 0 16px;
display: flex;
align-items: center;
gap: 10px;
}
.section-title i {
color: #3c8dbc;
font-size: 18px;
}
.section-content {
font-size: 14px;
line-height: 1.7;
color: #4a4a4a;
}
.ai-insight {
background: #f8f9fa;
border-radius: 8px;
padding: 16px;
border-left: 3px solid #3c8dbc;
}
.insight-text {
margin: 0;
font-size: 15px;
line-height: 1.6;
}
.chart-container {
background: #fafbfc;
border-radius: 8px;
padding: 20px;
margin: 16px 0;
min-height: 300px;
}
.chart-container canvas {
max-height: 350px !important;
}
.chart-insight {
font-size: 13px;
color: #6b6b6b;
font-style: italic;
margin: 12px 0 0;
padding-left: 12px;
border-left: 2px solid #e5e5e5;
}
/* Рекомендации */
.recommendations-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.recommendation-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
transition: all 0.2s;
}
.recommendation-item:hover {
border-color: #22c55e;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
}
.rec-icon {
font-size: 24px;
flex-shrink: 0;
}
.rec-content {
flex: 1;
}
.rec-content strong {
display: block;
color: #171717;
margin-bottom: 4px;
}
.rec-content p {
margin: 0;
font-size: 13px;
color: #6b6b6b;
}
/* Grid для графиков */
.charts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
}
.charts-grid .dashboard-section {
margin-bottom: 0;
}
/* KPI карточки */
.kpi-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.kpi-card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 20px;
text-align: center;
}
.kpi-value {
font-size: 32px;
font-weight: 700;
color: #3c8dbc;
margin-bottom: 8px;
}
.kpi-label {
font-size: 13px;
color: #6b6b6b;
}
.kpi-card.success .kpi-value { color: #22c55e; }
.kpi-card.warning .kpi-value { color: #f59e0b; }
.kpi-card.danger .kpi-value { color: #ef4444; }
/* Таблицы в дашборде */
.dashboard-table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
}
.dashboard-table th,
.dashboard-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #e5e5e5;
}
.dashboard-table th {
background: #f8f9fa;
font-weight: 600;
color: #171717;
font-size: 13px;
}
.dashboard-table td {
font-size: 14px;
color: #4a4a4a;
}
.dashboard-table tr:hover td {
background: #f8fbfd;
}
/* Прогресс бары */
.progress-bar-wrapper {
margin: 8px 0;
}
.progress-bar-label {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
font-size: 13px;
}
.progress-bar {
height: 8px;
background: #e5e5e5;
border-radius: 4px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 0.5s ease;
}
.progress-bar-fill.blue { background: #3c8dbc; }
.progress-bar-fill.green { background: #22c55e; }
.progress-bar-fill.yellow { background: #f59e0b; }
.progress-bar-fill.red { background: #ef4444; }
/* Адаптивность */
@media (max-width: 992px) {
.ai-sidebar {
width: 60px;
}
.ai-sidebar .ai-new-btn span,
.ai-sidebar .ai-sidebar-title,
.ai-sidebar .ai-history-item-content {
display: none;
}
.ai-suggestions {
grid-template-columns: 1fr;
}
.ai-source-selector {
flex-direction: column;
align-items: center;
}
.ai-source-btn {
width: 100%;
max-width: 300px;
}
}
@media (max-width: 768px) {
.ai-analytics-page {
flex-direction: column;
height: auto;
min-height: calc(100vh - 150px);
}
.ai-sidebar {
width: 100%;
height: auto;
max-height: 200px;
order: 2;
}
.ai-main-area {
order: 1;
}
.ai-welcome-screen {
padding: 20px;
}
.ai-input-container {
padding: 0 20px 20px;
}
}
/* Monitoring Cards Info Boxes */
.tab-content-monitoring .info-box {
min-height: 90px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.tab-content-monitoring .info-box-icon {
height: 90px;
width: 90px;
line-height: 90px;
}
.tab-content-monitoring .info-box-content {
padding: 10px;
}
.tab-content-monitoring .info-box-number {
font-size: 24px;
font-weight: 700;
}
/* Progress groups in Monitoring */
.tab-content-monitoring .progress-group {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
.tab-content-monitoring .progress-group:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.tab-content-monitoring .progress-text {
display: block;
margin-bottom: 5px;
line-height: 1.4;
}
/* Share Conversation Page */
.conversation-share-page {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.conversation-share-header {
background: #3c8dbc;
color: #fff;
padding: 25px 30px;
border-radius: 8px 8px 0 0;
}
.conversation-share-header h1 {
margin: 0 0 8px;
font-size: 20px;
font-weight: 600;
}
.conversation-share-header h1 i {
margin-right: 8px;
}
.conversation-share-header .meta {
opacity: 0.9;
font-size: 13px;
}
.conversation-share-body {
background: #fff;
border: 1px solid #e8e8e8;
border-top: none;
padding: 20px;
border-radius: 0 0 8px 8px;
}
.conversation-share-message {
margin-bottom: 16px;
padding: 14px 16px;
border-radius: 10px;
border: 1px solid transparent;
}
.conversation-share-message.user {
background: #e8f4fd;
border-color: #c5e1f5;
margin-left: 40px;
}
.conversation-share-message.assistant {
background: #f8f9fa;
border-color: #eee;
margin-right: 40px;
}
.conversation-share-message .role {
font-weight: 600;
margin-bottom: 8px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.conversation-share-message .role i {
margin-right: 6px;
}
.conversation-share-message.user .role {
color: #3c8dbc;
}
.conversation-share-message.assistant .role {
color: #28a745;
}
.conversation-share-message .content {
font-size: 14px;
line-height: 1.6;
color: #333;
}
.conversation-share-footer {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #eee;
text-align: center;
}
.conversation-share-footer .btn {
margin: 0 5px;
}
@media (max-width: 768px) {
.analytics-tabs > li > a {
padding: 10px 12px;
font-size: 13px;
}
.analytics-tabs > li > a i {
display: none;
}
.direct-chat-text {
max-width: 90%;
}
.conversation-share-message.user,
.conversation-share-message.assistant {
margin-left: 0;
margin-right: 0;
}
}
/* ============================================================
Education Module (стиль как в profile)
============================================================ */
.education-module {
padding: 0;
}
/* Header card — как profile-header-card */
.education-header-card {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
gap: 16px;
}
.education-header-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: #eef2ff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.education-header-icon i {
font-size: 22px;
color: #667eea;
}
.education-header-card h2 {
margin: 0 0 2px 0;
font-size: 20px;
font-weight: 600;
color: #333;
}
.education-subtitle {
margin: 0;
color: #666;
font-size: 13px;
}
/* Tabs container — как profile-tabs-container */
.education-tabs-container {
background: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.education-tabs-container .custom-tabs-nav {
list-style: none;
padding: 0;
margin: 0 0 15px 0;
display: flex;
border-bottom: 2px solid #e0e0e0;
}
.education-tabs-container .tab-nav-item {
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
color: #666;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all 0.3s ease;
}
.education-tabs-container .tab-nav-item i {
margin-right: 6px;
}
.education-tabs-container .tab-nav-item .badge {
margin-left: 6px;
font-size: 11px;
padding: 2px 6px;
border-radius: 10px;
background: #FF9800;
color: #fff;
}
.education-tabs-container .tab-nav-item:hover {
color: #667eea;
}
.education-tabs-container .tab-nav-item.active {
color: #667eea;
border-bottom: 2px solid #667eea;
}
.education-tabs-container .tab-pane {
display: none;
}
.education-tabs-container .tab-pane.active {
display: block;
}
/* Sub tabs — pills */
.education-sub-tabs {
display: flex;
gap: 8px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.sub-tab-item {
padding: 6px 16px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
color: #666;
background: #f5f5f5;
cursor: pointer;
transition: all 0.2s ease;
}
.sub-tab-item:hover {
background: #e8e8e8;
color: #333;
}
.sub-tab-item.active {
background: #667eea;
color: #fff;
}
.sub-tab-pane {
display: none;
}
.sub-tab-pane.active {
display: block;
}
/* Подвкладки методиста */
.sub-tab-item-review {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
cursor: pointer;
border-bottom: 2px solid transparent;
color: #666;
transition: all 0.2s;
}
.sub-tab-item-review:hover {
color: #333;
background: #f5f5f5;
}
.sub-tab-item-review.active {
color: #667eea;
border-bottom-color: #667eea;
font-weight: 500;
}
.sub-tab-item-review .badge {
font-size: 11px;
padding: 2px 6px;
border-radius: 10px;
}
.sub-tab-item-review .badge-warning {
background: #FF9800;
color: #fff;
}
.sub-tab-item-review .badge-info {
background: #f0ad4e;
color: #fff;
}
.sub-tab-item-review .badge-success {
background: #4CAF50;
color: #fff;
}
.sub-tab-pane-review {
display: none;
}
.sub-tab-pane-review.active {
display: block;
}
/* Статусы иконок в списке */
.report-icon.status-revision {
background: linear-gradient(135deg, #f0ad4e, #ec971f);
color: #fff;
}
.report-icon.status-approved {
background: linear-gradient(135deg, #4CAF50, #45a049);
color: #fff;
}
/* Бейджи статусов */
.status-badge.revision {
background: #fff3cd;
color: #856404;
border: 1px solid #ffc107;
}
.status-badge.approved {
background: #d4edda;
color: #155724;
border: 1px solid #28a745;
}
/* Empty state */
.education-empty-state {
text-align: center;
padding: 50px 20px;
color: #999;
}
.education-empty-state i {
color: #ccc;
margin: 0;
}
.education-empty-state p {
font-size: 14px;
margin-bottom: 16px;
color: #666;
}
/* Plan list — uses global .list-item, .item-avatar, .item-info, .report-icon etc. */
.education-plan-list {
display: flex;
flex-direction: column;
gap: 0;
}
.education-plan-list .list-item {
margin-bottom: 12px;
}
/* Status badges */
.plan-status-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.plan-status-badge.status-draft {
background: #f5f5f5;
color: #666;
}
.plan-status-badge.status-review {
background: #fff3cd;
color: #856404;
}
.plan-status-badge.status-approved {
background: #d4edda;
color: #155724;
}
.plan-status-badge.status-needs-revision {
background: #f8d7da;
color: #721c24;
}
/* Plan status bar */
.plan-status-bar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.plan-import-badge {
font-size: 12px;
color: #999;
}
.plan-import-badge i {
color: #667eea;
margin-right: 4px;
}
/* Plan header card (view page) */
.plan-header-card {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.plan-header-card h3 {
margin: 0 0 12px 0;
font-size: 16px;
font-weight: 600;
color: #333;
line-height: 1.5;
}
.plan-meta p {
margin: 4px 0;
font-size: 13px;
color: #333;
}
.plan-meta p strong {
color: #666;
font-weight: 600;
}
/* Plan table */
/* Plan item rows */
.plan-item-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
margin-bottom: 10px;
background: #f9fafb;
border: 1px solid #e8e8e8;
border-radius: 8px;
transition: border-color 0.2s ease;
}
.plan-item-row:hover {
border-color: #667eea;
}
.plan-item-subject {
flex: 0 0 250px;
min-width: 200px;
}
.plan-item-tasks {
flex: 1;
min-width: 0;
}
.plan-item-actions {
flex: 0 0 auto;
padding-top: 4px;
}
.plan-tasks-text {
font-size: 13px;
line-height: 1.6;
color: #333;
}
@media (max-width: 768px) {
.plan-item-row {
flex-direction: column;
padding: 10px;
}
.plan-item-row > select {
flex: none !important;
width: 100% !important;
height: auto !important;
min-height: 38px !important;
}
.plan-item-row > div[class^="task-editor"] {
flex: none !important;
width: 100% !important;
min-height: auto !important;
}
.plan-item-subject {
flex: none;
width: 100%;
}
}
/* Plan actions */
.plan-actions {
margin-top: 15px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.methodist-actions {
background: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
flex-direction: column;
}
.methodist-actions h5 {
margin: 0 0 10px 0;
font-size: 14px;
font-weight: 600;
color: #333;
}
/* Plan logs */
.plan-logs {
margin-top: 15px;
background: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.plan-logs h5 {
margin: 0 0 12px 0;
font-size: 14px;
font-weight: 600;
color: #333;
}
.plan-logs h5 i {
color: #667eea;
margin-right: 6px;
}
.plan-logs-list {
display: flex;
flex-direction: column;
gap: 0;
}
.plan-log-item {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
padding: 8px 0;
border-bottom: 1px solid #f4f4f4;
font-size: 12px;
}
.plan-log-item:last-child {
border-bottom: none;
}
.log-action {
font-weight: 600;
color: #333;
}
.log-employee {
color: #667eea;
}
.log-date {
color: #999;
font-size: 11px;
}
.log-comment {
width: 100%;
margin-top: 4px;
padding: 6px 10px;
background: #f5f5f5;
border-radius: 4px;
font-size: 12px;
color: #555;
}
/* Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.education-modal {
background: white;
border-radius: 8px;
width: 100%;
max-width: 560px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.education-modal .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
}
.education-modal .modal-header h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #333;
}
.education-modal .modal-close {
background: none;
border: none;
font-size: 22px;
color: #999;
cursor: pointer;
padding: 0;
line-height: 1;
}
.education-modal .modal-close:hover {
color: #333;
}
.education-modal .modal-body {
padding: 20px;
}
.education-modal .modal-body h5 {
font-size: 14px;
font-weight: 600;
color: #333;
margin: 0 0 10px 0;
}
.education-modal .modal-footer {
padding: 12px 20px;
border-top: 1px solid #f0f0f0;
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* Group select */
.education-group-select {
display: flex;
flex-direction: column;
gap: 6px;
}
.group-option {
padding: 10px 14px;
border: 1px solid #e0e0e0;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.group-option:hover {
background: #f0f4ff;
border-color: #667eea;
}
.group-option.selected {
background: #eef2ff;
border-color: #667eea;
box-shadow: 0 0 0 1px #667eea;
}
.group-option strong {
font-size: 13px;
color: #333;
}
/* Age select */
.education-age-select {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.age-option {
display: flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border: 1px solid #e0e0e0;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 12px;
}
.age-option:hover {
background: #f0f4ff;
}
.age-option input[type="checkbox"] {
accent-color: #667eea;
}
.age-option span {
color: #333;
}
/* Method select */
.education-method-select {
display: flex;
gap: 12px;
}
.method-option {
flex: 1;
text-align: center;
padding: 20px 14px;
border: 1px solid #e0e0e0;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.method-option:hover {
border-color: #667eea;
background: #f0f4ff;
}
.method-option i {
color: #667eea;
margin-bottom: 10px;
}
.method-option strong {
display: block;
font-size: 14px;
margin-bottom: 4px;
color: #333;
}
.method-option p {
margin: 0;
font-size: 12px;
color: #999;
}
/* Loading */
.education-loading {
text-align: center;
padding: 40px 20px;
color: #999;
}
.education-loading i {
color: #667eea;
margin-bottom: 12px;
}
/* Import report */
.import-report-success {
background: #d4edda;
border-radius: 4px;
padding: 12px;
font-size: 13px;
}
.import-report-success ul {
margin: 6px 0;
padding-left: 18px;
}
/* Toast */
.education-toast {
position: fixed;
bottom: 24px;
right: 24px;
padding: 10px 20px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
color: #fff;
z-index: 9999;
animation: educationToastIn 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.education-toast.success {
background: #28a745;
}
.education-toast.error {
background: #dc3545;
}
@keyframes educationToastIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Education View Page */
.edu-view-widget .box {
border-top-color: var(--status-color, #667eea);
}
.edu-view-widget .box-title-icon {
background: var(--status-color, #667eea) !important;
}
.edu-view-widget .box-tools .btn {
margin-left: 5px;
}
.edu-view-widget .box-tools .edu-status-badge + .btn {
margin-left: 10px;
}
.edu-age-cards-view {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.edu-age-card-view {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 14px;
border: 2px solid #e0e0e0;
border-radius: 10px;
background: #fff;
text-align: center;
min-width: 100px;
}
.edu-age-card-view.active {
border-color: var(--age-color, #3c8dbc);
background: #f8fbff;
}
.edu-age-card-view img {
height: 60px;
margin-bottom: 6px;
}
.edu-age-card-view .age-label {
font-size: 11px;
color: #555;
line-height: 1.3;
}
.edu-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: #fff;
background: var(--status-color, #667eea);
}
.edu-meta-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.edu-meta-row {
display: flex;
align-items: baseline;
gap: 8px;
}
.edu-meta-row .meta-label {
font-size: 13px;
color: #888;
flex: 0 0 90px;
}
.edu-meta-row .meta-value {
font-size: 14px;
color: #333;
font-weight: 500;
}
.edu-plan-items {
display: flex;
flex-direction: column;
gap: 12px;
}
.edu-plan-item {
display: flex;
gap: 12px;
padding: 12px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
align-items: flex-start;
}
.edu-plan-item:hover {
border-color: #ccc;
}
.edu-plan-item .subject {
flex: 0 0 260px;
}
.edu-plan-item .subject select,
.edu-plan-item .subject .subject-label {
width: 100%;
}
.edu-plan-item .subject .subject-label {
font-weight: 600;
color: #333;
padding: 6px 0;
}
.edu-plan-item .tasks {
flex: 1;
}
.edu-plan-item .tasks textarea {
min-height: 70px;
}
/* Скрываем textarea когда Summernote инициализирован */
.edu-plan-item .tasks textarea.task-editor + .note-editor ~ textarea.task-editor,
.edu-plan-item .tasks textarea.task-editor[style*="display: none"] {
display: none !important;
}
/* Textarea скрыт самим Summernote, но иногда нужно принудительно */
.edu-plan-item .tasks .note-editor + textarea {
display: none !important;
}
.edu-plan-item .tasks .tasks-text {
color: #555;
line-height: 1.6;
white-space: pre-wrap;
}
.edu-plan-item .actions {
flex: 0 0 auto;
align-self: center;
}
.edu-actions-bar {
display: flex;
gap: 10px;
flex-wrap: wrap;
padding-top: 16px;
border-top: 1px solid #eee;
align-items: center;
}
.edu-actions-bar #dirty-actions,
.edu-actions-bar #clean-actions {
display: flex;
gap: 10px;
align-items: center;
margin-top: 16px;
}
.edu-actions-bar #dirty-actions {
display: none;
}
.edu-actions-bar .btn-delete-draft {
margin-left: 10px;
}
.edu-view-info-import {
margin-top: 12px;
padding: 8px 12px;
background: #e3f2fd;
border-radius: 6px;
font-size: 12px;
}
.edu-view-info-import i {
color: #1976d2;
}
.edu-view-ages-empty {
color: #999;
font-style: italic;
}
.edu-view-subjects-section {
margin-top: 16px;
}
.edu-view-subjects-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.edu-view-add-subject {
margin-top: 12px;
}
/* Комментарий методиста */
.reviewer-comment {
border-radius: 8px;
padding: 16px;
margin: 20px 0;
}
.reviewer-comment.revision {
background: #fff3cd;
border: 1px solid #ffc107;
}
.reviewer-comment.approved {
background: #d4edda;
border: 1px solid #28a745;
}
.reviewer-comment-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.reviewer-comment.revision .reviewer-comment-header {
color: #856404;
}
.reviewer-comment.approved .reviewer-comment-header {
color: #155724;
}
.reviewer-comment-header i {
font-size: 16px;
}
.reviewer-comment-header .reviewer-name {
font-weight: normal;
opacity: 0.8;
}
.reviewer-comment-header .reviewer-date {
margin-left: auto;
font-size: 12px;
opacity: 0.7;
}
.reviewer-comment-text {
color: #333;
line-height: 1.5;
}
.edu-methodist-section {
background: #fffbf0;
border: 1px solid #ffe0a0;
border-radius: 8px;
padding: 16px;
margin-top: 20px;
}
.edu-methodist-section h5 {
margin: 0 0 12px;
color: #996600;
}
.edu-methodist-section textarea {
margin-bottom: 12px;
}
.edu-methodist-actions {
display: flex;
gap: 10px;
}
/* AI Generation Modal */
.ai-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;
justify-content: center;
align-items: center;
}
.ai-modal {
background: #fff;
border-radius: 12px;
width: 90%;
max-width: 700px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.ai-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
}
.ai-modal-header span {
font-size: 18px;
font-weight: 600;
}
.ai-modal-header span i {
margin-right: 8px;
}
.ai-modal-header button {
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s;
}
.ai-modal-header button:hover {
opacity: 1;
}
.ai-modal-body {
padding: 20px;
overflow-y: auto;
flex: 1;
}
.ai-modal-footer {
padding: 16px 20px;
border-top: 1px solid #e0e5ec;
text-align: right;
}
.ai-subject-info {
margin-bottom: 16px;
padding: 12px;
background: #f8f9fa;
border-radius: 8px;
}
.ai-subject-info label {
font-weight: 500;
color: #666;
margin-right: 8px;
}
.ai-subject-info span {
font-weight: 600;
color: #333;
}
.ai-prompt-group {
margin-bottom: 16px;
}
.ai-prompt-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
}
.ai-prompt-group textarea {
resize: vertical;
}
.ai-actions {
margin-bottom: 20px;
}
.ai-loading {
color: #667eea;
font-weight: 500;
}
.ai-loading i {
margin-right: 8px;
}
.ai-variants {
display: flex;
flex-direction: column;
gap: 16px;
}
.ai-variant {
border: 1px solid #e0e5ec;
border-radius: 8px;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-variant:hover {
border-color: #667eea;
box-shadow: 0 4px 12px rgba(102,126,234,0.15);
}
.ai-variant-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: #f8f9fa;
border-bottom: 1px solid #e0e5ec;
}
.ai-variant-num {
font-weight: 600;
color: #667eea;
}
.ai-variant-text {
padding: 14px;
color: #333;
line-height: 1.6;
font-size: 14px;
max-height: 200px;
overflow-y: auto;
}
.btn-ai-generate {
background: #fff !important;
border: 1px solid #ddd !important;
padding: 4px !important;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-ai-generate:hover {
background: #f5f5f5 !important;
border-color: #ccc !important;
}
.btn-ai-generate img {
width: 24px;
object-fit: contain;
}
/* AI Modal - Aidana design */
.ai-modal-header-gray {
background: #f5f5f5 !important;
color: #333 !important;
border-bottom: 1px solid #e0e0e0;
}
.ai-modal-header-gray span {
color: #333;
}
.ai-modal-header-gray button {
color: #666 !important;
}
.ai-modal-header-gray button:hover {
color: #333 !important;
}
.ai-aidana-block {
display: flex;
gap: 16px;
padding: 16px;
background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
border-radius: 12px;
margin-bottom: 20px;
border: 1px solid #e0e5ec;
}
.ai-aidana-avatar {
width: 90px;
flex-shrink: 0;
}
.ai-aidana-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.ai-aidana-name {
font-size: 18px;
font-weight: 700;
color: #333;
}
.ai-aidana-desc {
font-size: 13px;
font-weight: 500;
color: #667eea;
margin-top: 2px;
}
.ai-aidana-greeting {
margin: 10px 0 0;
color: #555;
font-size: 14px;
line-height: 1.5;
}
.ai-variant-disclaimer {
padding: 10px 14px;
background: #fafafa;
border-top: 1px solid #e0e5ec;
font-size: 11px;
color: #888;
display: flex;
align-items: center;
gap: 6px;
}
.ai-variant-disclaimer i {
color: #667eea;
}
/* Task Editor / Tasks Text для просмотра */
.tasks-text {
padding: 10px 12px;
background: #f9f9f9;
border-radius: 4px;
line-height: 1.6;
}
.tasks-text ul {
margin: 0;
padding-left: 20px;
}
.tasks-text li {
margin-bottom: 4px;
}
/* AI Generate Loader */
.ai-generate-loader-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
z-index: 10001;
display: none;
align-items: center;
justify-content: center;
}
.ai-generate-loader-content {
background: #fff;
border-radius: 16px;
padding: 32px 48px;
display: flex;
align-items: center;
gap: 24px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.ai-generate-loader-avatar {
width: 80px;
}
.ai-generate-loader-text {
display: flex;
flex-direction: column;
gap: 8px;
}
.ai-generate-loader-title {
font-size: 20px;
font-weight: 700;
color: #333;
}
.ai-generate-loader-status {
font-size: 14px;
color: #667eea;
font-weight: 500;
}
.ai-generate-loader-dots {
display: flex;
gap: 6px;
}
.ai-generate-loader-dots span {
width: 8px;
height: 8px;
background: #667eea;
border-radius: 50%;
animation: ai-loader-dot 1.4s ease-in-out infinite;
}
.ai-generate-loader-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.ai-generate-loader-dots span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes ai-loader-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes ai-loader-dot {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}
/* History Modal */
.history-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 9999;
justify-content: center;
align-items: center;
}
.history-modal {
background: #fff;
border-radius: 8px;
width: 400px;
max-height: 70vh;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.history-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #eee;
font-weight: 600;
}
.history-modal-header button {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #999;
}
.history-modal-body {
padding: 12px 16px;
overflow-y: auto;
max-height: calc(70vh - 50px);
}
.history-item {
padding: 8px 0;
border-bottom: 1px solid #f5f5f5;
font-size: 13px;
}
.history-item:last-child {
border-bottom: none;
}
.history-item .action {
font-weight: 500;
margin-right: 8px;
}
.history-item .meta {
color: #666;
margin-right: 8px;
}
.history-item .date {
color: #999;
}
.history-item .comment {
margin-top: 4px;
padding: 6px 10px;
background: #f8f8f8;
border-radius: 4px;
color: #666;
}
/* Responsive */
@media (max-width: 768px) {
.education-header-card {
flex-direction: column;
text-align: center;
}
.education-tabs-container .tab-nav-item {
padding: 8px 12px;
font-size: 13px;
}
.education-method-select {
flex-direction: column;
}
.plan-header-card h3 {
font-size: 14px;
}
}
/* Main tabs (Перспективный план / Циклограмма) */
.education-main-tabs {
display: flex;
gap: 24px;
margin-bottom: 16px;
border-bottom: 1px solid #ddd;
}
.education-main-tabs .main-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 4px;
margin-bottom: -1px;
color: #666;
font-size: 14px;
font-weight: 500;
text-decoration: none;
border-bottom: 2px solid transparent;
}
.education-main-tabs .main-tab:hover {
color: #333;
text-decoration: none;
}
.education-main-tabs .main-tab.active {
color: #333;
border-bottom-color: #333;
}
/* Education tab content visibility */
.education-tabs-container .tab-content {
display: none;
}
.education-tabs-container .tab-content.active {
display: block;
}
/* ========================================
CYCLOGRAM STYLES
======================================== */
/* Activity Block */
.activity-block {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 6px;
margin-bottom: 12px;
overflow: hidden;
}
.activity-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
color: #333;
}
.activity-number {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: #e9ecef;
border-radius: 50%;
font-size: 12px;
font-weight: 600;
color: #666;
}
.activity-name {
flex: 1;
font-size: 13px;
font-weight: 500;
color: #495057;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.activity-header .generate-week-btn {
height: 28px;
padding: 2px !important;
}
.activity-header .generate-week-btn img {
width: 20px;
}
.activity-content {
padding: 12px;
}
/* Weekday Tabs */
.weekday-tabs {
display: flex;
gap: 2px;
margin-bottom: 10px;
border-bottom: 1px solid #e5e5e5;
}
.weekday-tab {
flex: 1;
padding: 8px 6px;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font-size: 13px;
font-weight: 500;
color: #666;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.weekday-tab:hover {
color: #333;
background: #f5f5f5;
}
.weekday-tab.active {
color: #333;
border-bottom-color: #333;
}
/* Weekday Content */
.weekday-content {
display: none;
}
.weekday-content.active {
display: block;
}
.activity-textarea {
width: 100%;
min-height: 80px !important;
padding: 12px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
resize: vertical;
transition: border-color 0.2s, box-shadow 0.2s;
}
.activity-textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.activity-textarea::placeholder {
color: #aaa;
}
/* Readonly text */
.activity-text-readonly {
padding: 12px;
background: #f8f9fa;
border-radius: 8px;
min-height: 60px;
line-height: 1.6;
color: #333;
}
/* Copy to all days checkbox */
.copy-all-days {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #eee;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #666;
cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
/* Create Form Section */
.create-form-section {
background: #fff;
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.create-form-section h4 {
margin: 0 0 20px 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.section-header h4 {
margin: 0;
}
.section-actions {
display: flex;
gap: 10px;
}
.form-actions {
display: flex;
gap: 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #eee;
}
/* Header actions for cyclogram view */
.header-actions {
display: flex;
gap: 10px;
align-items: center;
}
/* Save button success animation */
.btn-success-saved {
animation: save-success 0.3s ease;
}
@keyframes save-success {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Cyclogram responsive */
@media (max-width: 768px) {
.activity-header {
flex-wrap: wrap;
}
.activity-name {
order: 3;
width: 100%;
margin-top: 8px;
}
.weekday-tab {
padding: 8px 4px;
font-size: 12px;
}
.activity-textarea {
min-height: 60px;
}
.form-actions {
flex-direction: column;
}
.form-actions .btn {
width: 100%;
}
.header-actions {
margin-top: 12px;
width: 100%;
justify-content: flex-end;
}
}
/* ===== CYCLOGRAM VIEW STYLES ===== */
[v-cloak] { display: none !important; }
.cyclogram-app { }
.cyclogram-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: #fff;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cyclogram-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
.cyclogram-header small { color: #888; font-weight: normal; font-size: 14px; }
.cyclogram-header .header-info { flex: 1; }
.cyclogram-header .header-meta { display: flex; gap: 16px; margin-top: 4px; font-size: 13px; color: #666; align-items: center; flex-wrap: wrap; }
.cyclogram-header .header-actions { display: flex; gap: 8px; }
/* Cyclogram buttons */
.cyclogram-header .btn-save {
padding: 8px 20px;
background: #667eea;
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
}
.cyclogram-header .btn-save:hover { background: #5a6fd6; }
.cyclogram-header .btn-save:disabled { background: #ccc; cursor: not-allowed; }
.cyclogram-header .btn-delete {
padding: 8px 12px;
background: #fff;
color: #e53935;
border: 1px solid #e53935;
border-radius: 6px;
cursor: pointer;
}
.cyclogram-header .btn-delete:hover { background: #e53935; color: #fff; }
.cyclogram-header .btn-export {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 16px;
background: #fff;
color: #2196F3;
border: 1px solid #2196F3;
border-radius: 6px;
cursor: pointer;
margin-right: 8px;
font-size: 16px;
text-decoration: none;
}
.cyclogram-header .btn-export:hover { background: #2196F3; color: #fff; text-decoration: none; }
.cyclogram-header .btn-history {
padding: 8px 12px;
background: #fff;
color: #6c757d;
border: 1px solid #6c757d;
border-radius: 6px;
cursor: pointer;
margin-right: 8px;
font-size: 13px;
}
.cyclogram-header .btn-history:hover { background: #6c757d; color: #fff; }
.cyclogram-status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
color: #fff;
}
/* Ссылка на связанный документ */
.header-meta .related-link {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
color: #fff;
background: #17a2b8;
text-decoration: none;
transition: all 0.2s ease;
}
.header-meta .related-link:hover {
background: #138496;
color: #fff;
text-decoration: none;
transform: translateY(-1px);
}
.header-meta .related-link i {
font-size: 11px;
}
/* Секция методиста циклограммы */
.cyclogram-methodist-section {
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 16px;
margin-top: 20px;
}
.cyclogram-methodist-section h5 {
margin: 0 0 12px 0;
font-size: 14px;
font-weight: 600;
color: #333;
}
.cyclogram-methodist-section h5 i { margin-right: 6px; color: #667eea; }
.cyclogram-methodist-section textarea {
width: 100%;
margin-bottom: 12px;
border: 1px solid #ddd;
border-radius: 6px;
padding: 10px;
font-size: 14px;
}
.cyclogram-methodist-actions {
display: flex;
gap: 10px;
}
.cyclogram-methodist-actions .btn {
padding: 8px 16px;
font-size: 14px;
border-radius: 6px;
}
/* Кнопка отправки на проверку */
.btn-send-review {
padding: 8px 16px;
background: #667eea;
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-send-review:hover { background: #5a6fd6; }
.btn-send-review:disabled { background: #ccc; cursor: not-allowed; }
/* Панель действий внизу циклограммы */
.cyclogram-actions-bar {
background: #fff;
border-radius: 8px;
padding: 16px 20px;
padding-right: 150px; /* Space for fixed save button */
margin-top: 20px;
margin-bottom: 70px; /* Space below for fixed button */
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
display: flex;
justify-content: flex-end;
gap: 10px;
}
.week-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 2px solid #eee; }
.week-tab {
padding: 10px 20px;
background: none;
border: none;
font-size: 14px;
font-weight: 500;
color: #666;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
}
.week-tab:hover { color: #333; }
.week-tab.active { color: #667eea; border-bottom-color: #667eea; }
.week-tab.complete { color: #4CAF50; }
.week-tab.complete::after { content: ' ✓'; }
.cyclogram-table-wrap {
background: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
overflow: visible;
position: relative;
}
.cyclogram-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.cyclogram-table th {
background: #f8f9fa;
padding: 12px 8px;
text-align: center;
font-weight: 600;
color: #555;
border-bottom: 2px solid #eee;
}
.cyclogram-table th:first-child { text-align: left; padding-left: 12px; width: 200px; }
.cyclogram-table th:last-child { width: 50px; }
.cyclogram-table th.day-col { width: calc((100% - 250px) / 5); }
.cyclogram-table td {
padding: 4px;
border-bottom: 1px solid #f0f0f0;
vertical-align: top;
}
.cyclogram-table td.day-cell { width: calc((100% - 250px) / 5); }
.cyclogram-table tr:hover { background: #fafbfc; }
.cyclogram-table tr:nth-child(even) { background: #fdfdfd; }
.activity-name {
padding: 8px;
font-weight: 500;
color: #333;
font-size: 12px;
line-height: 1.4;
width: 250px;
max-width: 250px;
}
.activity-num {
min-width: 22px; width: 22px; height: 22px;
background: #667eea;
color: #fff;
border-radius: 50%;
display: inline-block;
text-align: center;
line-height: 22px;
font-size: 11px;
font-weight: 600;
margin-right: 8px;
}
.activity-text {
display: inline-block;
width: calc(100% - 60px);
word-wrap: break-word;
white-space: normal;
vertical-align: middle;
}
.btn-add-general {
width: 20px; height: 20px;
border: none;
border-radius: 50%;
background: #e8f5e9;
color: #4CAF50;
cursor: pointer;
display: inline-block;
text-align: center;
line-height: 20px;
font-size: 10px;
margin-left: 8px;
transition: all 0.15s;
opacity: 0.7;
float: right;
}
.btn-add-general:hover { background: #4CAF50; color: #fff; opacity: 1; }
.activity-name:hover .btn-add-general { opacity: 1; }
.cell-general {
background: #e3f2fd;
color: #1565c0;
padding: 4px 6px;
margin-bottom: 4px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
border-left: 2px solid #1976d2;
}
/* Строка общего текста */
.general-text-row td {
padding: 6px 8px !important;
border-bottom: none !important;
background: transparent !important;
}
.general-text-cell {
vertical-align: middle;
}
.general-text-display {
font-size: 12px;
color: #333;
line-height: 1.4;
width: 100%;
background: #f0fff4;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.general-text-display:hover {
background: #e0f5e4;
}
.general-text-display p { margin: 0; }
/* Редактор общего текста inline */
.general-editor-inline {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.general-summernote-wrap {
flex: 1;
min-width: 0;
}
.general-editor-inline .note-editor {
border: 2px solid #4CAF50 !important;
border-radius: 4px;
width: 100% !important;
background: #f1f8e9 !important;
}
.general-editor-inline .note-toolbar {
background: #e8f5e9 !important;
border-bottom: 1px solid #c8e6c9 !important;
}
.general-editor-inline .note-editing-area {
background: #fff !important;
}
.general-editor-btns {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.general-editor-btns .btn {
padding: 4px 8px;
}
/* Ячейка-превью */
.cell-preview {
min-height: 44px;
padding: 8px;
border: 1px solid transparent;
border-radius: 4px;
font-size: 12px;
line-height: 1.4;
cursor: pointer;
transition: all 0.15s;
background: #fafafa;
word-break: break-word;
white-space: pre-line;
}
.cell-preview:hover { border-color: #667eea; background: #fff; }
.cell-preview.filled { background: #f0fff4; }
.cell-preview.empty { color: #bbb; }
.cell-preview.active { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15); }
.cell-preview.readonly { cursor: default; }
.cell-preview.readonly:hover { border-color: transparent; }
/* Inline редактирование с Summernote */
.cell-td { vertical-align: top; padding: 4px !important; }
.cell-editable {
min-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
font-size: 12px;
line-height: 1.4;
cursor: pointer;
transition: all 0.15s;
background: #fafafa;
}
.cell-editable:hover { border-color: #667eea; background: #fff; }
.cell-editable.filled { background: #f0fff4; }
.cell-editable.empty { }
.cell-editable.editing { border-color: #667eea; background: #fff; }
.cell-content {
padding: 8px;
word-break: break-word;
}
.cell-content .placeholder { color: #bbb; background-color: transparent; }
.cell-content p { margin: 0 0 4px 0; }
.cell-content ul, .cell-content ol { margin: 0; padding-left: 20px; }
.cell-editor { min-height: 40px; }
/* Summernote в ячейке - компактный стиль */
.cell-editable .note-editor {
border: none !important;
box-shadow: none !important;
}
.cell-editable .note-toolbar {
background: #f8f9fa !important;
border-bottom: 1px solid #e0e0e0 !important;
padding: 4px !important;
}
.cell-editable .note-btn {
padding: 4px 8px !important;
font-size: 12px !important;
}
.cell-editable .note-editing-area {
min-height: 40px !important;
}
.cell-editable .note-editable {
padding: 8px !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
.cell-editable .note-editable p { margin: 0 0 4px 0; }
.cell-editable .note-statusbar { display: none !important; }
.cell-text { padding: 8px; font-size: 12px; line-height: 1.4; min-height: 48px; color: #333; }
.cell-text.empty { color: #ccc; }
.row-actions { padding: 4px !important; }
.row-btn {
width: 36px; height: 36px;
border: none;
border-radius: 6px;
background: #f5f5f5;
color: #666;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
transition: all 0.15s;
}
.row-btn:hover { background: #667eea; color: #fff; transform: scale(1.05); }
.row-btn.ai-btn { background: #fff3e0; color: #ff9800; }
.row-btn.ai-btn:hover { background: #ff9800; color: #fff; }
.row-btn img { width: 20px; height: 20px; }
.cyclogram-footer {
padding: 16px 20px;
background: #fff;
border-radius: 8px;
margin-top: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.progress-info {
font-size: 13px;
color: #666;
display: flex;
align-items: center;
gap: 12px;
}
.progress-bar {
width: 200px;
height: 6px;
background: #eee;
border-radius: 3px;
overflow: hidden;
flex-shrink: 0;
}
.progress-fill { height: 100%; background: #667eea; transition: width 0.3s; }
/* AI Modal day chips */
.ai-days-select { margin-bottom: 12px; }
.ai-days-select label { display: block; margin-bottom: 8px; font-weight: 500; color: #555; }
.ai-day-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-day-chip {
padding: 8px 16px;
border: 2px solid #d0d0d0;
border-radius: 20px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
user-select: none;
display: flex;
align-items: center;
gap: 6px;
background: #f0f0f0;
color: #888;
}
.ai-day-chip:hover { border-color: #999; background: #e8e8e8; }
.ai-day-chip.selected { border-color: #667eea; background: #667eea; color: #fff; }
.ai-day-chip.filled { background: #f0f0f0; border-color: #d0d0d0; color: #888; } /* заполненный но не выбранный - тоже серый */
.ai-day-chip.filled.selected { background: #667eea; border-color: #667eea; color: #fff; }
.ai-day-chip .chip-status { font-size: 11px; opacity: 0.7; }
/* AI Modal hints */
.ai-hints-group { margin-bottom: 12px; }
.ai-hints-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #555; font-size: 13px; }
.ai-hints { display: flex; gap: 6px; flex-wrap: wrap; max-height: 120px; overflow-y: auto; }
.ai-hint-btn {
padding: 5px 12px;
border: 1px solid #e0e0e0;
border-radius: 15px;
font-size: 12px;
background: #fff;
color: #555;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.ai-hint-btn:hover { border-color: #667eea; background: #f5f7ff; color: #667eea; }
.ai-hint-btn.selected { border-color: #667eea; background: #667eea; color: #fff; }
.ai-hint-btn.contextual { border-color: #ff9800; background: #fff8e1; color: #e65100; }
.ai-hint-btn.contextual:hover { border-color: #ff9800; background: #ff9800; color: #fff; }
.ai-hint-btn.contextual.selected { border-color: #ff9800; background: #ff9800; color: #fff; }
/* Fixed save wrapper for cyclogram */
#fixed-save-wrapper {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 99999;
}
#fixed-save-wrapper .fixed-save-btn {
padding: 6px 28px;
background: var(--reports-success, #4CAF50);
color: #fff;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
#fixed-save-wrapper .fixed-save-btn:hover:not(.no-changes) { background: #43a047; transform: translateY(-2px); }
#fixed-save-wrapper .fixed-save-btn:disabled { background: #aaa; cursor: not-allowed; transform: none; }
#fixed-save-wrapper .fixed-save-btn.no-changes { background: #a5d6a7; box-shadow: none; cursor: default; }
/* ============================================
Development Analytics Dashboard
============================================ */
.analytics-dashboard,
.group-dashboard { padding: 0; }
/* Dashboard Header */
.dashboard-header { margin-bottom: 24px; }
.dashboard-header h1 { margin: 0; font-weight: 700; color: #1f2937; font-size: 24px; display: flex; align-items: center; gap: 10px; }
.dashboard-header h1 i { color: #6366f1; }
.dashboard-header .subtitle { color: #6b7280; margin-top: 4px; font-size: 14px; }
/* Metric Cards */
.da-metric-row { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.da-metric-card {
background: white;
border-radius: 12px;
padding: 20px 24px;
flex: 1;
min-width: 180px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
display: flex;
align-items: center;
gap: 16px;
}
.da-metric-card .metric-icon {
width: 52px;
height: 52px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: white;
}
.da-metric-card .metric-content { flex: 1; }
.da-metric-card .metric-value { font-size: 28px; font-weight: 700; color: #1f2937; line-height: 1.2; }
.da-metric-card .metric-label { font-size: 13px; color: #6b7280; margin-top: 2px; }
/* Gradient Backgrounds */
.da-bg-blue { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.da-bg-green { background: linear-gradient(135deg, #10B981, #059669); }
.da-bg-purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
.da-bg-orange { background: linear-gradient(135deg, #F59E0B, #D97706); }
.da-bg-pink { background: linear-gradient(135deg, #EC4899, #DB2777); }
.da-bg-cyan { background: linear-gradient(135deg, #06B6D4, #0891B2); }
.da-bg-indigo { background: linear-gradient(135deg, #6366f1, #4f46e5); }
/* Content Cards */
.da-content-card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
margin-bottom: 20px;
overflow: hidden;
}
.da-content-card .card-header {
padding: 18px 24px;
border-bottom: 1px solid #f0f0f0;
display: flex;
align-items: center;
gap: 12px;
}
.da-content-card .card-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #1f2937; }
.da-content-card .card-header .header-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
}
.da-content-card .card-body { padding: 20px 24px; }
.da-content-card .card-body--scroll { max-height: 300px; overflow-y: auto; }
.da-content-card .card-body--chart { max-height: 320px; overflow: hidden; }
/* Area Cards Grid */
.da-area-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.da-area-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border-left: 4px solid;
}
.da-area-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.da-area-card-header img { width: 72px; height: 72px; object-fit: contain; }
.da-area-card-header .area-info h4 { margin: 0; font-size: 15px; font-weight: 600; }
.da-area-card-header .area-info .area-score { font-size: 13px; color: #6b7280; margin-top: 2px; }
.da-area-card-header .area-info .area-score strong { font-size: 18px; margin-right: 4px; }
/* Criteria List */
.da-criteria-list { list-style: none; padding: 0; margin: 0; }
.da-criteria-list li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #f5f5f5;
font-size: 13px;
}
.da-criteria-list li:last-child { border-bottom: none; }
.da-criteria-list .criteria-name { color: #374151; flex: 1; }
.da-criteria-list .criteria-score { font-weight: 600; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.da-score-high { background: #D1FAE5; color: #059669; }
.da-score-medium { background: #FEF3C7; color: #D97706; }
.da-score-low { background: #FEE2E2; color: #DC2626; }
/* Strengths List */
.da-strengths-list { list-style: none; padding: 0; margin: 0; }
.da-strengths-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
.da-strengths-list li:last-child { border-bottom: none; }
.da-strength-number {
width: 26px; height: 26px;
background: #D1FAE5; color: #059669;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.da-strength-content { flex: 1; }
.da-strength-title { font-weight: 500; color: #1f2937; font-size: 13px; }
.da-strength-desc { font-size: 11px; color: #6b7280; margin-top: 2px; }
.da-strength-desc i { margin-right: 4px; }
.da-strength-score {
font-weight: 700; color: #059669; font-size: 15px;
background: #D1FAE5; padding: 4px 10px; border-radius: 6px;
}
/* Action Cards */
.da-action-cards { }
.da-action-card {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px; background: #f9fafb; border-radius: 10px;
margin-bottom: 8px; border-left: 4px solid; transition: all 0.2s;
}
.da-action-card:hover { background: #f3f4f6; transform: translateX(3px); }
.da-action-card:last-child { margin-bottom: 0; }
.da-action-priority {
width: 26px; height: 26px;
background: linear-gradient(135deg, #F59E0B, #D97706); color: white;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.da-action-content { flex: 1; }
.da-action-title { font-weight: 600; color: #1f2937; font-size: 13px; margin-bottom: 3px; }
.da-action-area { font-size: 11px; color: #6b7280; margin-bottom: 2px; }
.da-action-area i { margin-right: 4px; }
.da-action-desc { font-size: 11px; color: #9ca3af; }
/* Group Ranking */
.da-group-list { }
.da-group-item {
display: flex; align-items: center;
padding: 12px 16px; border-radius: 10px;
margin-bottom: 8px; background: #f9fafb;
transition: all 0.2s; text-decoration: none; color: inherit;
}
.da-group-item:hover { background: #f3f4f6; transform: translateX(4px); text-decoration: none; color: inherit; }
.da-group-item .rank {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px; margin-right: 12px; color: white;
}
.da-rank-gold { background: linear-gradient(135deg, #FCD34D, #F59E0B); }
.da-rank-silver { background: linear-gradient(135deg, #D1D5DB, #9CA3AF); }
.da-rank-bronze { background: linear-gradient(135deg, #D97706, #B45309); }
.da-rank-default { background: #E5E7EB; color: #6B7280; }
.da-group-item .group-info { flex: 1; }
.da-group-item .group-name { font-weight: 600; color: #1f2937; font-size: 14px; }
.da-group-item .group-meta { font-size: 12px; color: #9ca3af; }
.da-group-item .group-score { font-size: 16px; font-weight: 700; padding: 6px 12px; border-radius: 8px; color: white; }
/* Analysis Section */
.da-analysis-section {
background: white; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
margin-bottom: 24px; border-left: 5px solid #6366f1;
}
.da-analysis-section--cyan { border-left-color: #06B6D4; }
.da-analysis-header {
padding: 14px 24px; border-bottom: 1px solid #f0f0f0;
display: flex; align-items: center; gap: 10px;
}
.da-analysis-header i { font-size: 18px; color: #6366f1; }
.da-analysis-header--cyan i { color: #06B6D4; }
.da-analysis-header h3 { margin: 0; font-size: 15px; font-weight: 600; color: #1f2937; }
.da-analysis-body { padding: 20px 24px; }
.da-analysis-text { font-size: 13px; line-height: 1.6; color: #4b5563; }
.da-analysis-text p { margin: 0 0 10px 0; }
.da-analysis-text p:last-child { margin-bottom: 0; }
.da-analysis-text strong { color: #1f2937; font-weight: 600; }
.da-analysis-text .highlight { background: #f1f5f9; padding: 1px 6px; border-radius: 3px; font-weight: 600; color: #4f46e5; }
.da-analysis-text .highlight--cyan { color: #0891b2; }
.da-analysis-text .level-high { color: #059669; font-weight: 600; }
.da-analysis-text .level-medium { color: #d97706; font-weight: 600; }
.da-analysis-text .level-low { color: #dc2626; font-weight: 600; }
/* Analysis Stats */
.da-analysis-stats {
display: flex; gap: 12px; flex-wrap: wrap;
margin: 14px 0; padding: 14px; background: #f8fafc; border-radius: 8px;
}
.da-analysis-stat { flex: 1; min-width: 100px; text-align: center; padding: 8px; }
.da-analysis-stat .stat-value { font-size: 22px; font-weight: 700; line-height: 1; }
.da-analysis-stat .stat-value--green { color: #059669; }
.da-analysis-stat .stat-value--orange { color: #d97706; }
.da-analysis-stat .stat-value--red { color: #dc2626; }
.da-analysis-stat .stat-value--cyan { color: #06B6D4; }
.da-analysis-stat .stat-value--indigo { color: #6366f1; }
.da-analysis-stat .stat-label { font-size: 11px; color: #6b7280; margin-top: 4px; }
/* Recommendations Block */
.da-recommendations-block {
background: white; border-radius: 12px;
padding: 24px 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border-left: 5px solid #10B981; margin-bottom: 35px;
}
.da-recommendations-block h4 {
margin: 0 0 20px 0; font-size: 18px; font-weight: 600;
display: flex; align-items: center; gap: 10px; color: #1f2937;
}
.da-recommendations-block h4 i { color: #10B981; }
.da-recommendation-item {
background: #f8fafc; border-radius: 10px;
padding: 16px; margin-bottom: 12px; border-left: 3px solid #10B981;
}
.da-recommendation-item:last-child { margin-bottom: 0; }
.da-recommendation-item .rec-title { font-weight: 600; font-size: 14px; margin-bottom: 6px; color: #1f2937; }
.da-recommendation-item .rec-text { font-size: 13px; color: #4b5563; line-height: 1.6; white-space: pre-line; }
/* Activities Grid */
.da-activities-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px; margin-top: 16px;
}
.da-activity-card { background: #f0fdf4; border-radius: 10px; padding: 14px; border: 1px solid #bbf7d0; }
.da-activity-card .activity-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #166534; }
.da-activity-card .activity-desc { font-size: 12px; color: #4b5563; line-height: 1.5; }
.da-activity-card .activity-time { font-size: 11px; color: #6b7280; margin-top: 8px; }
.da-activities-header { margin: 20px 0 12px 0; font-size: 14px; color: #166534; font-weight: 600; display: flex; align-items: center; gap: 6px; }
/* Children Grid */
.da-children-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.da-child-item {
position: relative; padding: 12px 12px 12px 60px;
border-radius: 10px; background: #f9fafb;
transition: all 0.2s; min-height: 64px;
}
.da-child-item:hover { background: #f3f4f6; }
.da-child-item .child-avatar {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
}
.da-child-item .child-avatar img { width: 100%; height: 100%; object-fit: cover; }
.da-child-item .child-info { }
.da-child-item .child-name { font-weight: 600; color: #1f2937; font-size: 13px; line-height: 1.3; padding-right: 50px; }
.da-child-item .child-age { font-size: 11px; color: #9ca3af; }
.da-child-item .score-badge {
position: absolute; right: 12px; top: 50%; transform: translateY(-20%);
padding: 4px 8px; border-radius: 6px; color: white; font-weight: 700; font-size: 12px;
}
/* Empty State */
.da-empty-state { text-align: center; padding: 40px; color: #9ca3af; }
.da-empty-state i { font-size: 48px; margin-bottom: 15px; display: block; }
.da-empty-state p { margin: 0; }
.da-empty-state--success { color: #10B981; }
/* Warning Banner */
.da-warning-banner {
background: #fef3c7; padding: 10px 14px; border-radius: 8px;
margin-bottom: 12px; font-size: 12px; color: #92400e;
}
.da-warning-banner i { margin-right: 4px; }
/* Teacher Groups Page */
.da-teacher-groups-page { max-width: 900px; margin: 0 auto; padding: 20px; }
.da-page-header { margin-bottom: 30px; }
.da-page-header h1 {
font-size: 24px; font-weight: 700; color: #1f2937;
margin: 0 0 8px 0; display: flex; align-items: center; gap: 12px;
}
.da-page-header h1 i { color: #06B6D4; }
.da-page-header .subtitle { color: #6b7280; font-size: 14px; }
.da-groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.da-group-card {
background: white; border-radius: 16px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
overflow: hidden; transition: all 0.3s;
text-decoration: none; display: block;
}
.da-group-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.da-group-card-header { background: linear-gradient(135deg, #06B6D4, #0891B2); padding: 20px; color: white; }
.da-group-card-header h3 { margin: 0; font-size: 18px; font-weight: 600; }
.da-group-card-body { padding: 20px; }
.da-group-stat { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.da-group-stat:last-child { border-bottom: none; }
.da-group-stat-label { font-size: 13px; color: #6b7280; }
.da-group-stat-value { font-size: 15px; font-weight: 600; color: #1f2937; }
.da-group-stat-value.score { padding: 4px 12px; border-radius: 20px; color: white; }
.da-group-card-footer { padding: 16px 20px; background: #f9fafb; display: flex; align-items: center; justify-content: space-between; }
.da-view-btn { display: flex; align-items: center; gap: 6px; color: #06B6D4; font-weight: 500; font-size: 13px; }
.da-view-btn i { transition: transform 0.2s; }
.da-group-card:hover .da-view-btn i { transform: translateX(4px); }
.da-no-data { color: #9ca3af; font-style: italic; padding: 20px; text-align: center; }
/* Group Tabs for Teachers */
.da-group-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
padding: 4px;
background: #f1f5f9;
border-radius: 12px;
flex-wrap: wrap;
}
.da-group-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #64748b;
text-decoration: none;
transition: all 0.2s;
background: transparent;
}
.da-group-tab:hover {
background: #e2e8f0;
color: #334155;
text-decoration: none;
}
.da-group-tab.active {
background: white;
color: #06B6D4;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.da-group-tab i { font-size: 14px; }
/* ==========================================================================
ORGANIZATION MODULE STYLES
========================================================================== */
/* Chart Box */
.org-chart-box {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
overflow: hidden;
margin-bottom: 20px;
border: 1px solid rgba(0,0,0,0.05);
}
.org-chart-box .chart-header {
padding: 16px 20px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-bottom: 1px solid #e2e8f0;
font-weight: 600;
font-size: 14px;
color: #1e293b;
display: flex;
align-items: center;
gap: 10px;
}
.org-chart-box .chart-header i { font-size: 16px; }
.org-chart-box .chart-body { padding: 16px 20px; }
/* Organizations Module Layout */
.organizations-module .statistics-widget-wrapper,
.organizations-module .charts-row,
.organizations-module .organizations-list-card { margin: 0 25px; }
.organizations-module .analytics-card { margin: 25px; }
.organizations-module .module-header { margin: 25px; }
.organizations-module .search-form .input-group-append .btn { padding: 5px 15px; }
/* ==========================================================================
GROUPS MODULE - RESTORE & ARCHIVE STYLES
========================================================================== */
/* Restore action wrapper */
.restore-action-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
/* Restore countdown timer */
.restore-countdown {
font-size: 11px;
color: #6c757d;
white-space: nowrap;
}
.restore-countdown .fa-clock-o { margin-right: 3px; }
.countdown-time { font-family: monospace; }
/* Archive list styles */
.archive-list-container .children-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.archive-child-item { border-left: 3px solid #dc3545; }
.archive-child-item .child-name .badge {
font-size: 10px;
font-weight: 500;
padding: 3px 8px;
vertical-align: middle;
}
/* ==========================================================================
GROUPS MODULE - SELECTION MODE STYLES
========================================================================== */
/* Selection floating bar */
.selection-floating-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(73, 80, 87, 0.9);
backdrop-filter: blur(8px);
color: white;
padding: 10px 20px;
z-index: 1050;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.selection-floating-bar strong {
font-size: 16px;
margin-left: 4px;
}
.selection-actions {
display: flex;
align-items: center;
gap: 12px;
}
/* Checkbox styling */
.child-checkbox {
display: flex;
align-items: center;
padding-right: 10px;
}
.child-checkbox input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
}
/* Selection mode */
.children-list.selection-mode .child-checkbox { display: flex !important; }
.children-list.selection-mode .child-item { cursor: pointer; }
.children-list.selection-mode .child-item:hover { background-color: #f0f7ff; }
.children-list.selection-mode .child-item.selected {
background-color: #e3f2fd;
border-left: 3px solid #2196F3;
}
/* ==========================================================================
HR MODULE - EMPLOYEE STYLES
========================================================================== */
/* Employee assigned groups */
.employee-groups {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #6ea493;
background: #e6f0e9;
padding: 0 10px;
border-radius: 12px;
margin-left: 8px;
}
.employee-groups i {
color: #6ea493;
font-size: 11px;
}
.employee-group-link {
color: #6ea493;
text-decoration: none;
font-weight: 500;
}
.employee-group-link:hover {
color: #5a8a7a;
text-decoration: underline;
}
/* ==========================================================================
Child View Vue.js Component Styles
Стили для последовательной AJAX-загрузки страницы просмотра ребенка
========================================================================== */
/* Skeleton loader для секций */
.cv-skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: cv-skeleton-loading 1.5s infinite;
border-radius: 8px;
min-height: 100px;
}
.cv-skeleton-card {
min-height: 200px;
}
.cv-skeleton-chart {
min-height: 300px;
}
.cv-skeleton-text {
height: 20px;
margin-bottom: 10px;
border-radius: 4px;
}
.cv-skeleton-text.short {
width: 60%;
}
.cv-skeleton-text.medium {
width: 80%;
}
.cv-skeleton-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
}
@keyframes cv-skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Статус загрузки */
.cv-loading-status {
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(33, 37, 41, 0.9);
color: #fff;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
z-index: 9999;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(4px);
}
.cv-loading-status .cv-spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: cv-spin 0.8s linear infinite;
}
@keyframes cv-spin {
to { transform: rotate(360deg); }
}
/* Карточки */
.cv-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: box-shadow 0.2s ease;
}
.cv-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.cv-card-header {
padding: 16px 20px;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
display: flex;
align-items: center;
justify-content: space-between;
}
.cv-card-title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #212529;
display: flex;
align-items: center;
gap: 8px;
}
.cv-card-title i {
color: var(--bs-primary, #0d6efd);
}
.cv-card-body {
padding: 20px;
}
/* Profile card */
.cv-profile {
display: flex;
gap: 24px;
}
.cv-profile-photo {
flex-shrink: 0;
}
.cv-profile-photo img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #e9ecef;
}
.cv-profile-info {
flex: 1;
}
.cv-profile-name {
font-size: 24px;
font-weight: 700;
color: #212529;
margin: 0 0 8px 0;
}
.cv-profile-group {
font-size: 15px;
color: #6c757d;
margin-bottom: 16px;
}
.cv-profile-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.cv-profile-detail {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.cv-profile-detail-label {
color: #6c757d;
}
.cv-profile-detail-value {
color: #212529;
font-weight: 500;
}
/* Stats card */
.cv-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.cv-stat {
text-align: center;
padding: 20px;
border-radius: 12px;
background: #f8f9fa;
}
.cv-stat-value {
font-size: 32px;
font-weight: 700;
line-height: 1;
}
.cv-stat-value.cv-high { color: #198754; }
.cv-stat-value.cv-medium { color: #ffc107; }
.cv-stat-value.cv-low { color: #dc3545; }
.cv-stat-label {
font-size: 14px;
color: #6c757d;
margin-top: 8px;
}
/* Progress bars */
.cv-progress-container {
margin-top: 20px;
}
.cv-progress {
height: 24px;
border-radius: 12px;
overflow: hidden;
background: #e9ecef;
display: flex;
}
.cv-progress-segment {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: #fff;
transition: width 0.5s ease;
}
.cv-progress-segment.cv-high { background: #198754; }
.cv-progress-segment.cv-medium { background: #ffc107; color: #212529; }
.cv-progress-segment.cv-low { background: #dc3545; }
/* Action buttons */
.cv-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-bottom: 16px;
}
.cv-action-btn {
width: 40px;
height: 40px;
border-radius: 8px;
border: 1px solid #dee2e6;
background: #fff;
color: #495057;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
.cv-action-btn:hover {
background: #f8f9fa;
border-color: #adb5bd;
color: #495057;
}
.cv-action-btn.cv-primary {
background: var(--bs-primary, #0d6efd);
border-color: var(--bs-primary, #0d6efd);
color: #fff;
}
.cv-action-btn.cv-primary:hover {
background: var(--bs-primary-dark, #0b5ed7);
color: #fff;
}
/* Alert */
.cv-alert {
padding: 16px 20px;
border-radius: 8px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.cv-alert i {
font-size: 20px;
flex-shrink: 0;
}
.cv-alert-info {
background: #cff4fc;
color: #055160;
}
.cv-alert-warning {
background: #fff3cd;
color: #664d03;
}
.cv-alert-danger {
background: #f8d7da;
color: #842029;
}
.cv-alert-success {
background: #d1e7dd;
color: #0f5132;
}
/* Error state */
.cv-error {
text-align: center;
padding: 40px;
}
.cv-error-icon {
font-size: 48px;
color: #dc3545;
margin-bottom: 16px;
}
.cv-error-message {
font-size: 18px;
color: #495057;
margin-bottom: 20px;
}
.cv-error-retry {
padding: 10px 24px;
background: var(--bs-primary, #0d6efd);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
}
/* Dismissed child badge */
.cv-dismissed-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #f8d7da;
color: #842029;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
margin-top: 12px;
}
/* Restore countdown */
.cv-restore-countdown {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #fff3cd;
color: #664d03;
border-radius: 6px;
font-size: 13px;
margin-left: 8px;
}
/* Development card section */
.cv-development-card {
margin-top: 24px;
}
/* Responsive */
@media (max-width: 768px) {
.cv-profile {
flex-direction: column;
align-items: center;
text-align: center;
}
.cv-profile-details {
grid-template-columns: 1fr;
}
.cv-stats {
grid-template-columns: 1fr;
}
}
/* ========================================
Reports Vue.js Page Styles
======================================== */
/* Statistics cards */
.statistics-cards { margin-bottom: 20px; }
.statistics-row { display: flex; gap: 15px; flex-wrap: wrap; }
.stat-card {
flex: 1;
min-width: 200px;
background: white;
border-radius: 10px;
padding: 15px 20px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.stat-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
.stat-content { flex: 1; }
.stat-value { font-size: 42px; font-weight: 700; color: #333; }
.stat-value.loading { color: #999; }
.stat-label { font-size: 13px; color: #666; }
/* List view controls */
.list-view-controls { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }
.search-box { position: relative; flex: 1; min-width: 200px; }
.search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #999; z-index: 1; }
.search-box input { padding-left: 38px; }
.reports-index .filter-buttons { display: flex; }
.reports-index .filter-btn {
padding: 4px 12px;
border: 1px solid #ccc;
border-left: none;
background: #fff;
font-size: 12px;
color: #666;
cursor: pointer;
border-radius: 0;
}
.reports-index .filter-btn:first-child { border-radius: 13px 0 0 13px; border-left: 1px solid #ccc; }
.reports-index .filter-btn:last-child { border-radius: 0 13px 13px 0; }
.reports-index .filter-btn:hover { background: #f5f5f5; }
.reports-index .filter-btn.active { background: #3c8dbc; color: #fff; border-color: #3c8dbc; }
#reports-app .search-box { margin-bottom: 0; }
#reports-app .filter-buttons { gap: 0; }
#reports-app .stat-icon { width: 150px; height: 150px; }
#reports-app .stat-icon i { font-size: 48px; }
#reports-app .stat-value { font-size: 34px; }
#reports-app .item-info-compact { margin: 10px 15px 0; }
#reports-app .reports-list .report-icon i { font-size: 15px; }
#reports-app .reports-list .report-icon.status-completed i { color: #5cb85c !important; }
#reports-app .reports-list .report-icon.status-in_progress i { color: #f0ad4e !important; }
#reports-app .reports-list .report-icon.status-deleted i { color: #d9534f !important; }
/* Reports Vue list - только уникальные стили, остальное из глобальных .list-view-widget */
.reports-list .list-item { align-items: flex-start; margin-bottom: 10px; }
.reports-list .item-info-compact { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.reports-list .fill-status { font-size: 12px; color: #666; }
.reports-list .progress-percent { font-size: 13px; font-weight: 600; }
.reports-list .item-compact-details { margin-top: 8px; }
.reports-list .item-meta-compact { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.reports-list .item-meta-field { font-size: 11px; color: #888; display: flex; align-items: center; gap: 4px; }
.reports-list .item-meta-field i { color: #aaa; font-size: 10px; }
.reports-list .progress-bar-container { height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden; }
.reports-list .progress-bar-container.thin { height: 4px; }
.reports-list .progress-bar { height: 100%; border-radius: 3px; transition: width 0.3s; }
.reports-list .progress-bar.progress-success { background: linear-gradient(90deg, #28a745, #5cb85c); }
.reports-list .progress-bar.progress-info { background: linear-gradient(90deg, #17a2b8, #5bc0de); }
.reports-list .progress-bar.progress-warning { background: linear-gradient(90deg, #ffc107, #f0ad4e); }
.reports-list .progress-bar.progress-orange-red { background: linear-gradient(90deg, #fd7e14, #e67e22); }
.reports-list .progress-bar.progress-danger { background: linear-gradient(90deg, #dc3545, #d9534f); }
.reports-list .category-indicator {
display: inline-block;
margin-left: 4px;
padding: 5px 6px;
color: white;
border-radius: 3px;
font-size: 10px;
font-weight: bold;
cursor: help;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform 0.2s;
}
.reports-list .category-indicator:hover { transform: scale(1.1); }
/* Tooltip icon size */
.tooltip-inner img, .tooltip-inner svg { max-width: 250px; width: 100%; }
/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; color: #999; }
/* Fade in animation */
.fade-in { animation: fadeIn 0.3s ease-out forwards; opacity: 0; }
@keyframes fadeIn { to { opacity: 1; } }
/* Infinite scroll trigger */
.load-more-trigger { height: 1px; }
/* ========================================
Reports Skeleton Loader
======================================== */
@keyframes reports-skeleton-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Skeleton for statistics cards */
#reports-app .stat-card .skeleton-icon {
width: 60px;
height: 60px;
border-radius: 12px;
background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: reports-skeleton-pulse 1.5s ease-in-out infinite;
}
#reports-app .stat-card .skeleton-value {
height: 36px;
width: 60px;
border-radius: 6px;
margin-bottom: 8px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: reports-skeleton-pulse 1.5s ease-in-out infinite;
}
#reports-app .stat-card .skeleton-label {
height: 14px;
width: 120px;
border-radius: 4px;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: reports-skeleton-pulse 1.5s ease-in-out infinite;
}
/* Skeleton for report list items */
#reports-app .skeleton-list .skeleton-item {
display: flex;
align-items: flex-start;
padding: 16px;
border-left: 5px solid #e0e0e0;
gap: 12px;
}
#reports-app .skeleton-item .skeleton-number {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(90deg, #e8e8e8 25%, #ddd 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: reports-skeleton-pulse 1.5s ease-in-out infinite;
}
#reports-app .skeleton-item .skeleton-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(90deg, #e8e8e8 25%, #ddd 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: reports-skeleton-pulse 1.5s ease-in-out infinite;
}
#reports-app .skeleton-item .skeleton-title {
height: 20px;
width: 200px;
border-radius: 4px;
margin-bottom: 8px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: reports-skeleton-pulse 1.5s ease-in-out infinite;
}
#reports-app .skeleton-item .skeleton-badges {
height: 16px;
width: 150px;
border-radius: 8px;
background: linear-gradient(90deg, #f5f5f5 25%, #eee 50%, #f5f5f5 75%);
background-size: 200% 100%;
animation: reports-skeleton-pulse 1.5s ease-in-out infinite;
}
#reports-app .skeleton-item .skeleton-meta {
height: 14px;
width: 300px;
border-radius: 4px;
margin-top: 12px;
margin-bottom: 8px;
background: linear-gradient(90deg, #f5f5f5 25%, #eee 50%, #f5f5f5 75%);
background-size: 200% 100%;
animation: reports-skeleton-pulse 1.5s ease-in-out infinite;
}
#reports-app .skeleton-item .skeleton-progress {
height: 6px;
width: 100%;
border-radius: 3px;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: reports-skeleton-pulse 1.5s ease-in-out infinite;
}
/* Animation delay for staggered effect */
#reports-app .skeleton-list .skeleton-item:nth-child(1) * { animation-delay: 0s; }
#reports-app .skeleton-list .skeleton-item:nth-child(2) * { animation-delay: 0.1s; }
#reports-app .skeleton-list .skeleton-item:nth-child(3) * { animation-delay: 0.15s; }
#reports-app .skeleton-list .skeleton-item:nth-child(4) * { animation-delay: 0.2s; }
#reports-app .skeleton-list .skeleton-item:nth-child(5) * { animation-delay: 0.25s; }
/* ========================================
HR Employees Skeleton Loader
======================================== */
@keyframes skeleton-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
#hr-employees-app .skeleton-loading-state .skeleton-stat {
position: relative;
}
#hr-employees-app .skeleton-stat-value {
height: 32px;
width: 50px;
border-radius: 6px;
margin-bottom: 8px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#hr-employees-app .skeleton-stat-label {
height: 14px;
width: 100px;
border-radius: 4px;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#hr-employees-app .skeleton-stat-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(90deg, #e8e8e8 25%, #ddd 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#hr-employees-app .skeleton-progress-bar {
height: 4px;
width: 60%;
border-radius: 2px;
background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#hr-employees-app .skeleton-search-input {
height: 40px;
width: 100%;
border-radius: 20px;
background: linear-gradient(90deg, #f5f5f5 25%, #eee 50%, #f5f5f5 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#hr-employees-app .skeleton-list-item {
display: flex;
align-items: center;
padding: 12px 15px;
gap: 15px;
border-bottom: 1px solid #f0f0f0;
}
#hr-employees-app .skeleton-number-badge {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(90deg, #e8e8e8 25%, #ddd 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#hr-employees-app .skeleton-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(90deg, #e8e8e8 25%, #ddd 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#hr-employees-app .skeleton-list-item .item-info {
flex: 1;
}
#hr-employees-app .skeleton-title {
height: 18px;
width: 180px;
border-radius: 4px;
margin-bottom: 8px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#hr-employees-app .skeleton-details {
height: 14px;
width: 280px;
border-radius: 4px;
background: linear-gradient(90deg, #f5f5f5 25%, #eee 50%, #f5f5f5 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#hr-employees-app .skeleton-actions {
width: 70px;
height: 32px;
border-radius: 6px;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
/* Staggered animation for HR list */
#hr-employees-app .skeleton-list-item:nth-child(1) * { animation-delay: 0s; }
#hr-employees-app .skeleton-list-item:nth-child(2) * { animation-delay: 0.05s; }
#hr-employees-app .skeleton-list-item:nth-child(3) * { animation-delay: 0.1s; }
#hr-employees-app .skeleton-list-item:nth-child(4) * { animation-delay: 0.15s; }
#hr-employees-app .skeleton-list-item:nth-child(5) * { animation-delay: 0.2s; }
#hr-employees-app .skeleton-list-item:nth-child(6) * { animation-delay: 0.25s; }
#hr-employees-app .skeleton-list-item:nth-child(7) * { animation-delay: 0.3s; }
#hr-employees-app .skeleton-list-item:nth-child(8) * { animation-delay: 0.35s; }
/* ========================================
Groups List Skeleton Loader
======================================== */
.groups-module .skeleton-loading .skeleton-stat-card {
display: flex;
align-items: center;
padding: 15px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
margin-bottom: 15px;
}
.groups-module .skeleton-stat-icon {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
background: linear-gradient(90deg, #e8e8e8 25%, #ddd 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.groups-module .skeleton-stat-content {
flex: 1;
}
.groups-module .skeleton-stat-value {
height: 28px;
width: 60px;
border-radius: 4px;
margin-bottom: 6px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.groups-module .skeleton-stat-label {
height: 14px;
width: 100px;
border-radius: 4px;
background: linear-gradient(90deg, #f5f5f5 25%, #eee 50%, #f5f5f5 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.groups-module .skeleton-group-item {
display: flex;
align-items: center;
padding: 15px;
background: #fff;
border-radius: 8px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
border-left: 4px solid #e0e0e0;
}
.groups-module .skeleton-group-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 15px;
background: linear-gradient(90deg, #e8e8e8 25%, #ddd 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.groups-module .skeleton-group-info {
flex: 1;
}
.groups-module .skeleton-group-title {
height: 20px;
width: 150px;
border-radius: 4px;
margin-bottom: 8px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.groups-module .skeleton-group-meta {
height: 14px;
width: 200px;
border-radius: 4px;
background: linear-gradient(90deg, #f5f5f5 25%, #eee 50%, #f5f5f5 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.groups-module .skeleton-group-stats {
width: 80px;
height: 40px;
border-radius: 6px;
margin-left: 15px;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
/* ========================================
Children List Skeleton Loader
======================================== */
#children-list-app .skeleton-loading-state .skeleton-stat {
position: relative;
}
#children-list-app .skeleton-stat-value {
height: 32px;
width: 50px;
border-radius: 6px;
margin-bottom: 8px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#children-list-app .skeleton-stat-label {
height: 14px;
width: 80px;
border-radius: 4px;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#children-list-app .skeleton-stat-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(90deg, #e8e8e8 25%, #ddd 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#children-list-app .skeleton-progress-bar {
height: 4px;
width: 60%;
border-radius: 2px;
background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#children-list-app .skeleton-search-input {
height: 40px;
width: 100%;
border-radius: 20px;
background: linear-gradient(90deg, #f5f5f5 25%, #eee 50%, #f5f5f5 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#children-list-app .skeleton-child-item {
display: flex;
align-items: center;
padding: 12px 15px;
gap: 12px;
border-bottom: 1px solid #f0f0f0;
background: #fff;
border-radius: 8px;
margin-bottom: 8px;
}
#children-list-app .skeleton-number-badge {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(90deg, #e8e8e8 25%, #ddd 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#children-list-app .skeleton-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(90deg, #e8e8e8 25%, #ddd 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#children-list-app .skeleton-name {
height: 16px;
width: 140px;
border-radius: 4px;
margin-bottom: 6px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#children-list-app .skeleton-details {
height: 12px;
width: 180px;
border-radius: 4px;
background: linear-gradient(90deg, #f5f5f5 25%, #eee 50%, #f5f5f5 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
#children-list-app .skeleton-actions {
width: 60px;
height: 28px;
border-radius: 6px;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
/* Staggered animation for children list */
#children-list-app .skeleton-child-item:nth-child(1) * { animation-delay: 0s; }
#children-list-app .skeleton-child-item:nth-child(2) * { animation-delay: 0.05s; }
#children-list-app .skeleton-child-item:nth-child(3) * { animation-delay: 0.1s; }
#children-list-app .skeleton-child-item:nth-child(4) * { animation-delay: 0.15s; }
#children-list-app .skeleton-child-item:nth-child(5) * { animation-delay: 0.2s; }
#children-list-app .skeleton-child-item:nth-child(6) * { animation-delay: 0.25s; }
/* ========================================
Groups Vue.js Page Styles
======================================== */
/* Skeleton loading animation */
.skeleton-stat-value {
width: 60px;
height: 36px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 4px;
margin-bottom: 8px;
}
.skeleton-stat-label {
width: 100px;
height: 14px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 4px;
margin-bottom: 8px;
}
.skeleton-stat-icon {
width: 40px;
height: 40px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 50%;
position: absolute;
right: 15px;
top: 15px;
}
.skeleton-progress-bar {
width: 100%;
height: 100%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}
.skeleton-title {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 4px;
}
.skeleton-text {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 4px;
}
.skeleton-chart {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 8px;
}
.skeleton-search-input {
width: 100%;
height: 42px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 21px;
}
.skeleton-filter {
width: 80px;
height: 32px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 16px;
display: inline-block;
margin-right: 8px;
}
.skeleton-group-item {
display: flex;
align-items: center;
padding: 15px;
border-left: 4px solid #e0e0e0;
background: #fff;
margin-bottom: 10px;
border-radius: 8px;
}
.skeleton-number-badge {
width: 32px;
height: 32px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 50%;
display: block;
}
.skeleton-progress {
width: 100%;
height: 4px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 2px;
}
.skeleton-children-count {
width: 60px;
height: 40px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 8px;
}
.skeleton-actions {
width: 80px;
height: 32px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 4px;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes wave-gradient {
0% { background-position: 100% 0%; }
50% { background-position: 0% 0%; }
100% { background-position: 100% 0%; }
}
/* Groups Vue App specific styles */
#groups-vue-app .group-item {
padding: 0;
background: linear-gradient(to left, transparent 0%, var(--item-color) 10%, transparent 20%) !important;
transition: background 0.4s ease;
}
#groups-vue-app .group-item:hover {
background: linear-gradient(to left, transparent 0%, var(--item-color) 10%, transparent 80%) !important;
}
#groups-vue-app .group-number {
margin-top: 0;
}
#groups-vue-app .group-details {
margin-top: 0;
margin-left: 15px;
}
#groups-vue-app .group-children {
width: 120px;
min-width: 120px;
background: radial-gradient(circle, var(--group-color) 0%, transparent 90%) !important;
}
#groups-vue-app .group-children img {
opacity: 0.4;
transition: opacity 0.3s ease;
}
#groups-vue-app .group-item:hover .group-children img {
opacity: 1;
}
#groups-vue-app .category-badge,
#groups-vue-app .language-badge,
#groups-vue-app .type-badge {
padding: 4px 10px !important;
font-size: 12px !important;
opacity: 0.6;
transition: opacity 0.3s ease;
}
#groups-vue-app .group-item:hover .category-badge,
#groups-vue-app .group-item:hover .language-badge,
#groups-vue-app .group-item:hover .type-badge {
opacity: 1;
}
#groups-vue-app .language-badge {
font-weight: 400 !important;
}
#groups-vue-app .type-badge {
font-weight: 400 !important;
}
#groups-vue-app .filter-buttons {
margin-bottom: 15px;
}
#groups-vue-app .group-actions {
border-top: none !important;
}
#groups-vue-app .rec-actions {
display: flex;
flex-direction: row;
gap: 8px;
}
#groups-vue-app .rec-actions form,
.rec-actions form {
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
}
#groups-vue-app .action-btn {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #7b7575;
transition: all 0.3s ease;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
width: 48px;
height: 48px;
background-color: #f8f9fa;
font-size: 0.8rem;
opacity: 0.7;
}
#groups-vue-app .action-btn:hover {
opacity: 1;
transform: scale(1.15);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
background-color: #fff;
color: #333;
}
/* ========================================
Empty State Widget Styles
======================================== */
.empty-state-widget {
text-align: center;
padding: 40px 20px;
}
.empty-state-widget.size-sm {
padding: 20px 15px;
}
.empty-state-widget.size-md {
padding: 30px 20px;
}
.empty-state-widget.size-lg {
padding: 40px 20px;
}
.empty-state-widget.size-xl {
padding: 60px 30px;
}
.empty-state-widget .empty-icon {
margin-bottom: 20px;
}
.empty-state-widget .empty-icon i {
color: #ccc;
}
.empty-state-widget.size-sm .empty-icon i {
font-size: 2rem;
}
.empty-state-widget.size-md .empty-icon i {
font-size: 3rem;
}
.empty-state-widget.size-lg .empty-icon i {
font-size: 4rem;
}
.empty-state-widget.size-xl .empty-icon i {
font-size: 5rem;
}
.empty-state-widget .empty-icon img {
max-width: 120px;
max-height: 120px;
}
.empty-state-widget.size-sm .empty-icon img {
max-width: 60px;
max-height: 60px;
}
.empty-state-widget.size-xl .empty-icon img {
max-width: 180px;
max-height: 180px;
}
.empty-state-widget .empty-title {
font-size: 1.25rem;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}
.empty-state-widget.size-sm .empty-title {
font-size: 1rem;
}
.empty-state-widget.size-xl .empty-title {
font-size: 1.5rem;
}
.empty-state-widget .empty-desc {
font-size: 0.95rem;
color: #777;
margin-bottom: 20px;
}
.empty-state-widget.size-sm .empty-desc {
font-size: 0.85rem;
margin-bottom: 15px;
}
.empty-state-widget .empty-icon .empty-image {
animation: empty-heartbeat 2.5s ease-in-out 2;
}
@keyframes empty-heartbeat {
0%, 100% { transform: scale(1); }
10%, 30% { transform: scale(1.05); }
20% { transform: scale(1.1); }
40%, 60%, 80% { transform: scale(1); }
50%, 70% { transform: scale(1.03); }
}
/* ========================================
Groups Page - Fancy Stats Numbers (SVG Dashed Outline)
======================================== */
@font-face {
font-family: 'Montserrat';
src: url('/fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url('/fonts/montserrat/Montserrat-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
#groups-vue-app .stats-container .stat-value-digits {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: -15px;
}
#groups-vue-app .stats-container .stat-digit-svg {
width: 40px;
height: 65px;
display: block;
}
/* Белый "паддинг" между цифрой и пунктиром */
#groups-vue-app .stats-container .stat-text-bg {
font-family: 'Montserrat', 'Arial Black', sans-serif;
font-size: 75px;
font-weight: 700;
text-anchor: middle;
fill: none;
stroke: #fff;
stroke-width: 12;
stroke-linejoin: round;
stroke-linecap: round;
}
/* Пунктирная обводка с отступом */
#groups-vue-app .stats-container .stat-text-dashed {
font-family: 'Montserrat', 'Arial Black', sans-serif;
font-size: 75px;
font-weight: 900;
text-anchor: middle;
fill: none;
stroke: #bfc8da;
stroke-width: 2;
stroke-dasharray: 4 8;
stroke-linejoin: round;
stroke-linecap: round;
}
/* Заливка цифр - тёмно-синий */
#groups-vue-app .stats-container .stat-text-fill {
font-family: 'Montserrat', 'Arial Black', sans-serif;
font-size: 65px;
font-weight: 700;
text-anchor: middle;
fill: #3c628a;
}
#groups-vue-app .stats-container .stat-card:hover .stat-value-digits {
transform: scale(1.05);
transition: transform 0.3s ease;
}
#groups-vue-app .stats-container .stat-card:hover .stat-text-dashed {
animation: dash-move 0.5s linear infinite;
}
@keyframes dash-move {
to {
stroke-dashoffset: -7;
}
}
/* ========== Main Tabs (Мониторинг / СВОД) ========== */
.main-tabs {
display: flex;
gap: 4px;
margin-bottom: 20px;
padding: 4px;
background: var(--light-bg);
border-radius: var(--radius);
width: fit-content;
}
.main-tab {
flex: 0 0 auto;
padding: 10px 20px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.main-tab:hover {
color: var(--text-color);
background: rgba(255,255,255,0.6);
text-decoration: none;
}
.main-tab.active {
background: #fff;
color: var(--reports-primary);
box-shadow: var(--shadow);
}
.main-tab i {
font-size: 14px;
}
/* ========== UMC & Methodist Common Styles ========== */
/* Filters */
.umc-filters,
.methodist-filters { margin-bottom: 20px; }
.umc-filters-form,
.methodist-filters-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.umc-filter-item,
.methodist-filter-item { flex-shrink: 0; }
.umc-select,
.methodist-select {
height: 36px;
padding: 0 32px 0 12px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") right 10px center no-repeat;
font-size: 13px;
color: #333;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
min-width: 140px;
}
.umc-select:hover,
.methodist-select:hover { border-color: #3c8dbc; }
.umc-select:focus,
.methodist-select:focus { outline: none; border-color: #3c8dbc; box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.1); }
.umc-btn-apply { height: 36px; width: 36px; border: none; border-radius: 6px; background: #3c8dbc; color: #fff; cursor: pointer; }
/* Period Type Tabs */
.umc-period-tabs,
.methodist-period-tabs {
display: flex;
gap: 4px;
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
list-style: none;
padding-left: 0;
}
.umc-period-tabs .nav-item,
.methodist-period-tabs .nav-item {
margin: 0;
}
.umc-period-tab,
.methodist-period-tab {
padding: 8px 16px;
font-size: 13px;
color: #888;
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font-weight: 400;
}
.umc-period-tab:hover,
.methodist-period-tab:hover { color: #555; text-decoration: none; }
.umc-period-tab.active,
.methodist-period-tab.active { color: #3c8dbc; border-bottom-color: #3c8dbc; font-weight: 500; }
/* Tab badge (count) */
.umc-period-tab .tab-badge,
.methodist-period-tab .tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: #e9ecef;
color: #666;
font-size: 11px;
font-weight: 600;
padding: 0px 5px;
border-radius: 10px;
margin-left: 2px;
position: relative;
top: -6px;
min-width: 14px;
height: 14px;
}
.umc-period-tab.active .tab-badge,
.methodist-period-tab.active .tab-badge {
background: #3c8dbc;
color: #fff;
}
/* Age Group Tabs */
.umc-tabs,
.methodist-tabs {
display: flex;
gap: 4px;
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.umc-tab,
.methodist-tab {
padding: 8px 14px;
font-size: 13px;
color: #666;
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.umc-tab:hover,
.methodist-tab:hover { color: #333; text-decoration: none; }
.umc-tab.active,
.methodist-tab.active { color: #3c8dbc; border-bottom-color: #3c8dbc; }
.umc-tab-management,
.methodist-tab-management { color: #f39c12; }
.umc-tab-management:hover,
.methodist-tab-management:hover { color: #e08e0b; }
.umc-tab-management.active,
.methodist-tab-management.active { color: #f39c12; border-bottom-color: #f39c12; }
.umc-tab-analytics,
.methodist-tab-analytics { color: #00a65a; }
.umc-tab-analytics:hover,
.methodist-tab-analytics:hover { color: #008d4c; }
.umc-tab-analytics.active,
.methodist-tab-analytics.active { color: #00a65a; border-bottom-color: #00a65a; }
/* UMC Stats */
.umc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.umc-stat { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 20px; text-align: center; position: relative; overflow: hidden; }
.umc-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.umc-stat-total::before { background: linear-gradient(90deg, #3c8dbc, #5bc0de); }
.umc-stat-high::before { background: linear-gradient(90deg, #27ae60, #2ecc71); }
.umc-stat-medium::before { background: linear-gradient(90deg, #f39c12, #f1c40f); }
.umc-stat-low::before { background: linear-gradient(90deg, #e74c3c, #c0392b); }
.umc-stat-value { font-size: 32px; font-weight: 700; color: #333; }
.umc-stat-unit { font-size: 18px; color: #666; }
.umc-stat-label { font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; margin-top: 8px; }
.umc-stat-sub { font-size: 13px; color: #999; margin-top: 4px; }
/* UMC Charts (scoped to umc-cabinet) */
.umc-cabinet .charts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.umc-cabinet .chart-box { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 20px; }
.umc-cabinet .chart-box-wide { grid-column: span 2; }
.umc-cabinet .chart-title { font-size: 14px; font-weight: 600; color: #555; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.umc-cabinet .chart-title i { color: #3c8dbc; }
/* UMC Section */
.umc-section { margin-bottom: 24px; }
.umc-section-title { font-size: 14px; font-weight: 600; color: #555; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.umc-section-title i { color: #3c8dbc; }
/* Summary cells */
.summary-cell-high { background-color: rgba(39, 174, 96, 0.15) !important; }
.summary-cell-medium { background-color: rgba(243, 156, 18, 0.15) !important; }
.summary-cell-low { background-color: rgba(231, 76, 60, 0.15) !important; }
.totals-row { background: #f8f9fa !important; font-weight: 600; }
.totals-row th, .totals-row td { border-top: 2px solid #dee2e6 !important; border-color: #dee2e6 !important; }
/* Skeleton loading */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.skeleton-line { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; }
.skeleton-lg { width: 80px; height: 32px; }
.skeleton-sm { width: 100px; height: 14px; }
.skeleton-chart { height: 250px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
.skeleton-table { display: flex; flex-direction: column; gap: 8px; }
.skeleton-row { height: 40px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; }
.skeleton-header { height: 48px; }
/* Responsive */
@media (max-width: 992px) { .umc-cabinet .charts-row { grid-template-columns: 1fr; } .umc-cabinet .chart-box-wide { grid-column: span 1; } }
@media (max-width: 768px) { .umc-stats { grid-template-columns: repeat(2, 1fr); } }
/* UMC Dashboard */
.umc-dashboard .card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); border: none; }
.umc-dashboard .progress { border-radius: 10px; }
.umc-dashboard .progress-bar { border-radius: 10px; }
/* UMC Skeleton Loading Animation */
@keyframes umc-skeleton-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.umc-skeleton-stats { display: flex; gap: 16px; margin-bottom: 20px; }
.umc-skeleton-stat { flex: 1; min-width: 120px; max-width: 200px; padding: 16px; background: #fff; border: 1px solid #eee; border-radius: 10px; border-top: 3px solid #e0e0e0; }
.umc-skeleton-stat:nth-child(1) { border-top-color: #b8d4e8; }
.umc-skeleton-stat:nth-child(2) { border-top-color: #b8e8c8; }
.umc-skeleton-stat:nth-child(3) { border-top-color: #f0d8a8; }
.umc-skeleton-stat:nth-child(4) { border-top-color: #d8c8e8; }
.umc-skeleton-stat-value { width: 60px; height: 28px; margin: 0 auto 8px; border-radius: 4px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: umc-skeleton-pulse 1.5s ease-in-out infinite; }
.umc-skeleton-stat-label { width: 80px; height: 12px; margin: 0 auto; border-radius: 4px; background: linear-gradient(90deg, #f5f5f5 25%, #eee 50%, #f5f5f5 75%); background-size: 200% 100%; animation: umc-skeleton-pulse 1.5s ease-in-out infinite; }
.umc-skeleton-table { border: 1px solid #dee2e6; border-radius: 4px; overflow: hidden; margin-top: 20px; }
.umc-skeleton-row { display: flex; gap: 1px; background: #dee2e6; }
.umc-skeleton-row.header { background: #f8f9fa; }
.umc-skeleton-row.header .umc-skeleton-cell { height: 40px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); }
.umc-skeleton-cell { height: 36px; background: linear-gradient(90deg, #fafafa 25%, #f5f5f5 50%, #fafafa 75%); background-size: 200% 100%; animation: umc-skeleton-pulse 1.5s ease-in-out infinite; }
.umc-skeleton-row:nth-child(odd) .umc-skeleton-cell { background: linear-gradient(90deg, #fff 25%, #fafafa 50%, #fff 75%); background-size: 200% 100%; animation: umc-skeleton-pulse 1.5s ease-in-out infinite; }
/* UMC Content fade in */
.umc-content-fade { animation: umcFadeIn 0.3s ease-out; }
@keyframes umcFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* UMC Cabinet */
.umc-cabinet .box { border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.umc-cabinet .box-header { padding: 15px; border-bottom: 1px solid #f4f4f4; }
.umc-cabinet .box-header .box-title { font-size: 18px; font-weight: 500; }
.umc-cabinet .box-body { padding: 15px; }
.umc-cabinet .table-container { background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-top: 20px; }
.umc-cabinet .table-scroll-wrapper { overflow-x: auto; cursor: grab; user-select: none; }
.umc-cabinet .table-scroll-wrapper.dragging { cursor: grabbing; }
.umc-cabinet .table { margin-bottom: 0; font-size: 12px; border-color: #dee2e6; }
.umc-cabinet .table thead th { background: #f8f9fa; border: 1px solid #dee2e6; font-weight: normal; font-size: 11px; padding: 8px 6px; white-space: normal; color: #000 !important; }
.umc-cabinet .table th.sticky-col, .umc-cabinet .table td.sticky-col { position: sticky; background: #fff; z-index: 2; }
.umc-cabinet .table thead th.sticky-col { background: #f8f9fa; z-index: 3; }
.umc-cabinet .table .sticky-col-0 { left: 0; min-width: 35px; max-width: 35px; }
.umc-cabinet .table .sticky-col-1 { left: 35px; min-width: 160px; border-left: 1px solid #dee2e6 !important; box-shadow: 2px 0 4px rgba(0,0,0,0.06); }
.umc-cabinet .table tbody tr:nth-child(odd) td.sticky-col { background: #fff; }
.umc-cabinet .table tbody tr:nth-child(even) td.sticky-col { background: #f9f9f9; }
.umc-cabinet .table tbody tr:hover td.sticky-col { background: #f5f5f5; }
.umc-cabinet .table tfoot th.sticky-col { background: #f8f9fa; }
.umc-cabinet .table thead th.sz { font-size: 9px; white-space: normal; min-width: 50px; max-width: 60px; }
.umc-cabinet .table .category-header { background: #e8f4f8; min-width: 80px; }
.umc-cabinet .table tbody td { border: 1px solid #dee2e6; padding: 6px 8px; vertical-align: middle; }
.umc-cabinet .table tbody tr:hover { background-color: #f5f5f5; }
.umc-cabinet .table .totals-row { background: #f8f9fa; }
.umc-cabinet .table .totals-row th { border: 1px solid #dee2e6 !important; border-top: 2px solid #dee2e6 !important; font-weight: 600; }
.umc-cabinet .table .percent-row { background: #fafafa; }
.umc-cabinet .table .percent-row th { border: 1px solid #dee2e6 !important; font-weight: normal; font-size: 11px; color: #666; }
/* UMC Stats extended */
.umc-stat-lang { min-width: 180px; }
.umc-lang-row { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; }
.umc-lang-item { font-size: 13px; color: #666; }
.umc-lang-item b { font-size: 16px; color: #333; display: block; }
.umc-stat:nth-child(1) { border-top: 3px solid #3c8dbc; }
.umc-stat:nth-child(2) { border-top: 3px solid #00a65a; }
.umc-stat:nth-child(3) { border-top: 3px solid #f39c12; }
.umc-stat:nth-child(4) { border-top: 3px solid #9b59b6; }
/* UMC Management Panel */
.umc-management-panel { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.umc-management-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.umc-management-header h4 { margin: 0; color: #333; }
.umc-management-body .row { align-items: flex-end; }
/* UMC Modal */
.umc-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.umc-modal-content { background: #fff; border-radius: 8px; width: 500px; max-width: 90%; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.umc-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #eee; }
.umc-modal-header h4 { margin: 0; }
.umc-modal-header .close { background: none; border: none; font-size: 24px; cursor: pointer; color: #999; }
.umc-modal-body { padding: 20px; }
.umc-modal-footer { padding: 15px 20px; border-top: 1px solid #eee; text-align: right; }
.umc-modal-footer .btn { margin-left: 10px; }
/* UMC Kindergarten Panel */
.umc-kindergarten-panel { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
/* Management Card Grid */
.mgmt-section { margin-bottom: 30px; }
.mgmt-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.mgmt-section-title { font-size: 16px; font-weight: 500; color: #333; margin: 0; display: flex; align-items: center; gap: 8px; }
.mgmt-section-title i { color: #3c8dbc; }
.mgmt-section-subtitle { font-weight: 400; color: #888; font-size: 14px; margin-left: 8px; }
.mgmt-count { font-weight: 400; color: #999; font-size: 14px; }
.mgmt-search { position: relative; width: 220px; }
.mgmt-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 13px; }
.mgmt-search input { width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 13px; transition: all 0.2s; }
.mgmt-search input:focus { outline: none; border-color: #3c8dbc; box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.1); }
.mgmt-search input::placeholder { color: #bbb; }
/* District Cards */
.district-cards-wrapper { max-height: 280px; overflow-y: auto; padding: 4px; margin: -4px; }
.district-cards-wrapper::-webkit-scrollbar { width: 6px; }
.district-cards-wrapper::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.district-cards-wrapper::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.district-cards-wrapper::-webkit-scrollbar-thumb:hover { background: #aaa; }
.district-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.district-card { background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); border: 2px solid #e9ecef; border-radius: 10px; padding: 14px 12px; text-align: center; cursor: pointer; transition: all 0.2s ease; position: relative; }
.district-card:hover { border-color: #3c8dbc; box-shadow: 0 4px 12px rgba(60, 141, 188, 0.15); transform: translateY(-2px); }
.district-card.active { border-color: #3c8dbc; background: linear-gradient(135deg, #e8f4fc 0%, #d4e9f7 100%); box-shadow: 0 4px 12px rgba(60, 141, 188, 0.2); }
.district-card.hidden { display: none; }
.district-card-icon { width: 40px; height: 40px; margin: 0 auto 10px; background: linear-gradient(135deg, #3c8dbc 0%, #2a6a8a 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; }
.district-card.active .district-card-icon { background: linear-gradient(135deg, #2a6a8a 0%, #1e4d63 100%); }
.district-card-name { font-size: 12px; font-weight: 500; color: #333; line-height: 1.3; }
.district-card-badge { position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; background: #00a65a; color: #fff; font-size: 12px; font-weight: 600; border-radius: 12px; display: none; align-items: center; justify-content: center; padding: 0 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.district-card-badge.has-count { display: flex; }
/* Kindergarten Cards */
.kindergarten-cards-wrapper { max-height: 400px; overflow-y: auto; padding: 4px; margin: -4px; }
.kindergarten-cards-wrapper::-webkit-scrollbar { width: 6px; }
.kindergarten-cards-wrapper::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.kindergarten-cards-wrapper::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.kindergarten-cards-wrapper::-webkit-scrollbar-thumb:hover { background: #aaa; }
.kindergarten-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.kg-card { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; transition: all 0.2s ease; }
.kg-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); background: #fafafa; }
.kg-card.status-sent { border-left: 3px solid #00a65a; }
.kg-card.status-revision_requested { border-left: 3px solid #f39c12; }
.kg-card-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.kg-card.status-sent .kg-card-icon { background: #d4edda; color: #155724; }
.kg-card.status-revision_requested .kg-card-icon { background: #fff3cd; color: #856404; }
.kg-card-body { flex: 1; min-width: 0; }
.kg-card-name { font-size: 13px; font-weight: 500; color: #333; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-card-status { font-size: 11px; color: #888; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.kg-card-status i { font-size: 9px; }
.kg-card.status-sent .kg-card-status { color: #155724; }
.kg-card.status-revision_requested .kg-card-status { color: #856404; }
.kg-card-actions { flex-shrink: 0; }
.kg-card-btn { width: 28px; height: 28px; border: none; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.15s ease; }
.kg-card-btn-revision { background: #fff3cd; color: #856404; }
.kg-card-btn-revision:hover { background: #f39c12; color: #fff; }
/* Kindergarten Card Skeleton */
.kg-card-skeleton { background: #fff; border: 1px solid #e9ecef; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 14px; }
.kg-skeleton-icon { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: umc-skeleton-pulse 1.5s ease-in-out infinite; }
.kg-skeleton-body { flex: 1; }
.kg-skeleton-line { height: 14px; border-radius: 4px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: umc-skeleton-pulse 1.5s ease-in-out infinite; margin-bottom: 8px; }
.kg-skeleton-line:last-child { width: 60%; margin-bottom: 0; }
/* No data message */
.kg-no-data { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: #888; }
.kg-no-data i { font-size: 48px; color: #ddd; margin-bottom: 16px; display: block; }
/* Methodist Cabinet */
.methodist-cabinet .table-container { background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-top: 20px; }
.methodist-cabinet .table-scroll-wrapper { overflow-x: auto; cursor: grab; user-select: none; }
.methodist-cabinet .table-scroll-wrapper.dragging { cursor: grabbing; }
.methodist-cabinet .table { margin-bottom: 0; font-size: 12px; border-color: #dee2e6; }
.methodist-cabinet .table thead th { background: #f8f9fa; border: 1px solid #dee2e6; font-weight: normal; font-size: 11px; padding: 8px 6px; white-space: normal; color: #000 !important; }
.methodist-cabinet .table th.sticky-col, .methodist-cabinet .table td.sticky-col { position: sticky; background: #fff; z-index: 2; }
.methodist-cabinet .table thead th.sticky-col { background: #f8f9fa; z-index: 3; }
.methodist-cabinet .table thead th.sticky-col-2 { background: #f8f9fa; z-index: 3; }
.methodist-cabinet .table .sticky-col-0 { left: 0; min-width: 35px; max-width: 35px; }
.methodist-cabinet .table .sticky-col-1 { left: 35px; min-width: 160px; }
.methodist-cabinet .table .sticky-col-2 { left: 195px; min-width: 140px; border-right: 1px solid #dee2e6 !important; box-shadow: 2px 0 4px rgba(0,0,0,0.06); }
.methodist-cabinet .table tbody tr:nth-child(odd) td.sticky-col { background: #fff; }
.methodist-cabinet .table tbody tr:nth-child(even) td.sticky-col { background: #f9f9f9; }
.methodist-cabinet .table tbody tr:hover td.sticky-col { background: #f5f5f5; }
.methodist-cabinet .table tfoot th.sticky-col { background: #f8f9fa; }
.methodist-cabinet .table .totals-row td.sticky-col { background: #f8f9fa; }
.methodist-cabinet .table .percent-row td.sticky-col, .methodist-cabinet .table .percentage-row td.sticky-col { background: #fafafa; }
.methodist-cabinet .table thead th.sz { font-size: 9px; white-space: normal; min-width: 50px; max-width: 60px; }
.methodist-cabinet .table thead th.vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; vertical-align: middle; white-space: nowrap; padding: 10px 4px; font-size: 11px; min-width: 30px; max-width: 35px; }
.methodist-cabinet .table .category-header { background: #e8f4f8; min-width: 80px; }
.methodist-cabinet .table tbody td { border: 1px solid #dee2e6; padding: 6px 8px; vertical-align: middle; }
.methodist-cabinet .table tbody tr:hover { background-color: #f5f5f5; }
.methodist-cabinet .table .totals-row { background: #f8f9fa; }
.methodist-cabinet .table .totals-row th { border: 1px solid #dee2e6 !important; border-top: 2px solid #dee2e6 !important; font-weight: 600; }
.methodist-cabinet .table .percent-row { background: #fafafa; }
.methodist-cabinet .table .percent-row th { border: 1px solid #dee2e6 !important; font-weight: normal; font-size: 11px; color: #666; }
/* Chart error state */
.chart-error { display: none; align-items: center; justify-content: center; height: 100%; width: 100%; font-size: 14px; color: #ff3b30; text-align: center; padding: 20px; }
/* Print styles for methodist */
@media print {
.methodist-filters, .methodist-period-tabs, .methodist-tabs, .btn-export, .box-header { display: none !important; }
.box { box-shadow: none; border: none; margin: 0; padding: 0; }
.box-body { padding: 0; }
.table { font-size: 9pt; }
.table th, .table td { padding: 5px 3px; }
}
/* SVOD (Summary for kindergarten methodist) */
@keyframes svod-skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.svod-skeleton-stats { display: flex; gap: 16px; margin-bottom: 20px; }
.svod-skeleton-stat { flex: 1; min-width: 120px; max-width: 200px; padding: 16px; background: #fff; border: 1px solid #eee; border-radius: 10px; border-top: 3px solid #e0e0e0; }
.svod-skeleton-stat:nth-child(1) { border-top-color: #b8d4e8; }
.svod-skeleton-stat:nth-child(2) { border-top-color: #b8e8c8; }
.svod-skeleton-stat:nth-child(3) { border-top-color: #f0d8a8; }
.svod-skeleton-stat-value { width: 60px; height: 28px; margin: 0 auto 8px; border-radius: 4px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: svod-skeleton-pulse 1.5s ease-in-out infinite; }
.svod-skeleton-stat-label { width: 80px; height: 12px; margin: 0 auto; border-radius: 4px; background: linear-gradient(90deg, #f5f5f5 25%, #eee 50%, #f5f5f5 75%); background-size: 200% 100%; animation: svod-skeleton-pulse 1.5s ease-in-out infinite; }
.svod-skeleton-table { border: 1px solid #dee2e6; border-radius: 4px; overflow: hidden; margin-top: 20px; }
.svod-skeleton-row { display: flex; gap: 1px; background: #dee2e6; }
.svod-skeleton-row.header { background: #f8f9fa; }
.svod-skeleton-row.header .svod-skeleton-cell { height: 40px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); }
.svod-skeleton-cell { height: 36px; background: linear-gradient(90deg, #fafafa 25%, #f5f5f5 50%, #fafafa 75%); background-size: 200% 100%; animation: svod-skeleton-pulse 1.5s ease-in-out infinite; }
/* Summary page box */
.summary-page .box { border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.summary-page .box-header { padding: 15px; border-bottom: 1px solid #f4f4f4; }
.summary-page .box-body { padding: 15px; }
/* SVOD Filters */
.svod-filters { margin-bottom: 20px; }
.svod-filters-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svod-select { height: 36px; padding: 0 32px 0 12px; border: 1px solid #e0e0e0; border-radius: 6px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") right 10px center no-repeat; font-size: 13px; color: #333; cursor: pointer; -webkit-appearance: none; min-width: 140px; }
.svod-select:hover { border-color: #3c8dbc; }
.svod-select:focus { outline: none; border-color: #3c8dbc; box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.1); }
.svod-btn-apply { height: 36px; width: 36px; border: none; border-radius: 6px; background: #3c8dbc; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.svod-btn-apply:hover { background: #367fa9; }
/* SVOD Period Tabs */
.svod-period-tabs { display: flex; gap: 8px; padding: 4px; background: #e8f4fc; border-radius: 8px; margin-bottom: 15px; }
.svod-period-tab { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #3c8dbc; text-decoration: none; white-space: nowrap; transition: all 0.2s; }
.svod-period-tab:hover { background: rgba(255,255,255,0.8); text-decoration: none; color: #367fa9; }
.svod-period-tab.active { background: #3c8dbc; color: #fff; }
/* SVOD Age Tabs */
.svod-tabs { display: flex; gap: 6px; padding: 4px; background: #f5f5f5; border-radius: 8px; margin-bottom: 20px; overflow-x: auto; }
.svod-tab { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; color: #666; text-decoration: none; white-space: nowrap; transition: all 0.2s; }
.svod-tab:hover { color: #333; background: rgba(255,255,255,0.6); text-decoration: none; }
.svod-tab.active { background: #fff; color: #3c8dbc; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
/* SVOD Stats */
.svod-stats { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.svod-stat { flex: 1; min-width: 120px; max-width: 200px; padding: 16px; background: linear-gradient(135deg, #fff 0%, #fafafa 100%); border: 1px solid #eee; border-radius: 10px; text-align: center; }
.svod-stat-value { font-size: 28px; font-weight: 600; color: #333; line-height: 1; margin-bottom: 4px; }
.svod-stat-unit { font-size: 16px; font-weight: 400; color: #999; }
.svod-stat-label { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.svod-stat-sub { font-size: 11px; color: #aaa; }
.svod-stat:nth-child(1) { border-top: 3px solid #3c8dbc; }
.svod-stat:nth-child(2) { border-top: 3px solid #00a65a; }
.svod-stat:nth-child(3) { border-top: 3px solid #f39c12; }
/* Summary page table */
.summary-page .table-container { background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-top: 20px; }
.summary-page .table-scroll-wrapper { overflow-x: auto; cursor: grab; user-select: none; }
.summary-page .table { margin-bottom: 0; font-size: 12px; border-color: #dee2e6; }
.summary-page .table thead th { background: #f8f9fa; border: 1px solid #dee2e6; font-weight: normal; font-size: 11px; padding: 8px 6px; white-space: normal; color: #000 !important; }
.summary-page .table .category-header { background: #e8f4f8; min-width: 80px; }
.summary-page .table tbody td { border: 1px solid #dee2e6; padding: 6px 8px; vertical-align: middle; }
.summary-page .table tbody tr:hover { background-color: #f5f5f5; }
.summary-page .table .totals-row { background: #f8f9fa; }
.summary-page .table .totals-row th { border: 1px solid #dee2e6 !important; border-top: 2px solid #dee2e6 !important; font-weight: 600; }
/* SVOD Actions */
.svod-actions { margin-top: 30px; text-align: center; padding: 20px; background: #f8f9fa; border-radius: 8px; }
.svod-actions .btn-lg { padding: 12px 30px; font-size: 16px; }
.svod-actions .help-block { margin-top: 10px; color: #999; }
/* Main Tabs (methodist SVOD) */
.main-tabs { display: flex; gap: 4px; margin-bottom: 20px; padding: 4px; background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%); border-radius: 10px; border: 1px solid #bae6fd; }
.main-tab { flex: 0 0 auto; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #0369a1; text-decoration: none; display: flex; align-items: center; gap: 8px; transition: all 0.2s; }
.main-tab:hover { color: #0284c7; background: rgba(255,255,255,0.6); text-decoration: none; }
.main-tab.active { background: #fff; color: #0ea5e9; box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15); }
.main-tab i { font-size: 16px; }
/* Methodist SVOD box */
.methodist-svod .box { border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.methodist-svod .box-header { padding: 15px; border-bottom: 1px solid #f4f4f4; }
.methodist-svod .box-body { padding: 15px; }
/* Methodist SVOD table */
.methodist-svod .table-container { background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-top: 20px; }
.methodist-svod .table-scroll-wrapper { overflow-x: auto; cursor: grab; user-select: none; }
.methodist-svod .table { margin-bottom: 0; font-size: 12px; border-color: #dee2e6; }
.methodist-svod .table thead th { background: #f8f9fa; border: 1px solid #dee2e6; font-weight: normal; font-size: 11px; padding: 8px 6px; white-space: normal; color: #000 !important; }
.methodist-svod .table .category-header { background: #e8f4f8; min-width: 80px; }
.methodist-svod .table tbody td { border: 1px solid #dee2e6; padding: 6px 8px; vertical-align: middle; }
.methodist-svod .table tbody tr:hover { background-color: #f5f5f5; }
.methodist-svod .table .totals-row { background: #f8f9fa; }
.methodist-svod .table .totals-row th { border: 1px solid #dee2e6 !important; border-top: 2px solid #dee2e6 !important; font-weight: 600; }
/* === Таблица направлений развития === */
#dir-table { font-size: 11px; table-layout: fixed; width: 100%; }
#dir-table thead { position: sticky; top: 0; z-index: 2; background: #fff; }
#dir-table th.dir-num { width: 30px; text-align: center; vertical-align: middle; }
#dir-table th.dir-region { vertical-align: middle; width: 120px; min-width: 120px; }
#dir-table th.dir-org { vertical-align: middle; width: 250px; min-width: 250px; }
#dir-table th.dir-group { text-align: center; background: #f0f2ff; border-bottom: 1px solid #ddd; }
#dir-table th.dir-group-total { text-align: center; background: #e8eaf6; border-bottom: 1px solid #ddd; font-weight: 800; }
#dir-table th.dir-lvl-high { text-align: center; font-size: 10px; color: #2e7d32; background: #f8fff8; }
#dir-table th.dir-lvl-mid { text-align: center; font-size: 10px; color: #e65100; background: #fffbf0; }
#dir-table th.dir-lvl-low { text-align: center; font-size: 10px; color: #c62828; background: #fff5f5; }
#dir-table th.dir-lvl-high-t { text-align: center; font-size: 10px; color: #2e7d32; background: #e8f5e9; }
#dir-table th.dir-lvl-mid-t { text-align: center; font-size: 10px; color: #e65100; background: #fff3e0; }
#dir-table th.dir-lvl-low-t { text-align: center; font-size: 10px; color: #c62828; background: #fce4ec; }
#dir-table th.dir-sub { text-align: center; font-size: 9px; color: #888; }
#dir-table td.dir-num { text-align: center; color: #aaa; }
#dir-table td.dir-region { font-size: 11px; color: #666; width: 120px; min-width: 120px; word-wrap: break-word; overflow-wrap: break-word; }
#dir-table td.dir-org { font-weight: 600; font-size: 11px; width: 250px; min-width: 250px; word-wrap: break-word; overflow-wrap: break-word; }
#dir-table td.dir-c { text-align: center; }
#dir-table .dh { color: #2e7d32; } .dh-b { color: #2e7d32; font-weight: 600; }
#dir-table .dm { color: #e65100; } .dm-b { color: #e65100; font-weight: 600; }
#dir-table .dl { color: #c62828; } .dl-b { color: #c62828; font-weight: 600; }
#dir-table .d0 { color: #ddd; }
#dir-table .dt { background: #f5f5ff; }
#dir-table .dt-h { background: #f5f5ff; color: #2e7d32; font-weight: 700; }
#dir-table .dt-m { background: #f5f5ff; color: #e65100; font-weight: 700; }
#dir-table .dt-l { background: #f5f5ff; color: #c62828; font-weight: 700; }
#dir-table tfoot tr { background: #f8f9ff; font-weight: 700; }
#dir-table tfoot .ft-h { text-align: center; color: #2e7d32; }
#dir-table tfoot .ft-m { text-align: center; color: #e65100; }
#dir-table tfoot .ft-l { text-align: center; color: #c62828; }
#dir-table tfoot .ft-th { text-align: center; color: #2e7d32; background: #e8f5e9; font-weight: 800; }
#dir-table tfoot .ft-tm { text-align: center; color: #e65100; background: #fff3e0; font-weight: 800; }
#dir-table tfoot .ft-tl { text-align: center; color: #c62828; background: #fce4ec; font-weight: 800; }