/*
 * Bundle: core.min.css
 * Generated: 2025-11-08 22:52:50
 * Files: 5
 */

/* === bitrix-portal.css === */
:root {
--bitrix-dark-bg: linear-gradient(180deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.95) 100%);
--bitrix-top-height: 60px;
--bitrix-bottom-height: 50px;
--bitrix-sidebar-width: 169px;
--bitrix-sidebar-collapsed: 85px;
--bitrix-primary: #667eea;
--bitrix-secondary: #764ba2;
--bitrix-text-light: rgba(255, 255, 255, 0.9);
--bitrix-text-muted: rgba(255, 255, 255, 0.6);
--bitrix-border: rgba(255, 255, 255, 0.1);
--bitrix-hover: rgba(255, 255, 255, 0.1);
--transition-speed: 0.3s;
}
.bitrix-portal-wrapper {
position: relative;
min-height: 100vh;
background: #f5f7fa;
font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.bitrix-top-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--bitrix-top-height);
background: var(--bitrix-dark-bg);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 10050;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.bitrix-top-bar button:focus-visible,
.bitrix-top-bar a:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color, #3b82f6);
border-radius: 8px;
}
.bitrix-top-bar-left,
.bitrix-top-bar-center,
.bitrix-top-bar-right {
display: flex;
align-items: center;
gap: 15px;
}
.portal-logo {
display: flex;
align-items: center;
gap: 10px;
color: white;
font-size: 18px;
font-weight: 700;
}
.portal-logo i {
font-size: 24px;
color: var(--bitrix-primary);
}
.search-container {
position: relative;
width: 400px;
}
.search-container i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.5);
}
.top-search-input {
width: 100%;
padding: 10px 45px 10px 15px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--bitrix-border);
border-radius: 8px;
color: white;
font-size: 14px;
transition: all var(--transition-speed);
}
.top-search-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.15);
border-color: var(--bitrix-primary);
}
.top-search-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.top-bar-icon-btn {
position: relative;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 8px;
color: white;
font-size: 18px;
cursor: pointer;
transition: all var(--transition-speed);
}
.bitrix-top-bar .top-bar-icon-btn {
background: none !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
width: auto !important;
height: auto !important;
padding: 0 10px !important;
margin: 0 2px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.2s;
}
.bitrix-top-bar .top-bar-icon-btn:hover {
background: none !important;
}
.bitrix-top-bar .top-bar-engraved-icon,
.bitrix-top-bar .top-bar-icon-btn i {
color: #fff !important;
text-shadow:
0 0 8px var(--accent-color, #667eea),
0 0 2px #fff,
0 1px 0 #222;
filter: brightness(1.3) drop-shadow(0 0 4px var(--accent-color, #667eea));
font-size: 22px !important;
transition: color 0.2s, text-shadow 0.2s;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.bitrix-top-bar .top-bar-icon-btn:hover i {
color: #ffe066 !important;
text-shadow:
0 0 12px #ffe066,
0 0 4px #fff,
0 2px 0 #222;
}
.bitrix-top-bar .top-bar-icon-btn:active i {
filter: brightness(1.1) drop-shadow(0 0 6px var(--accent-color, #3b82f6));
}
.bitrix-top-bar .notification-badge {
left: 18px !important;
top: -8px !important;
font-size: 12px !important;
width: 22px !important;
height: 22px !important;
box-shadow: 0 0 8px #ef4444;
z-index: 1;
}
.notification-badge {
position: absolute;
top: -6px;
left: -6px;
width: 20px;
height: 20px;
background: #ef4444;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: white;
box-shadow: 0 0 0 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.25);
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--bitrix-primary);
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bitrix-sidebar {
position: fixed;
right: 0;
top: var(--bitrix-top-height);
bottom: var(--bitrix-bottom-height);
width: var(--bitrix-sidebar-width);
background: var(--bitrix-dark-bg);
z-index: 99999;
transition: width var(--transition-speed);
overflow: hidden;
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
}
.bitrix-sidebar.collapsed {
width: var(--bitrix-sidebar-collapsed);
}
.sidebar-toggle {
width: 100%;
height: 50px;
background: rgba(255, 255, 255, 0.05);
border: none;
border-bottom: 1px solid var(--bitrix-border);
color: white;
font-size: 20px;
cursor: pointer;
transition: background var(--transition-speed);
}
.sidebar-toggle:hover {
background: rgba(255, 255, 255, 0.1);
}
.sidebar-content {
height: calc(100% - 50px);
overflow-y: auto;
overflow-x: hidden;
}
.sidebar-content::-webkit-scrollbar {
width: 6px;
}
.sidebar-content::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
.sidebar-nav {
padding: 10px 0;
}
.nav-group {
margin-bottom: 20px;
}
.nav-group-label {
padding: 10px 20px;
font-size: 11px;
font-weight: 700;
color: var(--bitrix-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 1;
transition: opacity var(--transition-speed);
}
.bitrix-sidebar.collapsed .nav-group-label {
opacity: 0;
height: 0;
padding: 0;
overflow: hidden;
}
.nav-link {
display: flex;
align-items: center;
gap: 15px;
padding: 12px 20px;
color: var(--bitrix-text-light);
text-decoration: none;
transition: all var(--transition-speed);
position: relative;
}
.nav-link:hover {
background: var(--bitrix-hover);
}
.nav-link.active {
background: linear-gradient(90deg, var(--accent-color, var(--bitrix-primary)) 0%, var(--accent-color-strong, var(--bitrix-secondary)) 100%);
}
.nav-link.active::before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 3px;
background: #fff;
box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
}
.nav-link i {
font-size: 18px;
min-width: 24px;
text-align: center;
}
.nav-link span {
font-size: 14px;
font-weight: 500;
white-space: nowrap;
opacity: 1;
transition: opacity var(--transition-speed);
}
.nav-link .nav-badge {
background: #ef4444;
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
margin-right: auto;
margin-left: 8px;
font-weight: 600;
min-width: 18px;
text-align: center;
line-height: 1.2;
}
.bitrix-sidebar.collapsed .nav-link span {
opacity: 0;
width: 0;
overflow: hidden;
}
.bitrix-sidebar.collapsed .nav-link .nav-badge {
position: absolute;
top: 8px;
left: 8px;
margin: 0;
}
.bitrix-sidebar.collapsed .nav-link {
justify-content: center;
position: relative;
}
.bitrix-main-content {
margin-top: var(--bitrix-top-height);
margin-bottom: var(--bitrix-bottom-height);
margin-right: var(--bitrix-sidebar-width);
padding: 30px;
min-height: calc(100vh - var(--bitrix-top-height) - var(--bitrix-bottom-height));
background: var(--color-bg-primary, #ffffff);
transition: margin-right var(--transition-speed);
}
.sidebar-nav .nav-link:focus-visible {
outline: none;
box-shadow: inset 0 0 0 var(--focus-ring-width, 2px) rgba(255,255,255,0.25);
border-radius: 8px;
}
.bitrix-sidebar.collapsed ~ .bitrix-main-content {
margin-right: var(--bitrix-sidebar-collapsed);
}
.content-section {
display: none;
}
.content-section.active {
display: block;
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid var(--color-border, #e2e8f0);
}
.section-header h1 {
font-size: 28px;
font-weight: 700;
color: var(--color-text-primary, #1e293b);
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.section-header h1 i {
color: var(--bitrix-primary);
}
.section-subtitle {
color: var(--color-text-secondary, #64748b);
font-size: 14px;
margin-top: 5px;
}
.section-header .section-actions {
display: flex;
align-items: center;
gap: 8px;
}
.section-header .section-actions > * {
border-radius: 8px;
}
.section-header .section-actions a,
.section-header .section-actions button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--color-gray-100);
color: var(--color-gray-800);
border: 1px solid var(--color-gray-200);
border-radius: 8px;
text-decoration: none;
transition: var(--transition-fast);
}
.section-header .section-actions a:hover,
.section-header .section-actions button:hover {
background: var(--color-gray-200);
}
.section-header .section-actions a:focus-visible,
.section-header .section-actions button:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color, #3b82f6);
}
.section-header.sticky {
position: sticky;
top: calc(var(--bitrix-top-height) + 10px);
background: inherit;
z-index: var(--z-index-sticky, 1020);
}
.btn-primary {
padding: 10px 20px;
background: linear-gradient(135deg, var(--bitrix-primary) 0%, var(--bitrix-secondary) 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all var(--transition-speed);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 15px;
transition: all var(--transition-speed);
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
}
.stat-icon.bg-blue { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.stat-icon.bg-green { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.stat-icon.bg-orange { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.stat-icon.bg-purple { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.stat-content {
flex: 1;
}
.stat-value {
font-size: 28px;
font-weight: 700;
color: #1e293b;
margin-bottom: 4px;
}
.stat-label {
font-size: 13px;
color: #64748b;
}
.dashboard-widgets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
}
.widget {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.widget-header {
padding: 20px;
border-bottom: 1px solid #e2e8f0;
}
.widget-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #1e293b;
display: flex;
align-items: center;
gap: 8px;
}
.widget-content {
padding: 15px;
}
.activity-item {
display: flex;
align-items: center;
gap: 15px;
padding: 12px;
border-radius: 8px;
transition: background var(--transition-speed);
}
.activity-item:hover {
background: #f8fafc;
}
.activity-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
}
.activity-details {
flex: 1;
}
.activity-title {
font-size: 14px;
font-weight: 500;
color: #1e293b;
margin-bottom: 4px;
}
.activity-time {
font-size: 12px;
color: #64748b;
}
.content-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
text-align: center;
}
.content-placeholder h2 {
font-size: 24px;
color: #1e293b;
margin: 10px 0;
}
.content-placeholder p {
font-size: 14px;
color: #64748b;
}
.bitrix-bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--bitrix-bottom-height);
background: var(--bitrix-dark-bg);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 1000;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
}
.bottom-bar-left,
.bottom-bar-center,
.bottom-bar-right {
display: flex;
align-items: center;
gap: 15px;
}
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
.status-indicator.online {
background: #10b981;
animation: pulse-status 2s ease-in-out infinite;
}
@keyframes pulse-status {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.status-text {
color: var(--bitrix-text-light);
font-size: 13px;
font-weight: 500;
}
.bottom-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: linear-gradient(135deg, var(--bitrix-primary) 0%, var(--bitrix-secondary) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 9999px;
color: white;
font-size: 13px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
transition: all var(--transition-speed);
}
.bottom-btn:hover {
filter: brightness(1.05);
transform: translateY(-1px);
}
.bottom-btn:active {
transform: translateY(0);
filter: brightness(0.98);
}
.bottom-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.35);
}
.bottom-btn i {
font-size: 16px;
}
.version-text {
color: var(--bitrix-text-muted);
font-size: 12px;
}
#onlineUsersBtn {
position: relative;
cursor: pointer;
}
#onlineUsersBtn .user-count-badge {
position: absolute;
top: -4px;
left: -4px;
background: #10b981;
color: white;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 9999px;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
#onlineUsersModal {
position: fixed;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
background: white;
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
padding: 16px;
min-width: 320px;
max-width: 400px;
max-height: 400px;
overflow-y: auto;
z-index: 10100;
display: none;
}
#onlineUsersModal.show {
display: block;
animation: slideUpFade 0.3s ease-out;
}
@keyframes slideUpFade {
from {
opacity: 0;
transform: translateX(-50%) translateY(10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
#onlineUsersModal .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #e5e7eb;
}
#onlineUsersModal .modal-title {
font-size: 16px;
font-weight: 700;
color: #111827;
}
#onlineUsersModal .close-btn {
background: none;
border: none;
font-size: 20px;
color: #6b7280;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.2s;
}
#onlineUsersModal .close-btn:hover {
background: #f3f4f6;
color: #111827;
}
#onlineUsersModal .users-list {
display: flex;
flex-direction: column;
gap: 8px;
}
#onlineUsersModal .user-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 8px;
transition: background 0.2s;
}
#onlineUsersModal .user-item:hover {
background: #f9fafb;
}
#onlineUsersModal .user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #10b981;
}
#onlineUsersModal .user-initial {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--bitrix-primary), var(--bitrix-secondary));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
border: 2px solid #10b981;
}
#onlineUsersModal .user-info {
flex: 1;
}
#onlineUsersModal .user-name {
font-size: 14px;
font-weight: 600;
color: #111827;
}
#onlineUsersModal .user-status {
font-size: 12px;
color: #10b981;
display: flex;
align-items: center;
gap: 4px;
}
#onlineUsersModal .user-status::before {
content: '';
width: 6px;
height: 6px;
background: #10b981;
border-radius: 50%;
display: inline-block;
animation: pulse-status 2s ease-in-out infinite;
}
#onlineUsersModal .empty-state {
text-align: center;
padding: 24px;
color: #6b7280;
}
#onlineUsersModal .empty-state i {
font-size: 48px;
color: #d1d5db;
margin-bottom: 8px;
}
#tp-fab,
.tp-fab {
display: none !important;
}
@media (max-width: 1024px) {
.bitrix-sidebar {
width: var(--bitrix-sidebar-collapsed);
}
.bitrix-sidebar .nav-link span,
.bitrix-sidebar .nav-group-label {
opacity: 0;
width: 0;
}
.bitrix-main-content {
margin-right: var(--bitrix-sidebar-collapsed);
}
.search-container {
width: 300px;
}
}
@media (max-width: 768px) {
.bitrix-top-bar {
padding: 0 10px;
}
.search-container {
display: none;
}
.portal-logo .portal-title {
display: none;
}
.bitrix-sidebar {
transform: translateX(100%);
}
.bitrix-sidebar.show {
transform: translateX(0);
}
.bitrix-main-content {
margin-right: 0;
padding: 15px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.dashboard-widgets {
grid-template-columns: 1fr;
}
.bottom-bar-center {
gap: 8px;
}
.bottom-btn span {
display: none;
}
}
@media (max-width: 480px) {
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.section-header h1 {
font-size: 22px;
}
.version-text {
display: none;
}
}

/* === top-controls.css === */
.top-control-bar {
display: none;
}
.no-notifications {
text-align: center;
padding: 3rem 1.5rem;
color: rgba(120, 120, 120, 0.8);
}
.no-notifications i {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
color: rgba(180, 180, 180, 0.6);
}
.no-notifications p {
margin: 0;
font-size: 1rem;
font-weight: 500;
}
.notification-badge {
position: absolute;
top: -10px;
right: -10px;
background: linear-gradient(135deg, #ff4d4f, #d9363e);
color: #fff;
border-radius: 999px;
min-width: 22px;
height: 22px;
padding: 0 6px;
font-size: 12px;
line-height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
border: 2px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
z-index: 20;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.notifications-panel,
#notificationsPanel {
position: absolute !important;
top: calc(100% + 8px) !important;
right: 0 !important;
width: 480px !important;
max-height: 600px !important;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(248, 250, 252, 0.9) 100%);
backdrop-filter: blur(25px) saturate(1.8);
-webkit-backdrop-filter: blur(25px) saturate(1.8);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.25),
0 12px 24px rgba(0, 0, 0, 0.15),
0 4px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
z-index: 999999999 !important;
display: none !important;
transform: translateY(-10px) scale(0.95) !important;
transform-origin: top right !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
overflow: hidden !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.notifications-wrapper > .notifications-panel::before {
content: '';
position: absolute;
top: -6px;
right: 14px;
width: 10px;
height: 10px;
background: inherit;
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.3);
transform: rotate(45deg);
box-shadow: -2px -2px 4px rgba(0,0,0,0.05);
}
.control-buttons {
position: relative;
}
.notifications-panel.active,
#notificationsPanel.active {
display: block !important;
transform: translateY(0) scale(1) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
overflow-y: auto !important;
z-index: 999999999 !important;
position: fixed !important;
animation: slideDownFade 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes slideDownFade {
0% {
opacity: 0;
transform: translateY(-10px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.notifications-panel.active::after { content: none !important; }
body .notifications-panel:not(.active),
body #notificationsPanel:not(.active),
.team-portal-container .notifications-panel:not(.active),
.main-header-row .notifications-panel:not(.active) {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
max-height: 0 !important;
overflow: hidden !important;
}
.notifications-panel[style*="display: block"]:not(.active),
.notifications-panel[style*="opacity: 1"]:not(.active),
.notifications-panel[style*="visibility: visible"]:not(.active) {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
body:not(.force-show-notifications) .notifications-panel:not(.active),
html .notifications-panel:not(.active),
* .notifications-panel:not(.active) {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
overflow: hidden !important;
}
body > .notifications-panel.active,
body > #notificationsPanel.active {
position: fixed !important;
top: calc(var(--header-height) + 8px) !important;
right: 20px !important;
}
.notifications-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem 1rem 1.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
background: transparent;
}
.notifications-header h3 {
margin: 0;
color: rgba(30, 30, 30, 0.95);
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.close-notifications {
background: rgba(0, 0, 0, 0.04);
border: none;
color: rgba(100, 100, 100, 0.8);
cursor: pointer;
font-size: 1rem;
padding: 0.5rem;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.close-notifications:hover {
background: rgba(0, 0, 0, 0.08);
color: rgba(50, 50, 50, 1);
transform: scale(1.05);
}
.notifications-content {
max-height: 380px;
padding: 0.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.notifications-content::-webkit-scrollbar {
width: 6px;
}
.notifications-content::-webkit-scrollbar-track {
background: transparent;
}
.notifications-content::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
.notifications-content::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
.no-notifications {
text-align: center;
padding: 2rem 1rem;
color: rgba(255, 255, 255, 0.6);
}
.main-header-row .control-buttons .notifications-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: none;
color: #e5e7eb;
height: var(--header-height);
padding: 0 8px;
}
.main-header-row .control-buttons .notifications-btn:hover {
background: rgba(255,255,255,0.06);
border-radius: 6px;
}
.main-header-row .control-buttons .notifications-btn .notification-badge {
position: static !important;
top: auto !important;
right: auto !important;
transform: none !important;
border-radius: 9999px !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 6px !important;
line-height: 18px !important;
font-size: 12px !important;
font-weight: 700 !important;
margin-inline-start: 6px !important;
border: 1px solid rgba(255,255,255,0.9) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
animation: none !important;
}
.no-notifications i {
font-size: 2rem;
margin-bottom: 0.5rem;
display: block;
}
.no-notifications p {
margin: 0;
font-size: 0.9rem;
}
.notification-item {
background: transparent;
border: none;
border-radius: 12px;
padding: 1rem;
margin: 0.25rem 0;
transition: all 0.2s ease;
cursor: pointer;
border-left: 3px solid transparent;
}
.notification-item:hover {
background: rgba(0, 0, 0, 0.04);
transform: translateX(2px);
}
.notification-item.unread {
border-left-color: #1877f2;
background: rgba(24, 119, 242, 0.05);
}
.notification-item.unread:hover {
background: rgba(24, 119, 242, 0.08);
}
.notification-title {
font-weight: 600;
color: rgba(30, 30, 30, 0.9);
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
.notification-message {
color: rgba(100, 100, 100, 0.8);
font-size: 0.8rem;
line-height: 1.3;
margin-bottom: 0.25rem;
}
.notification-time {
color: rgba(130, 130, 130, 0.7);
font-size: 0.75rem;
}
@media (max-width: 768px) {
.notifications-panel { width: 320px; max-height: 400px; right: 0; top: calc(100% + 8px) !important; }
.notifications-panel.active { right: 0 !important; top: calc(100% + 8px) !important; }
}
@media (max-width: 480px) {
.notifications-panel { width: calc(100vw - 20px); left: 10px; right: 10px; max-height: 350px; top: calc(100% + 8px) !important; }
.notifications-panel.active { width: calc(100vw - 20px) !important; left: 10px !important; right: 10px !important; top: calc(100% + 8px) !important; }
}
.notification-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.notification-title {
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
font-size: 0.9rem;
margin: 0;
}
.notification-time {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.6);
}
.notification-message {
color: rgba(255, 255, 255, 0.8);
font-size: 0.8rem;
line-height: 1.4;
margin: 0;
}
.notification-editor {
font-weight: 500;
color: rgba(52, 152, 219, 0.9);
}
body.dark-mode {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
color: #ffffff;
}
body.dark-mode .control-buttons {
background: rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .control-btn {
background: rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .notifications-panel {
background: rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .notifications-header {
background: rgba(0, 0, 0, 0.2);
border-bottom-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .notification-item {
background: rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .notification-item:hover {
background: rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.1);
}
body.light-mode {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #333333;
}
body.light-mode .control-buttons {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.4);
}
body.light-mode .control-btn {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
color: rgba(0, 0, 0, 0.8);
}
body.light-mode .control-btn:hover {
color: rgba(0, 0, 0, 0.9);
}
body.light-mode .notifications-panel {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.4);
}
body.light-mode .notifications-header {
background: rgba(255, 255, 255, 0.2);
border-bottom-color: rgba(255, 255, 255, 0.2);
}
body.light-mode .notifications-header h3 {
color: rgba(0, 0, 0, 0.8);
}
body.light-mode .close-notifications {
color: rgba(0, 0, 0, 0.6);
}
body.light-mode .close-notifications:hover {
color: rgba(0, 0, 0, 0.8);
}
body.light-mode .no-notifications {
color: rgba(0, 0, 0, 0.6);
}
body.light-mode .notification-item {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.2);
}
body.light-mode .notification-item:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.4);
}
body.light-mode .notification-title {
color: rgba(0, 0, 0, 0.9);
}
body.light-mode .notification-message {
color: rgba(0, 0, 0, 0.7);
}
body.light-mode .notification-time {
color: rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
.top-control-bar {
top: 10px;
left: 10px;
}
.notifications-panel {
top: 70px;
left: 10px;
right: 10px;
width: auto;
}
.control-btn {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
}
.notifications-panel.active,
#notificationsPanel.active {
z-index: 2147483647 !important;
position: fixed !important;
isolation: isolate !important;
}
.notifications-wrapper {
z-index: 2147483646 !important;
position: relative !important;
}
@media (max-width: 768px) {
.notifications-panel,
#notificationsPanel {
width: 90vw !important;
max-width: 400px !important;
right: 5vw !important;
left: auto !important;
}
}
@media (max-width: 480px) {
.notifications-panel,
#notificationsPanel {
width: 95vw !important;
max-width: none !important;
right: 2.5vw !important;
max-height: 70vh !important;
}
}

/* === spacing-fix.css === */
.main-header-row {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
padding: 0 12px !important;
height: var(--header-height) !important;
z-index: 10000 !important;
border: none !important;
background: #0a0a0a !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
.main-header-row::after,
.main-header-row + * {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.dynamic-info-bar {
position: fixed !important;
top: var(--header-height) !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
padding: 15px 0 !important;
z-index: 9998 !important;
background: #1e293b !important;
border: none !important;
min-height: 70px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
.dynamic-info-bar .container {
margin: 0 auto !important;
padding: 0 1rem !important;
}
.dynamic-info-bar .info-item {
margin: 0 !important;
padding: 0 !important;
}
.dynamic-info-bar::after,
.dynamic-info-bar + * {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.team-portal-container {
margin-top: calc(var(--header-height) + 10px) !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
padding-top: 20px !important;
min-height: calc(100vh - var(--header-height) - 130px) !important;
padding: 0 1rem !important;
padding-top: 0 !important;
}
.team-portal-container > *,
.team-portal-container > * > * {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.main-header-row + .portal-main-container {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
}
.portal-main-container {
margin: 0 !important;
padding: 0 !important;
padding-top: 0 !important;
margin-top: 0 !important;
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
.tabs-container {
margin: 0 !important;
padding: 0 !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
.tabcontent {
margin-top: 0 !important;
padding-top: 0 !important;
}
.files-layout {
margin-top: 0 !important;
padding-top: 0 !important;
}
.large-stats-card-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
.modern-tabs {
margin: 0 !important;
padding: 0 !important;
padding-top: 0 !important;
}
.tab-nav {
margin: 0 !important;
padding: 12px 16px !important;
padding-top: 12px !important;
}
.tab-selection-cards {
margin: 0 !important;
padding: 0 8px !important;
gap: 12px !important;
}
.large-tab-card {
margin: 0 !important;
padding: 0 10px !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
border: none !important;
overflow-x: hidden !important;
max-width: 100vw !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body > * {
margin-top: 0 !important;
}
html.wp-toolbar {
padding-top: 0 !important;
}
body.admin-bar {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.admin-bar .main-header-row {
top: 0 !important;
}
.team-portal-shortcode {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.team-portal-shortcode > * {
margin-top: 0 !important;
padding-top: 0 !important;
}
.elementor-widget-shortcode,
.elementor-element,
.wp-block {
margin-top: 0 !important;
padding-top: 0 !important;
}
.team-portal-shortcode,
.team-portal-container,
.portal-main-container {
background: transparent !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
* {
margin-top: 0 !important;
}
*::before,
*::after {
margin: 0 !important;
padding: 0 !important;
}
.notifications-panel,
#notificationsPanel {
z-index: 2147483647 !important;
position: absolute !important;
}
.notifications-panel.active,
#notificationsPanel.active {
z-index: 2147483647 !important;
position: absolute !important;
}
.filters-container,
.advanced-search-container,
.search-section,
.filter-row {
position: relative !important;
z-index: 50 !important;
}
.dataTables_wrapper,
#posts-table_wrapper,
table.dataTable,
#posts-table {
position: relative !important;
z-index: 1 !important;
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
position: relative !important;
z-index: 1 !important;
}
.dark-mode .main-header-row {
background: #000000 !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
@media screen and (max-width: 768px) {
.main-header-row {
height: var(--header-height-mobile) !important;
}
.dynamic-info-bar {
top: var(--header-height-mobile) !important;
}
.team-portal-container {
margin-top: calc(var(--header-height-mobile) + 50px) !important;
}
}
.dark-mode .dynamic-info-bar {
background: #0f172a !important;
}
.portal-main-container,
.portal-main-container *,
.team-portal-container,
.team-portal-container *,
.tab-content-wrapper,
.tab-content-wrapper *,
.tabcontent,
.tabcontent * {
max-width: 100% !important;
box-sizing: border-box !important;
}
body,
html,
.portal-main-container,
.team-portal-container,
.tab-content-wrapper,
.tabcontent {
overflow-x: hidden !important;
}
.portal-main-container,
.team-portal-container,
.grid-container,
.tab-content-wrapper,
.tabcontent,
.files-layout,
.large-stats-card-wrapper {
margin-bottom: 0 !important;
padding-bottom: 1rem !important;
}
.card,
.stats-card,
.large-card,
.client-card,
.task-card,
.file-card {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
.main-header-row {
margin-bottom: 0 !important;
}
.files-layout {
padding-top: 0.5rem !important;
margin-top: 0 !important;
}
.compact-filters-bar {
margin-top: 1rem !important;
}
.tabcontent {
padding-top: 0 !important;
margin-top: 0 !important;
}
.stats-bar,
.stats-bar--modern {
margin-top: 0 !important;
padding-top: 0 !important;
}
.team-portal-container {
min-height: auto !important;
height: auto !important;
margin-bottom: 0 !important;
padding-bottom: 1rem !important;
}
.portal-main-container,
.tabs-container {
margin-bottom: 0 !important;
padding-bottom: 0.5rem !important;
}
.tabcontent {
margin-bottom: 0 !important;
padding-bottom: 1rem !important;
}
.client-card,
.task-card,
.file-card,
.large-card {
margin-bottom: 1rem !important;
}
.team-portal-container > *:last-child,
.portal-main-container > *:last-child,
.tabs-container > *:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.dataTables_wrapper {
margin-top: 1rem !important;
}
table.dataTable tbody tr {
margin-bottom: 0.25rem !important;
}
.dataTables_info,
.dataTables_paginate {
margin-top: 1rem !important;
}

/* === modern-table-design.css === */
.dataTables_wrapper {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 2px;
border-radius: 16px;
box-shadow:
0 20px 60px rgba(102, 126, 234, 0.3),
0 8px 16px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.dataTables_wrapper > div {
background: #ffffff;
border-radius: 14px;
}
#posts-table thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
border-radius: 12px 12px 0 0;
overflow: hidden;
}
#posts-table thead::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
transparent 100%
);
pointer-events: none;
}
#posts-table thead th {
color: #ffffff !important;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 18px 16px !important;
border: none !important;
position: relative;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#posts-table thead th::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 3px;
background: rgba(255, 255, 255, 0.5);
transition: width 0.3s ease;
}
#posts-table thead th:hover::after {
width: 80%;
}
#posts-table thead th i {
margin-left: 8px;
opacity: 0.9;
font-size: 13px;
}
#posts-table tbody tr {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
cursor: pointer;
}
#posts-table tbody tr:hover {
background: linear-gradient(
90deg,
rgba(102, 126, 234, 0.08) 0%,
rgba(118, 75, 162, 0.05) 100%
);
transform: translateX(4px);
box-shadow:
-4px 0 0 0 #667eea inset,
0 4px 12px rgba(102, 126, 234, 0.15);
}
#posts-table tbody td {
padding: 16px !important;
vertical-align: middle;
border: none !important;
font-size: 14px;
color: #2d3748;
}
.client-name-cell {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 0;
}
.client-avatar {
position: relative;
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 3px solid transparent;
background: linear-gradient(white, white) padding-box,
linear-gradient(135deg, #667eea, #764ba2) border-box;
box-shadow:
0 4px 12px rgba(102, 126, 234, 0.25),
0 0 0 4px rgba(102, 126, 234, 0.1);
transition: all 0.3s ease;
}
.client-avatar:hover {
transform: scale(1.1);
box-shadow:
0 6px 20px rgba(102, 126, 234, 0.4),
0 0 0 6px rgba(102, 126, 234, 0.15);
}
.client-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.client-avatar-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
}
.client-name-info {
flex: 1;
min-width: 0;
}
.client-name-text {
font-weight: 600;
font-size: 15px;
color: #1a202c;
margin-bottom: 4px;
line-height: 1.3;
}
.client-name-text:hover {
color: #667eea;
text-decoration: none;
}
.client-sub-info {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
color: #718096;
}
.client-sub-info i {
font-size: 11px;
color: #a0aec0;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
text-transform: uppercase;
transition: all 0.3s ease;
white-space: nowrap;
}
.status-badge i {
font-size: 10px;
}
.status-badge.badge-active {
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
color: white;
box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
}
.status-badge.badge-pending {
background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
color: white;
box-shadow: 0 2px 8px rgba(237, 137, 54, 0.3);
}
.status-badge.badge-inactive {
background: linear-gradient(135deg, #cbd5e0 0%, #a0aec0 100%);
color: #4a5568;
box-shadow: 0 2px 8px rgba(160, 174, 192, 0.3);
}
.status-badge.badge-warning {
background: linear-gradient(135deg, #f56565 0%, #c53030 100%);
color: white;
box-shadow: 0 2px 8px rgba(245, 101, 101, 0.3);
}
.status-badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.cell-info-card {
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
padding: 10px 14px;
border-radius: 10px;
border-left: 3px solid #667eea;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.cell-info-card:hover {
background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
border-left-color: #764ba2;
transform: translateX(4px);
}
.cell-info-label {
font-size: 11px;
color: #718096;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
display: block;
}
.cell-info-value {
font-size: 14px;
font-weight: 600;
color: #2d3748;
}
.cell-actions {
display: flex;
gap: 8px;
justify-content: center;
}
.cell-action-btn {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.cell-action-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}
.cell-action-btn:active {
transform: translateY(-1px);
}
.cell-action-btn.btn-edit {
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
}
.cell-action-btn.btn-delete {
background: linear-gradient(135deg, #f56565 0%, #c53030 100%);
}
.cell-action-btn.btn-view {
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}
.dataTables_info {
padding: 16px !important;
color: #4a5568;
font-size: 13px;
font-weight: 500;
}
.dataTables_paginate {
padding: 16px !important;
}
.dataTables_paginate .paginate_button {
padding: 8px 14px !important;
margin: 0 4px !important;
border-radius: 8px !important;
border: none !important;
background: #f7fafc !important;
color: #4a5568 !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
}
.dataTables_paginate .paginate_button:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}
.dataTables_paginate .paginate_button.current {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}
.dataTables_paginate .paginate_button.disabled {
opacity: 0.4;
cursor: not-allowed !important;
}
.dataTables_filter input {
padding: 10px 16px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 14px;
transition: all 0.3s ease;
background: #f7fafc;
}
.dataTables_filter input:focus {
border-color: #667eea;
background: white;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
}
.dataTables_length select {
padding: 8px 32px 8px 12px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 14px;
background: #f7fafc;
transition: all 0.3s ease;
}
.dataTables_length select:focus {
border-color: #667eea;
background: white;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
}
.dataTables_processing {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white !important;
padding: 30px 50px !important;
border-radius: 16px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
border: none !important;
z-index: 10000;
}
.dataTables_processing::before {
content: '';
display: block;
width: 50px;
height: 50px;
margin: 0 auto 15px;
border: 4px solid #e2e8f0;
border-top-color: #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.dataTables_empty {
padding: 60px 20px !important;
text-align: center;
font-size: 16px;
color: #718096;
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
}
.dataTables_empty::before {
content: '📋';
display: block;
font-size: 48px;
margin-bottom: 16px;
}
@media (max-width: 768px) {
#posts-table thead {
display: none;
}
#posts-table tbody tr {
display: block;
margin-bottom: 16px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 16px;
background: white;
}
#posts-table tbody tr:hover {
transform: translateY(-4px);
}
#posts-table tbody td {
display: block;
padding: 12px 0 !important;
border: none !important;
}
#posts-table tbody td::before {
content: attr(data-label);
display: block;
font-weight: 600;
color: #4a5568;
margin-bottom: 6px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
}
@media (prefers-color-scheme: dark) {
.dataTables_wrapper > div {
background: #1a202c;
}
#posts-table tbody tr {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
#posts-table tbody td {
color: #e2e8f0;
}
.cell-info-card {
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
border-left-color: #667eea;
}
.dataTables_info {
color: #cbd5e0;
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#posts-table tbody tr {
animation: slideInUp 0.3s ease forwards;
}
#posts-table tbody tr:nth-child(1) { animation-delay: 0.05s; }
#posts-table tbody tr:nth-child(2) { animation-delay: 0.1s; }
#posts-table tbody tr:nth-child(3) { animation-delay: 0.15s; }
#posts-table tbody tr:nth-child(4) { animation-delay: 0.2s; }
#posts-table tbody tr:nth-child(5) { animation-delay: 0.25s; }
.glass-effect {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.dataTables_scrollBody::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.dataTables_scrollBody::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* === bitrix-fixes.css === */
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
.site,
.site-content,
.entry-content,
#page,
#content,
.wrap,
.container,
.content-wrapper,
article,
main,
#main,
#primary,
.main-content,
.page-content {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
body,
html,
.portal-main-container,
.tabs-container,
.modern-tabs,
.team-portal-shell {
background: #ffffff !important;
background-image: none !important;
background-color: #ffffff !important;
}
.team-portal-main,
.bitrix-main-content {
background: #f8f9fa !important;
background-image: none !important;
margin: 0 !important;
padding: 16px !important;
}
[data-theme="dark"] body,
[data-theme="dark"] html,
[data-theme="dark"] .portal-main-container,
[data-theme="dark"] .tabs-container,
[data-theme="dark"] .modern-tabs,
[data-theme="dark"] .team-portal-shell {
background: #0d1117 !important;
background-image: none !important;
background-color: #0d1117 !important;
}
[data-theme="dark"] .team-portal-main {
background: linear-gradient(180deg,
rgba(13, 17, 23, 0.98) 0%,
rgba(22, 27, 34, 0.95) 100%) !important;
background-image: linear-gradient(180deg,
rgba(13, 17, 23, 0.98) 0%,
rgba(22, 27, 34, 0.95) 100%) !important;
}
body.dark-mode,
body.dark-mode .portal-main-container {
background: #0d1117 !important;
background-image: none !important;
}
body.dark-mode .team-portal-main {
background: linear-gradient(180deg,
rgba(13, 17, 23, 0.98) 0%,
rgba(22, 27, 34, 0.95) 100%) !important;
background-image: linear-gradient(180deg,
rgba(13, 17, 23, 0.98) 0%,
rgba(22, 27, 34, 0.95) 100%) !important;
}
.team-portal-shell,
.bitrix-portal-wrapper {
display: block !important;
min-height: 100vh;
margin: 0 !important;
padding: 0 !important;
position: relative;
width: 100vw !important;
max-width: 100vw !important;
}
.bitrix-portal-wrapper {
box-sizing: border-box !important;
padding-right: 169px !important;
}
.bitrix-portal-wrapper.is-collapsed {
padding-right: 85px !important;
}
.rtl-layout {
padding-inline-end: 169px !important;
padding-inline-start: 0 !important;
}
.rtl-layout.is-collapsed {
padding-inline-end: 85px !important;
}
.bitrix-main-content {
position: relative !important;
margin: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
padding: 16px !important;
min-height: 100vh;
z-index: 1 !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
transform: scale(0.92);
transform-origin: top left;
width: 108.7% !important;
}
.bitrix-portal-wrapper .bitrix-main-content {
margin-right: 0 !important;
}
.bitrix-main-content,
.content-section,
.modern-tabs,
.tab-content,
.category-cards-wrapper,
.bitrix-content-area {
position: relative !important;
right: auto !important;
left: auto !important;
}
.filters,
.filters-wrapper,
.filters-container,
.compact-filters-bar,
.filters-bar {
border: none !important;
border-top: none !important;
border-bottom: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
.section-header,
.section-header.sticky,
.content-section .section-header {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 15px !important;
padding-bottom: 10px !important;
border-bottom: none !important;
}
.files-layout .section-header,
#Files .section-header {
display: none !important;
}
.files-layout .section-title,
#Files .section-title {
display: none !important;
}
.files-layout .section-actions,
#Files .section-actions {
display: none !important;
}
.action-btn--notes {
position: relative !important;
}
.action-btn--notes .notification-badge {
position: absolute !important;
top: -6px !important;
right: -6px !important;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
color: white !important;
font-size: 10px !important;
font-weight: 700 !important;
padding: 2px 6px !important;
border-radius: 10px !important;
min-width: 18px !important;
height: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4) !important;
animation: pulse-notes-badge 2s ease-in-out infinite !important;
z-index: 10 !important;
}
@keyframes pulse-notes-badge {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
.quick-notes-footer {
background: linear-gradient(to bottom, #f9fafb 0%, #f3f4f6 100%) !important;
border-top: 2px solid #e5e7eb !important;
padding: 18px 24px !important;
}
.quick-notes-footer .btn-secondary {
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
color: white !important;
padding: 11px 24px !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: 10px !important;
box-shadow: 0 3px 8px rgba(107, 114, 128, 0.25) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.quick-notes-footer .btn-secondary:hover {
background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(107, 114, 128, 0.35) !important;
}
.quick-notes-footer .btn-danger {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
color: white !important;
padding: 11px 24px !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: 10px !important;
box-shadow: 0 3px 8px rgba(239, 68, 68, 0.25) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.quick-notes-footer .btn-danger:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35) !important;
}
.quick-notes-footer .btn-danger:active,
.quick-notes-footer .btn-secondary:active {
transform: translateY(0) !important;
}
.add-note-btn {
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
color: white !important;
padding: 12px 28px !important;
font-size: 15px !important;
font-weight: 600 !important;
border-radius: 10px !important;
border: none !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer !important;
}
.add-note-btn:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4) !important;
}
.add-note-btn:active {
transform: translateY(-1px) !important;
}
.add-note-btn i {
margin-left: 6px !important;
}
.note-item {
background: white !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
padding: 14px 16px !important;
margin-bottom: 12px !important;
transition: all 0.3s ease !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.note-item:hover {
border-color: #d1d5db !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
transform: translateY(-2px) !important;
}
.note-header {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
margin-bottom: 10px !important;
}
.note-meta {
display: flex !important;
gap: 16px !important;
flex-wrap: wrap !important;
}
.note-date,
.note-author {
font-size: 12px !important;
color: #6b7280 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
.note-date i,
.note-author i {
color: #9ca3af !important;
font-size: 11px !important;
}
.note-text {
color: #374151 !important;
font-size: 14px !important;
line-height: 1.6 !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
}
.note-actions {
display: flex !important;
gap: 8px !important;
}
.note-action-btn {
background: transparent !important;
border: none !important;
color: #9ca3af !important;
cursor: pointer !important;
padding: 6px 10px !important;
border-radius: 6px !important;
transition: all 0.2s ease !important;
font-size: 14px !important;
}
.note-action-btn:hover {
background: #f3f4f6 !important;
color: #374151 !important;
}
.note-action-btn.delete-btn:hover {
background: #fee2e2 !important;
color: #dc2626 !important;
}
.no-notes-message {
text-align: center !important;
padding: 48px 24px !important;
color: #9ca3af !important;
}
.no-notes-message i {
font-size: 48px !important;
color: #d1d5db !important;
margin-bottom: 16px !important;
}
.no-notes-message p {
font-size: 16px !important;
font-weight: 600 !important;
color: #6b7280 !important;
margin: 12px 0 8px !important;
}
.no-notes-message small {
font-size: 13px !important;
color: #9ca3af !important;
}
.portal-main-container,
.team-portal-container {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.bitrix-main-content * {
box-sizing: border-box !important;
}
.bitrix-sidebar {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
width: 169px !important;
z-index: 10000 !important;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
}
.bitrix-sidebar.is-collapsed,
.bitrix-sidebar.collapsed {
width: 85px !important;
}
.bitrix-main-content {
position: relative !important;
z-index: 1 !important;
overflow-x: hidden !important;
}
.modern-tabs,
.content-section,
.tab-content,
.category-cards-wrapper,
.bitrix-content-area {
position: relative !important;
z-index: 1 !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
.bitrix-main-content > *,
.content-section > *,
.tab-content > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
.tp-top-bar,
.bitrix-top-bar {
display: none !important;
}
.modern-tabs {
background: transparent !important;
}
.tab-nav {
background: transparent !important;
}
.tab-btn {
background: rgba(255, 255, 255, 0.8) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.tab-btn:hover {
background: rgba(255, 255, 255, 1) !important;
}
.tab-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
border-color: transparent !important;
}
[data-theme="dark"] .tab-btn {
background: rgba(30, 30, 30, 0.8) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: rgba(255, 255, 255, 0.9) !important;
}
[data-theme="dark"] .tab-btn:hover {
background: rgba(40, 40, 40, 1) !important;
}
.tab-selection-cards,
.large-tab-card,
.main-header-row {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 768px) {
.bitrix-main-content {
padding: 12px !important;
}
}
@media (max-width: 480px) {
.bitrix-main-content {
margin-right: 0 !important;
}
.bitrix-sidebar {
transform: translateX(100%);
}
.bitrix-sidebar:not(.is-collapsed) {
transform: translateX(0);
}
}
body {
overflow-x: hidden !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
}
#wpadminbar {
display: none !important;
}
.site-header,
.site-footer,
#masthead,
#colophon,
header,
footer {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
.site,
.site-content,
#page,
#content,
.wrap,
.entry-content,
article,
main,
#primary,
.container,
.row {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
}
.bitrix-portal-wrapper {
margin: 0 !important;
padding: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
}
.tp-top-bar {
z-index: 1000 !important;
}
.bitrix-sidebar {
z-index: 10000 !important;
}
.dark-bottom-bar {
display: none !important;
}
.bitrix-main-content {
z-index: 1 !important;
}
.tp-top-bar {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}
.bitrix-sidebar {
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05) !important;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.team-portal-main,
.team-portal-container,
.portal-main-container {
color: #2c3e50 !important;
}
[data-theme="dark"] .team-portal-main,
[data-theme="dark"] .team-portal-container,
[data-theme="dark"] .portal-main-container {
color: rgba(255, 255, 255, 0.9) !important;
}
.tp-top-bar,
.bitrix-top-bar {
z-index: 10050 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
.bitrix-main-content,
.team-portal-main,
.main-content {
margin-top: 60px !important;
}