html, body {
height: 100%;
margin: 0;
}
/* Calendar blocked dates styles */
.calendar-blocked {
background-color: #ffcccc !important;
color: #cc0000 !important;
cursor: not-allowed !important;
opacity: 0.7;
position: relative;
}
.calendar-blocked:hover {
background-color: #ffaaaa !important;
}
.calendar-blocked::after {
content: '馃毇';
position: absolute;
top: 2px;
right: 2px;
font-size: 10px;
}
/* Alert Styles */
.alert {
border-radius: 8px;
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.alert-danger {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
color: #721c24;
border-left: 4px solid #dc3545;
}
.alert-success {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
color: #155724;
border-left: 4px solid #28a745;
}
.alert-info {
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
color: #0c5460;
border-left: 4px solid #17a2b8;
}
.alert .close {
color: inherit;
opacity: 0.7;
}
.alert .close:hover {
opacity: 1;
}
.alert i {
font-size: 1.1em;
}
.alert {
animation: slideInRight 0.3s ease-out;
}
/* Toastr Custom Styles */
#toast-container > div {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border: none;
font-family: inherit;
opacity: 0.95 !important;
backdrop-filter: blur(10px);
}
/*#toast-container > .toast-error {
background: linear-gradient(135deg, #dc3545 0%, #c82333 50%) !important;
color: white !important;
}
#toast-container > .toast-success {
background: linear-gradient(135deg, #28a745 0%, #1e7e34 50%) !important;
color: white !important;
}
#toast-container > .toast-info {
background: linear-gradient(135deg, #17a2b8 0%, #138496 50%) !important;
color: white !important;
}
#toast-container > .toast-warning {
background: linear-gradient(135deg, #ffc107 0%, #e0a800 50%) !important;
color: #212529 !important;
}*/
/* Toastr hover effects */
#toast-container > div:hover {
opacity: 1 !important;
transform: scale(1.02);
transition: all 0.3s ease;
}
/* Toastr icons */
#toast-container .toast-success .toast-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
}
#toast-container .toast-error .toast-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") !important;
}
#toast-container .toast-info .toast-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") !important;
}
#toast-container .toast-warning .toast-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23212529'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") !important;
}
.wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.custom-check {
font-size: 24px;
color: #28a745;
}
.custom-x {
font-size: 24px;
color: #dc3545;
}
.dot-green {
height: 15px;
width: 15px;
background-color: green;
border-radius: 50%;
display: inline-block;
}
.dot-red {
height: 15px;
width: 15px;
background-color: red;
border-radius: 50%;
display: inline-block;
}
.marker {
/* Set the marker size here */
width: 1rem;
height: 1rem;
border-radius: 2rem;
/* Set the marker color here */
background: #aa3300;
top: -0.5rem;
display: inline-block;
border-bottom-right-radius: 0;
position: relative;
transform: rotate(45deg);
/* optional fanciness */
border: 1px solid #881100;
}
.draggable-item {
cursor: move;
}
/* inner circle (optional if you don't need the central dot) */
.marker::before {
content: "";
background: white;
width: 50%;
height: 50%;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* optional fanciness */
box-shadow: 0.1rem 0.1rem 0.2rem 0.1rem rgba(0, 0, 0, 0.1);
}
/* shadow (optional if you don't need a shadow) */
.marker::after {
content: "";
background: rgba(128, 128, 128, 0.2);
width: 75%;
height: 75%;
border-radius: 100%;
position: absolute;
top: 100%;
left: 100%;
transform: translate(-50%, -50%) rotate(45deg) scaleX(0.5);
}
.text-red{
color: red;
}
.content {
overflow-y: auto;
}
/* Na mobile - zmie艅 overflow-y na visible, 偶eby ostatni wiersz nie by艂 uci臋ty */
@media (max-width: 767.98px) {
.content {
overflow-y: visible !important;
overflow-x: hidden !important; /* Tylko poziomy overflow ukryty */
}
}
/* Dodaj styl dla znacznik贸w j臋zyka */
.language {
color: white;
text-decoration: none;
margin-left: 10px;
}
/* Styl dla aktywnego znacznika j臋zyka */
.l_active {
font-weight: bold;
}
/* Dodaj styl dla kontenera z przyciskami j臋zyka */
.lan {
position: absolute;
top: 10px;
right: 10px;
}
.notification-icon {
position: relative;
display: inline-block;
cursor: pointer;
}
.notification-icon .badge {
position: absolute;
top: -10px;
right: -10px;
border-radius: 50%;
background-color: red;
color: white;
}
.notification-icon .dropdown-menu {
position: absolute;
right: 0;
left: auto;
top: 30px;
display: none;
width: 300px;
max-height: 400px;
overflow-y: auto;
}
.notification-icon .dropdown-menu.show {
display: block;
}
.user-info {
position: relative;
display: inline-block;
}
.user-info:hover .logout-button {
display: inline-block;
}
.logout-button {
margin-left: 10px;
}
.notification-panel {
position: fixed;
top: 0;
right: -420px;
width: 420px;
height: 100%;
background: #fff;
box-shadow: -5px 0 15px rgba(0,0,0,0.15);
transition: right 0.3s ease;
z-index: 9999;
border-left: 1px solid #e9ecef;
}
.notification-panel.active {
right: 0;
}
.notification-header i {
cursor: pointer;
padding: 4px;
border-radius: 50%;
transition: background-color 0.2s ease;
font-size: 18px;
}
.notification-header i:hover {
background-color: rgba(255,255,255,0.2);
}
.notification-content {
padding: 0;
overflow-y: auto;
height: calc(100% - 54px);
background: #f8f9fa;
}
.notification-content .list-group-item {
border: none;
border-bottom: 1px solid #e9ecef;
padding: 16px 22px 12px 22px;
background: #fff;
transition: background-color 0.2s ease;
}
.notification-content .list-group-item:hover {
background: #f1f3f6;
}
.notification-content .list-group-item h5 {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 4px;
letter-spacing: 0.01em;
}
.notification-content .list-group-item p {
font-size: 13.5px;
color: #495057;
margin-bottom: 4px;
line-height: 1.5;
}
.notification-content .list-group-item small {
font-size: 11.5px;
color: #adb5bd;
}
.notification-content .text-muted {
color: #6c757d !important;
font-style: italic;
}
.notification-content .text-danger {
color: #dc3545 !important;
}
.notification-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
border-radius: 8px 8px 0 0;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: #fff;
font-weight: 500;
font-size: 15px;
border-bottom: 1px solid #e9ecef;
min-height: 44px;
}
.notification-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.notification-actions .btn {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
border-radius: 6px;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.9);
border: 2px solid rgba(255, 255, 255, 0.8);
color: #007bff;
font-weight: 600;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.notification-actions .btn:hover {
background: rgba(255, 255, 255, 1);
border-color: rgba(255, 255, 255, 1);
color: #0056b3;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.notification-actions .btn:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.notification-actions .fa-times {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
padding: 0.5rem;
border-radius: 6px;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.notification-actions .fa-times:hover {
color: #fff;
background: rgba(220, 53, 69, 0.8);
border-color: rgba(220, 53, 69, 1);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}
/* Responsywno艣膰 dla przycisk贸w powiadomie艅 */
@media (max-width: 576px) {
.notification-actions {
gap: 0.5rem;
}
.notification-actions .btn {
padding: 0.4rem 0.6rem;
font-size: 0.75rem;
}
.notification-actions .fa-times {
font-size: 0.9rem;
padding: 0.4rem;
}
}
/* Panel boczny z szczeg贸艂ami pacjenta */
.patient-sidebar {
position: fixed;
top: 0;
right: -500px;
width: 500px;
height: 100vh;
background: #fff;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
z-index: 1050;
transition: right 0.3s ease;
overflow-y: auto;
}
.patient-sidebar.open {
right: 0;
}
/* Blokada scrollowania body gdy sidebar jest otwarty */
body.patient-sidebar-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
}
body.patient-sidebar-open .wrapper {
overflow: hidden !important;
}
body.patient-sidebar-open .content {
overflow: hidden !important;
}
.patient-sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1040;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.patient-sidebar-overlay.show {
opacity: 1;
visibility: visible;
}
.patient-sidebar-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1.5rem;
display: flex;
justify-content: between;
align-items: center;
border-bottom: 1px solid #e9ecef;
}
.patient-sidebar-header h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
}
.patient-sidebar-close {
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.patient-sidebar-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.patient-sidebar-content {
padding: 1.5rem;
}
.patient-detail-section {
margin-bottom: 2rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #007bff;
}
.patient-detail-section h4 {
color: #495057;
font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.patient-detail-section h4 i {
margin-right: 0.5rem;
color: #007bff;
}
.patient-detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid #e9ecef;
}
.patient-detail-row:last-child {
border-bottom: none;
}
.patient-detail-label {
font-weight: 600;
color: #6c757d;
font-size: 0.9rem;
}
.patient-detail-value {
color: #495057;
font-size: 0.9rem;
text-align: right;
max-width: 60%;
word-break: break-word;
}
.patient-status-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
}
.patient-status-active {
background: #d4edda;
color: #155724;
}
.patient-status-inactive {
background: #f8d7da;
color: #721c24;
}
.patient-user-status {
display: flex;
align-items: center;
gap: 0.5rem;
}
.patient-user-status i {
font-size: 1.2rem;
}
.patient-user-status.active i {
color: #28a745;
}
.patient-user-status.blocked i {
color: #dc3545;
}
.patient-user-status.none i {
color: #6c757d;
}
/* Responsywno艣膰 dla panelu bocznego */
@media (max-width: 768px) {
.patient-sidebar {
width: 100%;
right: -100%;
}
.patient-sidebar.open {
right: 0;
}
}
/* Style dla powiadomie艅 */
.notification-row.notification-read {
opacity: 0.7;
background-color: #f8f9fa;
}
.notification-card.notification-read {
opacity: 0.7;
background-color: #f8f9fa;
}
.status-unread {
background-color: #ffc107;
color: #212529;
}
.status-unread:hover {
background-color: #e0a800;
}
.notification-title {
font-weight: 600;
color: #1a1a1a;
}
.notification-message {
color: #495057;
line-height: 1.4;
}
.notification-type {
font-size: 12px;
color: #6c757d;
}
.notification-date {
font-size: 12px;
color: #adb5bd;
}
.notification-status-cell {
display: flex;
align-items: center;
}
.notification-title-cell {
max-width: 200px;
}
.notification-message-cell {
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Animacje dla powiadomie艅 */
.notification-row, .notification-card {
transition: all 0.3s ease;
}
.notification-row:hover, .notification-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Responsywno艣膰 dla powiadomie艅 */
@media (max-width: 767.98px) {
.notification-title-cell,
.notification-message-cell {
max-width: none;
}
.notification-message-cell {
white-space: normal;
overflow: visible;
text-overflow: unset;
}
.notification-card .card-body {
padding: 1rem;
}
.notification-card .card-title {
font-size: 1.1rem;
}
.notification-card .card-text {
font-size: 0.9rem;
}
}
.tracking-detail {
padding:3rem 0
}
#tracking {
margin-bottom:1rem
}
[class*=tracking-status-] p {
margin:0;
font-size:1.1rem;
color:#fff;
text-transform:uppercase;
text-align:center
}
[class*=tracking-status-] {
padding:1.6rem 0
}
.tracking-status-intransit {
background-color:#65aee0
}
.tracking-status-outfordelivery {
background-color:#f5a551
}
.tracking-status-deliveryoffice {
background-color:#f7dc6f
}
.tracking-status-delivered {
background-color:#4cbb87
}
.tracking-status-attemptfail {
background-color:#b789c7
}
.tracking-status-error,.tracking-status-exception {
background-color:#d26759
}
.tracking-status-expired {
background-color:#616e7d
}
.tracking-status-pending {
background-color:#ccc
}
.tracking-status-inforeceived {
background-color:#214977
}
.tracking-list {
border:1px solid #e5e5e5
}
.tracking-item {
border-left:1px solid #e5e5e5;
position:relative;
padding:2rem 1.5rem .5rem 2.5rem;
font-size:.9rem;
margin-left:3rem;
min-height:5rem
}
.tracking-item:last-child {
padding-bottom:4rem
}
.tracking-item .tracking-date {
margin-bottom:.5rem
}
.tracking-item .tracking-date span {
color:#888;
font-size:85%;
padding-left:.4rem
}
.tracking-item .tracking-content {
padding:.5rem .8rem;
background-color:#f4f4f4;
border-radius:.5rem
}
.tracking-item .tracking-content span {
display:block;
color:#888;
font-size:85%
}
.tracking-item .tracking-icon {
line-height:2.6rem;
position:absolute;
left:-1.3rem;
width:2.6rem;
height:2.6rem;
text-align:center;
border-radius:50%;
font-size:1.1rem;
background-color:#fff;
color:#fff
}
.tracking-item .tracking-icon.status-sponsored {
background-color:#f68
}
.tracking-item .tracking-icon.status-delivered {
background-color:#4cbb87
}
.tracking-item .tracking-icon.status-outfordelivery {
background-color:#f5a551
}
.tracking-item .tracking-icon.status-deliveryoffice {
background-color:#f7dc6f
}
.tracking-item .tracking-icon.status-attemptfail {
background-color:#b789c7
}
.tracking-item .tracking-icon.status-exception {
background-color:#d26759
}
.tracking-item .tracking-icon.status-inforeceived {
background-color:#214977
}
.tracking-item .tracking-icon.status-intransit {
color:#e5e5e5;
border:1px solid #e5e5e5;
font-size:.6rem
}
@media(min-width:992px) {
.tracking-item {
margin-left:10rem
}
.tracking-item .tracking-date {
position:absolute;
left:-10rem;
width:7.5rem;
text-align:right
}
.tracking-item .tracking-date span {
display:block
}
.tracking-item .tracking-content {
padding:0;
background-color:transparent
}
}
/* Force hide desktop menu on mobile */
/* Media query dla hamburger menu - od 991.98px w d贸艂 */
@media (max-width: 991.98px) {
.d-none.d-lg-block {
display: none !important;
}
.d-block.d-lg-none {
display: block !important;
}
/* Ensure hamburger button is visible */
#mobile-menu-toggle {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 1.5rem !important;
}
/* Hide any desktop navigation elements */
.navbar-nav {
display: none !important;
}
.navbar-collapse {
display: none !important;
}
/* Hide the entire desktop menu container */
.desktop-menu-container {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* Specific styles for mobile menu container */
.mobile-menu-container {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.mobile-menu-btn {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 1.5rem !important;
color: white !important;
background: none !important;
border: none !important;
padding: 0.5rem !important;
}
}
/* Media query dla bardzo ma艂ych ekran贸w - od 767.98px w d贸艂 */
@media (max-width: 767.98px) {
/* Prevent horizontal overflow on mobile */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
position: relative;
}
.wrapper {
overflow-x: hidden !important;
overflow-y: visible !important; /* Pozw贸l na widoczne dropdowny */
max-width: 100vw !important;
position: relative !important;
}
header {
overflow-x: hidden !important;
max-width: 100vw !important;
}
.container-fluid {
padding-left: 8px !important;
padding-right: 8px !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
/* Logo column - prevent overflow */
.col-1.col-md-1 {
padding-left: 4px !important;
padding-right: 4px !important;
max-width: 8.333333% !important;
overflow: hidden !important;
flex: 0 0 8.333333% !important;
}
.col-1.col-md-1 img {
max-width: 100% !important;
height: auto !important;
}
/* Menu button column */
.col-3.d-block.d-lg-none {
padding-left: 4px !important;
padding-right: 4px !important;
max-width: 25% !important;
flex: 0 0 25% !important;
}
/* User controls column - allow dropdowns but prevent overflow */
.col-8.col-md-3 {
padding-left: 4px !important;
padding-right: 4px !important;
max-width: 66.666667% !important;
flex: 0 0 66.666667% !important;
overflow: visible !important;
position: relative !important;
z-index: 1050 !important;
}
/* Ensure dropdown containers are visible */
header .col-8.col-md-3 .dropdown {
position: relative !important;
z-index: 1051 !important;
}
/* Ensure proper column layout on mobile */
.col-3.col-md-2 {
flex: 0 0 25% !important;
max-width: 25% !important;
}
.col-6.col-md-4 {
flex: 0 0 50% !important;
max-width: 50% !important;
}
/* Hide footer on mobile */
footer {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
/* Adjust wrapper for mobile without footer */
.wrapper {
grid-template-rows: auto 1fr !important;
}
/* Mobile header optimizations */
header {
padding: 0.5rem 0 !important;
}
.navbar-brand {
padding: 0 !important;
margin: 0 !important;
}
.btn-sm {
padding: 0.25rem 0.5rem !important;
font-size: 0.875rem !important;
}
.dropdown {
margin-right: 0.25rem !important;
flex-shrink: 1 !important;
}
.dropdown .btn {
padding: 0.25rem 0.4rem !important;
font-size: 0.75rem !important;
white-space: nowrap !important;
}
/* Notification icon - prevent overflow */
.notification-icon {
margin-left: 0.25rem !important;
position: relative !important;
overflow: visible !important;
flex-shrink: 0 !important;
}
.notification-icon i {
font-size: 1rem !important;
}
.notification-icon .badge {
position: absolute !important;
top: -10px !important;
right: -10px !important;
font-size: 0.7rem !important;
padding: 2px 5px !important;
min-width: 18px !important;
height: 18px !important;
line-height: 14px !important;
border-radius: 9px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
box-sizing: border-box !important;
z-index: 10 !important;
}
.badge {
font-size: 0.75rem !important;
padding: 0.25rem 0.5rem !important;
}
/* Dropdown menus - ensure they don't cause overflow and are visible */
header .dropdown {
position: relative !important;
z-index: 1051 !important;
}
header .dropdown-menu {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
max-width: calc(100vw - 20px) !important;
min-width: 180px !important;
z-index: 1060 !important;
margin-top: 0.125rem !important;
}
/* Ensure header doesn't clip dropdowns */
header {
overflow: visible !important;
}
header .container-fluid {
overflow: visible !important;
}
header .row {
overflow: visible !important;
}
/* Upewnij si臋, 偶e col-8.col-md-3 nie ma overflow hidden */
header .col-8.col-md-3 {
overflow: visible !important;
position: relative !important;
z-index: 1050 !important;
}
/* Upewnij si臋, 偶e wrapper i content nie blokuj膮 dropdown贸w */
.wrapper {
overflow: visible !important;
position: relative !important;
}
.content {
overflow: visible !important;
position: relative !important;
}
/* Upewnij si臋, 偶e wszystkie kontenery nadrz臋dne nie blokuj膮 dropdown贸w */
.container-fluid:has(header),
.row:has(header),
header .container-fluid.mheader,
header .row.mheader {
overflow: visible !important;
position: relative !important;
}
/* Upewnij si臋, 偶e mheader nie blokuje dropdown贸w */
.mheader,
.container-fluid.mheader,
.row.mheader {
overflow: visible !important;
position: relative !important;
}
/* Dodatkowe zabezpieczenie dla dropdown贸w */
header .dropdown {
position: relative !important;
z-index: 1051 !important;
overflow: visible !important;
}
header .dropdown-menu {
position: absolute !important;
z-index: 1060 !important;
overflow: visible !important;
}
/* Notification panel - full width on mobile */
.notification-panel {
width: 100vw !important;
max-width: 100vw !important;
right: -100vw !important;
z-index: 10000 !important;
}
.notification-panel.active {
right: 0 !important;
z-index: 10000 !important;
}
/* When notification panel is active, lower z-index of dropdown containers */
body.notification-panel-open header .col-8.col-md-3 {
z-index: 1040 !important;
}
body.notification-panel-open header .dropdown {
z-index: 1041 !important;
}
body.notification-panel-open header .dropdown-menu {
z-index: 1042 !important;
}
}
/* Additional mobile-specific styles */
@media (max-width: 575.98px) {
/* Extra small devices - prevent overflow */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
.container-fluid {
padding-left: 4px !important;
padding-right: 4px !important;
max-width: 100% !important;
}
/* Logo - even smaller on extra small */
.col-1.col-md-1 {
padding-left: 2px !important;
padding-right: 2px !important;
max-width: 8.333333% !important;
}
.col-1.col-md-1 img {
width: 24px !important;
height: 24px !important;
}
/* Menu button - smaller */
.col-3.d-block.d-md-none {
padding-left: 2px !important;
padding-right: 2px !important;
}
#mobile-menu-toggle {
font-size: 1.25rem !important;
padding: 0.25rem !important;
}
.mobile-menu-btn span {
font-size: 1.25rem !important;
}
/* User controls - tighter spacing */
.col-8.col-md-3 {
padding-left: 2px !important;
padding-right: 2px !important;
overflow: visible !important;
position: relative !important;
z-index: 1050 !important;
}
header .col-8.col-md-3 .dropdown {
position: relative !important;
z-index: 1051 !important;
}
header .dropdown-menu {
z-index: 1060 !important;
max-width: calc(100vw - 10px) !important;
}
.btn {
padding: 0.2rem 0.4rem !important;
font-size: 0.7rem !important;
}
.dropdown .btn {
padding: 0.2rem 0.3rem !important;
font-size: 0.7rem !important;
}
.notification-icon {
margin-left: 1px !important;
margin-right: 1px !important;
}
.notification-icon i {
font-size: 14px !important;
}
.notification-icon .badge {
font-size: 0.65rem !important;
padding: 2px 4px !important;
min-width: 16px !important;
height: 16px !important;
line-height: 12px !important;
top: -8px !important;
right: -8px !important;
}
/* Polityka prywatno艣ci mobile styles */
.politykaPrywatnosci {
padding: 10px !important;
}
.politykaPrywatnosci h1 {
font-size: 1.5rem !important;
margin-bottom: 1rem !important;
}
.politykaPrywatnosci h2 {
font-size: 1.2rem !important;
margin-bottom: 0.75rem !important;
}
.politykaPrywatnosci ol,
.politykaPrywatnosci ul {
padding-left: 15px !important;
}
.politykaPrywatnosci li {
margin-bottom: 0.5rem !important;
font-size: 0.9rem !important;
}
/* Staff cards on extra small devices */
.staff-card .card-body {
padding: 0.75rem !important;
}
.staff-card .card-title {
font-size: 1rem !important;
}
.staff-value {
font-size: 0.85rem !important;
}
.staff-info-item {
margin-bottom: 0.5rem !important;
}
}
/* Debug styles - remove after testing */
@media (max-width: 767.98px) {
/* Add a visible indicator for debugging */
.mobile-menu-container::before {
position: absolute;
top: -20px;
left: 0;
background: red;
color: white;
font-size: 8px;
padding: 2px;
z-index: 9999;
}
}
/* Mobile Sidebar Styles */
.mobile-sidebar {
position: fixed;
top: 0;
left: -280px;
width: 280px;
height: 100vh;
background: #343a40;
z-index: 1050;
transition: left 0.3s ease;
overflow-y: auto;
}
.mobile-sidebar.active {
left: 0;
}
.mobile-sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #212529;
border-bottom: 1px solid #495057;
}
.mobile-sidebar-content {
padding: 1rem 0;
}
.mobile-nav-list {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-nav-item {
border-bottom: 1px solid #495057;
}
.mobile-nav-item:last-child {
border-bottom: none;
}
.mobile-nav-link {
display: flex;
align-items: center;
padding: 1rem;
color: #fff;
text-decoration: none;
transition: background-color 0.2s ease;
}
.mobile-nav-link:hover {
background-color: #495057;
color: #fff;
text-decoration: none;
}
.mobile-nav-link.active {
background-color: #007bff;
color: #fff;
}
.mobile-nav-link i {
width: 20px;
margin-right: 12px;
text-align: center;
}
.mobile-nav-link span {
font-size: 1rem;
font-weight: 500;
}
.mobile-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1040;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-overlay.active {
opacity: 1;
visibility: visible;
}
/* Prevent body scroll when sidebar is open */
body.sidebar-open {
overflow: hidden;
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
.container-fluid {
padding-left: 10px;
padding-right: 10px;
}
.btn {
padding: 0.375rem 0.5rem;
font-size: 0.875rem;
}
/* Ensure dropdown containers are visible */
header .col-8.col-md-3 {
overflow: visible !important;
position: relative !important;
z-index: 1050 !important;
}
header .col-8.col-md-3 .dropdown {
position: relative !important;
z-index: 1051 !important;
}
/* Header dropdowns on mobile - positioned near the button */
header .dropdown-menu {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
transform: none !important;
width: auto !important;
min-width: 200px !important;
max-width: calc(100vw - 20px) !important;
margin-top: 0.125rem !important;
z-index: 1060 !important;
}
/* Ensure dropdowns don't go off-screen on mobile */
header .dropdown-menu.dropdown-menu-right {
right: 0 !important;
left: auto !important;
transform: none !important;
}
/* Ensure header doesn't clip dropdowns */
header {
overflow: visible !important;
}
header .container-fluid {
overflow: visible !important;
}
header .row {
overflow: visible !important;
}
}
/* Desktop dropdown positioning */
@media (min-width: 768px) {
/* Prevent horizontal scrolling on header - but allow dropdowns to overflow */
header {
overflow-x: hidden !important;
overflow-y: visible !important;
overflow: visible !important;
width: 100%;
max-width: 100%;
position: relative;
z-index: 1030;
}
/* Critical: Ensure header doesn't clip dropdowns */
header,
header * {
clip: auto !important;
clip-path: none !important;
}
header .container-fluid,
header .container-fluid.mheader {
overflow-x: hidden !important;
overflow-y: visible !important;
overflow: visible !important;
width: 100%;
max-width: 100%;
position: relative;
}
header .row,
header .row.mheader {
overflow-x: hidden !important;
overflow-y: visible !important;
overflow: visible !important;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
position: relative;
}
/* Ensure dropdowns align properly on desktop */
header .dropdown-menu.dropdown-menu-right {
right: 0 !important;
left: auto !important;
transform: none !important;
position: absolute !important;
top: 100% !important;
margin-top: 0.125rem !important;
z-index: 1050 !important;
}
/* Prevent dropdowns from going off-screen on desktop */
header .dropdown {
position: relative !important;
overflow: visible !important;
z-index: 1040;
}
header .dropdown-menu {
min-width: 10rem;
max-width: 20rem;
overflow: visible !important;
z-index: 1050 !important;
}
/* Ensure user controls column doesn't cause overflow */
header .col-8.col-md-3 {
overflow: visible !important;
flex-shrink: 0;
position: relative;
z-index: 1040;
}
/* Ensure desktop menu container doesn't cause overflow */
header .desktop-menu-container {
overflow: visible !important;
position: relative;
}
/* Ensure header quick actions don't cause overflow */
header .header-quick-actions {
overflow-x: hidden !important;
overflow-y: visible !important;
overflow: visible !important;
width: 100%;
max-width: 100%;
}
/* Ensure all header columns don't cause overflow */
header .col-md-8,
header .col-md-6,
header .col-md-3,
header .col-1,
header .col-3 {
overflow-x: hidden !important;
overflow-y: visible !important;
overflow: visible !important;
position: relative;
}
/* Ensure navbar doesn't cause overflow */
header .navbar {
overflow-x: hidden !important;
overflow-y: visible !important;
overflow: visible !important;
width: 100%;
max-width: 100%;
position: relative;
}
header .navbar-nav {
overflow-x: hidden !important;
overflow-y: visible !important;
overflow: visible !important;
flex-wrap: nowrap;
position: relative;
}
/* Ensure dropdown toggle buttons don't cause overflow */
header .dropdown-toggle {
overflow: visible !important;
position: relative;
}
/* Force dropdown menus to be visible - override any parent overflow */
header .dropdown-menu {
position: absolute !important;
z-index: 9999 !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
}
/* Ensure all parent containers allow dropdown visibility */
header .d-flex {
overflow: visible !important;
}
/* Ensure dropdown parent containers don't clip */
header .dropdown,
header .dropdown > * {
overflow: visible !important;
}
}
/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
.mobile-sidebar {
width: 320px;
left: -320px;
}
}
/* Ensure proper z-index stacking */
.navbar {
z-index: 1030;
}
.dropdown-menu {
z-index: 1035;
}
.notification-panel {
z-index: 1045;
}
.mobile-overlay {
z-index: 1040;
}
.mobile-sidebar {
z-index: 1050;
}
/* Polityka prywatno艣ci mobile styles */
.politykaPrywatnosci {
padding: 10px !important;
}
.politykaPrywatnosci h1 {
font-size: 1.5rem !important;
margin-bottom: 1rem !important;
}
.politykaPrywatnosci h2 {
font-size: 1.2rem !important;
margin-bottom: 0.75rem !important;
}
.politykaPrywatnosci ol,
.politykaPrywatnosci ul {
padding-left: 15px !important;
}
.politykaPrywatnosci li {
margin-bottom: 0.5rem !important;
font-size: 0.9rem !important;
}
/* Staff mobile card styles */
@media (max-width: 767.98px) {
.staff-card {
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.2s ease;
}
.staff-card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.staff-card .card-body {
padding: 1rem;
}
.staff-card .card-title {
font-size: 1.1rem;
font-weight: 600;
color: #495057;
margin-bottom: 0.5rem;
}
.staff-card .card-subtitle {
font-size: 0.9rem;
margin-bottom: 1rem;
}
.staff-info-item {
margin-bottom: 0.75rem;
}
.staff-info-item small {
font-size: 0.75rem;
color: #6c757d;
}
.staff-value {
font-size: 0.9rem;
font-weight: 500;
color: #495057;
word-break: break-word;
}
.staff-card .btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
}
/* Empty state styling */
.text-center.p-4 {
padding: 2rem 1rem !important;
}
.text-center.p-4 i {
color: #dee2e6;
}
}
/* Additional mobile-specific styles */
@media (max-width: 575.98px) {
/* Extra small devices */
.container-fluid {
padding-left: 5px !important;
padding-right: 5px !important;
}
#mobile-menu-toggle {
font-size: 1.25rem !important;
padding: 0.25rem !important;
}
.btn {
padding: 0.25rem 0.5rem !important;
font-size: 0.75rem !important;
}
/* Polityka prywatno艣ci mobile styles */
.politykaPrywatnosci {
padding: 10px !important;
}
.politykaPrywatnosci h1 {
font-size: 1.5rem !important;
margin-bottom: 1rem !important;
}
.politykaPrywatnosci h2 {
font-size: 1.2rem !important;
margin-bottom: 0.75rem !important;
}
.politykaPrywatnosci ol,
.politykaPrywatnosci ul {
padding-left: 15px !important;
}
.politykaPrywatnosci li {
margin-bottom: 0.5rem !important;
font-size: 0.9rem !important;
}
/* Staff cards on extra small devices */
.staff-card .card-body {
padding: 0.75rem !important;
}
.staff-card .card-title {
font-size: 1rem !important;
}
.staff-value {
font-size: 0.85rem !important;
}
.staff-info-item {
margin-bottom: 0.5rem !important;
}
}
/* ===== MODERN DASHBOARD STYLES ===== */
/* Modern Header */
.modern-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 15px;
padding: 0.5rem;
border: 1px solid #dee2e6;
}
.modern-title {
font-size: 1rem;
font-weight: 700;
color: #495057;
margin: 0;
}
.modern-subtitle {
font-size: 1rem;
margin: 0.5rem 0 0 0;
}
.modern-actions {
display: flex;
gap: 1rem;
}
.btn-modern {
border-radius: 10px;
padding: 0.5rem 1rem;
font-weight: 600;
transition: all 0.3s ease;
border: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.btn-modern:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Modern Filters */
.modern-filters {
background: white;
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
border: 1px solid #e9ecef;
}
.filter-toggle {
display: flex;
align-items: center;
}
.filter-controls .btn-group {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
.filter-controls .btn {
border: none;
padding: 8px 16px;
font-weight: 500;
transition: all 0.2s ease;
min-width: 120px;
}
.filter-controls .btn:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.filter-controls .btn:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.filter-controls .btn-primary {
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.filter-controls .btn-outline-secondary {
background: #f8f9fa;
color: #6c757d;
border: 1px solid #dee2e6;
}
.filter-controls .btn-outline-secondary:hover {
background: #e9ecef;
color: #495057;
border-color: #adb5bd;
}
.filter-controls .btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.filter-controls .btn:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Responsywno艣膰 dla prze艂膮cznika */
@media (max-width: 768px) {
.filter-controls .btn {
padding: 6px 12px;
font-size: 0.9rem;
min-width: 100px;
}
.filter-controls .btn-group {
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
}
/* Animacje dla prze艂膮czania filtr贸w */
.notification-row,
.notification-card {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.notification-row.hidden,
.notification-card.hidden {
opacity: 0;
transform: scale(0.95);
}
.patient-stats, .staff-stats, .user-stats {
display: flex;
align-items: center;
}
.stat-badge {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
}
.modern-filter-card {
background: #f8f9fa;
border-radius: 10px;
border: 1px solid #e9ecef;
}
.modern-filter-header {
padding: 1rem 1.5rem 0.5rem;
font-weight: 600;
color: #495057;
border-bottom: 1px solid #dee2e6;
}
.modern-filter-body {
padding: 1rem 1.5rem;
}
/* Style dla zwi臋z艂ych filtr贸w */
.compact-filters {
flex: 1;
}
.compact-filters .d-flex {
gap: 0.5rem;
justify-content: center; /* Wycentrowanie filtr贸w */
align-items: center;
}
.search-container {
min-width: 500px;
}
/* Szeroko艣膰 searchTerm na desktop dla patients.jsp */
@media (min-width: 768px) {
.modern-filters .search-container:has(#searchTerm) {
min-width: 600px;
flex: 1 1 1rem;
max-width: none;
}
}
/* Upewnij si臋, 偶e staff.jsp jest na ca艂膮 szeroko艣膰 na desktop */
@media (min-width: 768px) {
.container-fluid:has(table.mobile-table#filterTable) {
width: 100%;
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.container-fluid:has(table.mobile-table#filterTable) .row {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.container-fluid:has(table.mobile-table#filterTable) .col-12 {
width: 100%;
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
}
}
/* Zapobieganie overflow w activities.jsp na desktop */
.container-fluid {
/*overflow-x: hidden;*/
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
/* Wyj膮tek dla headera - dropdowny musz膮 by膰 widoczne */
/* Wyj膮tek dla headera - dropdowny musz膮 by膰 widoczne */
header .container-fluid,
header .container-fluid.mheader {
overflow-x: hidden !important;
overflow-y: visible !important;
overflow: visible !important;
}
/* Upewnij si臋, 偶e wrapper i content nie blokuj膮 dropdown贸w headera */
.wrapper:has(header),
.content:has(header) {
overflow-x: hidden !important;
overflow-y: visible !important;
}
.modern-filters {
overflow-x: hidden;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.modern-filters .compact-filters {
overflow-x: hidden;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.modern-filters .compact-filters .d-flex {
flex-wrap: wrap;
max-width: 100%;
overflow-x: hidden;
width: 100%;
box-sizing: border-box;
}
.modern-filters .compact-filters .search-container {
flex: 0 1 auto;
max-width: 100%;
box-sizing: border-box;
min-width: 0;
}
/* Nadpisz inline style min-width dla activities - pozw贸l na zawijanie */
.modern-filters .search-container[style*="min-width: 250px"] {
min-width: 0 !important;
max-width: 100%;
}
.modern-filters .search-container[style*="min-width: 200px"] {
min-width: 0 !important;
max-width: 100%;
}
.modern-filters .search-container[style*="min-width: 180px"] {
min-width: 0 !important;
max-width: 100%;
}
.modern-filters .search-container[style*="min-width: 150px"] {
min-width: 0 !important;
max-width: 100%;
}
.modern-filters .search-container[style*="min-width: 120px"] {
min-width: 0 !important;
max-width: 100%;
}
.modern-filters .filter-buttons {
flex: 0 0 auto;
flex-shrink: 0;
}
/* Zapobieganie overflow w tabeli activities */
.modern-table-container {
overflow-x: auto;
max-width: 100%;
width: 100%;
}
.modern-table-container table {
width: 100%;
max-width: 100%;
table-layout: auto;
}
/* Dla activities - upewnij si臋, 偶e tabela nie wychodzi poza kontener */
#filterTable.modern-table {
width: 100%;
max-width: 100%;
table-layout: auto;
}
#filterTable.modern-table th,
#filterTable.modern-table td {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Ograniczenie szeroko艣ci kolumn w activities na desktop */
@media (min-width: 768px) {
#filterTable.modern-table th:nth-child(1),
#filterTable.modern-table td:nth-child(1) {
max-width: 180px;
min-width: 150px;
}
#filterTable.modern-table th:nth-child(2),
#filterTable.modern-table td:nth-child(2) {
max-width: 150px;
min-width: 120px;
}
#filterTable.modern-table th:nth-child(3),
#filterTable.modern-table td:nth-child(3) {
max-width: 300px;
min-width: 200px;
}
#filterTable.modern-table th:nth-child(4),
#filterTable.modern-table td:nth-child(4) {
max-width: 200px;
min-width: 150px;
}
#filterTable.modern-table th:nth-child(5),
#filterTable.modern-table td:nth-child(5) {
max-width: 150px;
min-width: 120px;
}
#filterTable.modern-table th:nth-child(6),
#filterTable.modern-table td:nth-child(6) {
max-width: 100px;
min-width: 80px;
}
/* Badge w kolumnie typu aktywno艣ci - zawijanie */
#filterTable.modern-table td:nth-child(2) .activity-type-badge {
max-width: 100%;
word-wrap: break-word;
word-break: break-word;
white-space: normal;
display: inline-block;
}
}
.search-container-small {
min-width: 250px;
}
.search-container .form-control {
border-radius: 20px;
border: 1px solid #dee2e6;
transition: all 0.2s ease;
}
.search-container .form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.checkbox-container {
white-space: nowrap;
}
.checkbox-container .modern-checkbox {
margin: 0;
align-items: center;
}
.checkbox-container .form-check-label {
font-size: 0.9rem;
color: #6c757d;
margin-left: 0.5rem;
}
.filter-buttons {
display: flex;
align-items: center;
gap: 0.5rem;
}
.filter-buttons .btn {
border-radius: 20px;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
transition: all 0.2s ease;
}
.filter-buttons .btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Responsywno艣膰 dla zwi臋z艂ych filtr贸w */
@media (max-width: 768px) {
/* Modern filters - zmie艅 layout na kolumn臋 */
.modern-filters .d-flex.justify-content-between {
flex-direction: column !important;
align-items: stretch !important;
gap: 1rem !important;
}
/* Statystyki - mniejsze i na g贸rze */
.patient-stats, .staff-stats, .user-stats {
order: -1 !important;
justify-content: center !important;
margin-bottom: 0.5rem !important;
}
.stat-badge {
padding: 0.375rem 0.75rem !important;
font-size: 0.8rem !important;
}
/* Compact filters - pe艂na szeroko艣膰 */
.compact-filters {
flex: 1 !important;
width: 100% !important;
}
.compact-filters .d-flex {
flex-direction: column;
align-items: stretch;
gap: 0.5rem; /* Zmniejszone odst臋py mi臋dzy polami w filtrach na mobile */
justify-content: center; /* Wycentrowanie filtr贸w na mobile */
}
/* Wycentrowanie zawarto艣ci filtr贸w - tylko dla desktop (w mobile ju偶 jest column) */
@media (min-width: 769px) {
.compact-filters .d-flex {
justify-content: center !important;
align-items: center !important;
}
}
.search-container {
min-width: auto;
width: 100% !important;
margin-right: 0 !important;
}
.search-container input {
font-size: 0.875rem !important;
}
.search-container input::placeholder {
font-size: 0.8rem !important;
}
.checkbox-container {
text-align: left !important;
margin-right: 0 !important;
width: 100% !important;
}
.filter-buttons {
justify-content: flex-start !important;
width: 100% !important;
margin-right: 0 !important;
}
.sort-container {
margin-left: 0 !important;
width: 100% !important;
}
.sort-container .btn-group {
width: 100% !important;
}
.sort-container .btn {
flex: 1 !important;
}
}
@media (max-width: 576px) {
.modern-filters {
padding: 1rem !important;
}
.modern-filters .d-flex.justify-content-between {
gap: 0.75rem !important;
}
/* Statystyki - jeszcze mniejsze */
.stat-badge {
padding: 0.25rem 0.5rem !important;
font-size: 0.75rem !important;
}
.compact-filters .d-flex {
gap: 0.5rem;
justify-content: center; /* Wycentrowanie filtr贸w */
align-items: center;
}
/* Przyciski filtrowania - pe艂na szeroko艣膰 */
.filter-buttons {
display: flex !important;
gap: 0.5rem !important;
}
.filter-buttons .btn {
flex: 1 !important;
font-size: 0.75rem !important;
padding: 0.375rem 0.5rem !important;
}
/* Pole wyszukiwania - mniejszy placeholder */
.search-container input {
font-size: 0.8rem !important;
padding: 0.5rem !important;
}
.search-container input::placeholder {
font-size: 0.75rem !important;
}
/* Sortowanie - pe艂na szeroko艣膰 */
.sort-container .btn-group {
display: flex !important;
width: 100% !important;
}
.sort-container .btn {
flex: 1 !important;
font-size: 0.75rem !important;
padding: 0.375rem 0.5rem !important;
}
}
.modern-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
}
.modern-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
}
/* Modern Table */
.modern-table-container {
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
overflow: hidden;
border: 1px solid #e9ecef;
}
/* Na mobile - zmie艅 overflow na visible, 偶eby ostatni wiersz nie by艂 uci臋ty */
@media (max-width: 767.98px) {
.modern-table-container {
overflow-x: hidden !important; /* Tylko poziomy overflow ukryty */
overflow-y: visible !important; /* Pionowy overflow widoczny */
overflow: visible !important; /* Fallback */
}
}
.modern-table {
margin: 0;
border: none;
}
.modern-thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.modern-th {
border: none !important;
padding: 1rem 1.5rem !important;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
position: relative;
}
/* Responsywne nag艂贸wki tabeli - ukryj ikony na ma艂ych ekranach */
@media (max-width: 1200px) {
.modern-th i {
display: none;
}
.modern-th {
font-size: 0.8rem;
padding: 0.75rem 1rem !important;
}
}
@media (max-width: 768px) {
.modern-th {
font-size: 0.75rem;
padding: 0.5rem 0.75rem !important;
letter-spacing: 0.3px;
}
}
/* Zapewnij minimaln膮 szeroko艣膰 kolumn */
.modern-table th:nth-child(1) { min-width: 120px; } /* Imi臋 */
.modern-table th:nth-child(2) { min-width: 120px; } /* Nazwisko */
.modern-table th:nth-child(3) { min-width: 100px; } /* PESEL */
.modern-table th:nth-child(4) { min-width: 150px; } /* Adres */
.modern-table th:nth-child(5) { min-width: 100px; } /* Telefon */
.modern-table th:nth-child(6) { min-width: 120px; } /* Email */
.modern-table th:nth-child(7) { min-width: 120px; } /* Akcje */
/* Style dla klikalnych link贸w w kartach */
.hover-link {
transition: all 0.3s ease;
cursor: pointer;
}
.hover-link:hover {
color: #007bff !important;
transform: translateX(5px);
}
.hover-link:hover .fa-external-link-alt {
color: #007bff !important;
}
/* Karta aktywno艣ci staje si臋 interaktywna */
.dashboard-card-header .hover-link:hover + .dashboard-card-body {
background-color: #f8f9fa;
}
.modern-tbody {
background: white;
}
.modern-tr {
transition: all 0.3s ease;
border-bottom: 1px solid #f8f9fa;
}
.modern-tr:hover {
background: #f8f9fa;
transform: translateX(5px);
}
/* Odst臋py mi臋dzy sekcjami w widokach mobile */
@media (max-width: 767.98px) {
/* Odst臋py mi臋dzy g艂贸wnymi sekcjami w widokach patients, staff, users, subscriptions */
.modern-header {
margin-bottom: 2rem !important;
}
.modern-filters {
margin-bottom: 1.5rem !important;
}
.modern-table-container {
margin-bottom: 2rem !important;
}
/* Odst臋py mi臋dzy filtrami a przyciskiem "dodaj" na mobile */
.modern-filters + .d-block.d-md-none {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
/* Odst臋py mi臋dzy przyciskiem "dodaj" a list膮 na mobile */
.d-block.d-md-none + .modern-table-container,
.d-block.d-md-none + div .modern-table-container {
margin-top: 1.5rem !important;
}
/* Odst臋py mi臋dzy filtrami a list膮 (gdy nie ma przycisku dodaj) */
.modern-filters + .modern-table-container {
margin-top: 1.5rem !important;
}
/* Odst臋py mi臋dzy wierszami tabeli */
.modern-tr {
margin-bottom: 0.5rem !important;
}
/* Odst臋py mi臋dzy kartami/sekcjami */
.card.mb-4,
.card.mb-3 {
margin-bottom: 2rem !important;
}
/* Odst臋py mi臋dzy sekcjami - og贸lne */
.modern-header + .modern-filters {
margin-top: 1.5rem !important;
}
.modern-header + .modern-table-container {
margin-top: 1.5rem !important;
}
/* Odst臋py dla alert贸w */
.alert {
margin-bottom: 1.5rem !important;
}
/* Odst臋py dla row ze statystykami (je艣li s膮 widoczne) */
.row.mb-4 {
margin-bottom: 2rem !important;
}
/* Odst臋py dla kontenera przycisku dodaj na mobile */
.d-block.d-md-none {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.d-block.d-md-none > div {
margin-bottom: 0 !important;
}
/* Naprawa layoutu dla priceDetails i priceEdit */
/* Header z tytu艂em i przyciskami - uk艂ad w kolumnie na mobile - TYLKO dla priceDetails/priceEdit */
/* U偶ywamy selektora bazuj膮cego na kontek艣cie - tylko w container-fluid bez modern-header (priceDetails/priceEdit) */
.container-fluid > .row > .col-12 > .d-flex.justify-content-between.align-items-center.mb-3 {
flex-direction: column !important;
align-items: flex-start !important;
gap: 1rem !important;
}
.container-fluid > .row > .col-12 > .d-flex.justify-content-between.align-items-center.mb-3 > div {
width: 100% !important;
display: flex !important;
gap: 0.5rem !important;
flex-wrap: wrap !important;
}
.container-fluid > .row > .col-12 > .d-flex.justify-content-between.align-items-center.mb-3 .btn {
flex: 1 1 auto !important;
min-width: 120px !important;
}
/* Odst臋py mi臋dzy kartami w priceDetails i priceEdit */
.card.mt-4,
.card.mt-3 {
margin-top: 2rem !important;
}
/* Specyficzne odst臋py dla priceDetails - mi臋dzy Histori膮 zmian a Akcjami */
.col-md-8 .card.mt-4 + .col-md-4,
.col-md-8 .card.mt-4 ~ .col-md-4 {
margin-top: 2rem !important;
}
/* Odst臋p mi臋dzy kart膮 Akcje a kart膮 Informacje w priceDetails */
.col-md-4 .card + .card.mt-3 {
margin-top: 2rem !important;
}
/* Naprawa overflow w sekcjach Informacje i Historia zmian */
.card-body {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
padding-bottom: 2.5rem !important; /* Zwi臋kszony padding na dole */
}
.card {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
margin-bottom: 1.5rem !important; /* Odst臋p pod kart膮, 偶eby border by艂 widoczny */
}
/* Upewnij si臋, 偶e kolumny nie ograniczaj膮 wysoko艣ci */
.col-md-8,
.col-md-4 {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
min-height: auto !important;
padding-bottom: 1rem !important; /* Dodatkowy padding na dole kolumny */
}
/* Specyficzne dla priceDetails i priceEdit - upewnij si臋, 偶e row nie ogranicza */
.row {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
margin-bottom: 1rem !important; /* Odst臋p pod row */
}
/* Specyficzne dla sekcji Historia zmian w priceEdit - ostatnia sekcja */
.col-md-4 .card.mt-3:last-child,
.col-md-8 .card.mt-3:last-child {
margin-bottom: 2.5rem !important; /* Zwi臋kszony odst臋p dla ostatniej karty */
}
.col-md-4 .card.mt-3:last-child .card-body,
.col-md-8 .card.mt-3:last-child .card-body {
padding-bottom: 2.5rem !important; /* Zwi臋kszony padding */
}
/* Specyficzne dla sekcji Informacje w priceDetails */
.col-md-4 .card:last-child {
margin-bottom: 2.5rem !important; /* Zwi臋kszony odst臋p dla ostatniej karty */
}
.col-md-4 .card:last-child .card-body {
padding-bottom: 2.5rem !important; /* Zwi臋kszony padding */
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
}
/* Specyficzne dla priceDetails - odst臋p mi臋dzy kolumnami */
.row > .col-md-8 + .col-md-4 {
margin-top: 2rem !important;
}
/* Specyficzne dla priceEdit - ostatnia sekcja Historia zmian */
.col-md-4 > .card.mt-3:last-child,
.col-md-8 > .card.mt-3:last-child {
margin-bottom: 2.5rem !important; /* Zwi臋kszony odst臋p */
}
/* Upewnij si臋, 偶e container-fluid nie ogranicza */
.container-fluid {
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
padding-bottom: 1rem !important; /* Zwi臋kszony padding na dole */
}
/* Upewnij si臋, 偶e wszystkie elementy w priceDetails i priceEdit s膮 widoczne */
.container-fluid .row .col-12 {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
padding-bottom: 1rem !important; /* Zwi臋kszony padding */
}
/* Dodatkowy padding dla wszystkich kart w priceDetails i priceEdit */
.container-fluid .card {
margin-bottom: 1rem !important; /* Odst臋p pod ka偶d膮 kart膮 */
}
.container-fluid .card:last-child {
margin-bottom: 1rem !important; /* Wi臋kszy odst臋p dla ostatniej karty */
}
/* Layout dla tabeli prices na mobile - TYLKO dla prices (u偶ywa klas price-name, price-value) */
/* G艂贸wny selektor z :has() dla nowoczesnych przegl膮darek - TYLKO dla wierszy z price-name-cell */
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) {
display: flex !important;
flex-direction: column !important;
padding: 1rem !important;
margin-bottom: 1.5rem !important;
border: 1px solid #e9ecef !important;
border-radius: 0.25rem !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td {
display: block !important;
width: 100% !important;
border: none !important;
padding: 0.5rem 0 !important;
}
/* Pierwsza kom贸rka - nazwa us艂ugi (linia 1) - TYLKO dla prices */
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td:first-child {
order: 1 !important;
padding-bottom: 0.75rem !important;
border-bottom: 1px solid #e9ecef !important;
margin-bottom: 0.75rem !important;
}
/* Druga linia - opis, cena, status, data - TYLKO dla prices */
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td:nth-child(2),
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td:nth-child(3),
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td:nth-child(4),
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td:nth-child(5) {
order: 2 !important;
display: inline-block !important;
width: auto !important;
margin-right: 1rem !important;
margin-bottom: 0.5rem !important;
vertical-align: top !important;
}
/* Trzecia linia - przyciski akcji - TYLKO dla prices */
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td:last-child {
order: 3 !important;
padding-top: 0.75rem !important;
border-top: 1px solid #e9ecef !important;
margin-top: 0.75rem !important;
width: 100% !important;
display: block !important;
}
/* Przyciski akcji - uk艂ad w rz臋dzie - TYLKO dla prices */
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td:last-child .action-buttons {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.5rem !important;
width: 100% !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td:last-child .action-buttons .btn {
flex: 1 1 auto !important;
min-width: 60px !important;
}
/* Etykiety dla p贸l w drugiej linii - TYLKO dla prices (tylko w wierszach z price-name-cell) */
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td:nth-child(2)::before {
content: "Cena: " !important;
font-weight: 600 !important;
color: #6c757d !important;
margin-right: 0.25rem !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td:nth-child(3)::before {
content: "Opis: " !important;
font-weight: 600 !important;
color: #6c757d !important;
margin-right: 0.25rem !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td:nth-child(4)::before {
content: "Status: " !important;
font-weight: 600 !important;
color: #6c757d !important;
margin-right: 0.25rem !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.price-name-cell) td:nth-child(5)::before {
content: "Data: " !important;
font-weight: 600 !important;
color: #6c757d !important;
margin-right: 0.25rem !important;
}
/* Upewnij si臋, 偶e inne tabele (patients, staff, users) NIE maj膮 etykiet z prices */
/* Usu艅 etykiety dla wierszy bez price-name-cell - tylko usu艅 content, nie zmieniaj display */
table.mobile-table#filterTable tbody tr.modern-tr:not(:has(.price-name-cell)) td:nth-child(2)::before,
table.mobile-table#filterTable tbody tr.modern-tr:not(:has(.price-name-cell)) td:nth-child(3)::before,
table.mobile-table#filterTable tbody tr.modern-tr:not(:has(.price-name-cell)) td:nth-child(4)::before,
table.mobile-table#filterTable tbody tr.modern-tr:not(:has(.price-name-cell)) td:nth-child(5)::before {
content: none !important;
}
}
.modern-tr.patient-disabled, .modern-tr.staff-disabled, .modern-tr.user-disabled {
opacity: 0.7;
background: #f8f9fa;
}
.modern-tr.patient-highlighted {
background: #fff3cd !important;
border-left: 4px solid #ffc107;
animation: highlightPulse 1s ease-in-out;
}
@keyframes highlightPulse {
0% {
background: #fff3cd;
}
50% {
background: #ffe082;
}
100% {
background: #fff3cd;
}
}
/* Sort buttons styles */
.sort-container .btn-group .btn {
border-radius: 0.25rem;
font-size: 0.875rem;
}
.sort-container .btn-group .btn.active {
background: #007bff;
color: #fff;
border-color: #007bff;
}
.sort-container .btn-group .btn.active:hover {
background: #0056b3;
border-color: #0056b3;
}
.modern-td {
border: none !important;
padding: 1rem 1.5rem !important;
vertical-align: middle;
}
/* Avatar and Name Cells */
.patient-name-cell, .staff-name-cell, .user-name-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.patient-avatar-small, .staff-avatar-small, .user-avatar-small {
width: 35px;
height: 35px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.9rem;
}
.patient-info-cell, .staff-info-cell, .user-info-cell {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.patient-name, .staff-name, .user-name {
font-weight: 600;
color: #495057;
}
.patient-lastname, .staff-lastname, .user-lastname {
font-weight: 600;
color: #495057;
}
.patient-pesel, .staff-pesel, .user-username {
font-family: 'Courier New', monospace;
font-weight: 500;
color: #6c757d;
}
/* Address Cell */
.address-cell {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.address-main {
font-weight: 500;
color: #495057;
}
.address-secondary {
font-size: 0.85rem;
color: #6c757d;
}
/* Contact Info */
.patient-phone, .staff-phone, .user-phone,
.patient-email, .staff-email, .user-email {
font-size: 0.9rem;
color: #495057;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
/* Status Badges */
.status-badge {
padding: 0.25rem 0.5rem;
border-radius: 15px;
font-size: 0.7rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.status-inactive {
background: rgba(220, 53, 69, 0.1);
color: #dc3545;
}
.status-active {
background: rgba(40, 167, 69, 0.1);
color: #28a745;
}
/* Action Buttons */
.action-buttons {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.action-buttons .btn {
border-radius: 8px;
padding: 0.375rem 0.75rem;
font-size: 0.8rem;
}
/* Przyciski akcji w prices.jsp na desktop - zawijanie i mniejsze rozmiary */
@media (min-width: 768px) {
#filterTable.modern-table:has(.price-name-cell) td:last-child .action-buttons {
flex-wrap: wrap;
gap: 0.25rem;
}
#filterTable.modern-table:has(.price-name-cell) td:last-child .action-buttons .btn {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
min-width: auto;
}
}
/* Przyciski akcji w prices.jsp na desktop - zawijanie i mniejsze rozmiary */
@media (min-width: 768px) {
#filterTable.modern-table:has(.price-name-cell) td:last-child .action-buttons {
flex-wrap: wrap;
gap: 0.25rem;
}
#filterTable.modern-table:has(.price-name-cell) td:last-child .action-buttons .btn {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
min-width: auto;
}
}
/* Empty State */
.empty-state {
padding: 3rem 2rem;
}
.empty-state-content {
text-align: center;
}
.empty-state-content h5 {
margin-bottom: 0.5rem;
}
.empty-state-content p {
margin-bottom: 1.5rem;
}
/* Responsive adjustments for modern components */
@media (max-width: 1199.98px) {
.modern-title {
font-size: 1.5rem;
}
.modern-header {
padding: 1.5rem;
}
.modern-th, .modern-td {
padding: 0.75rem 1rem !important;
}
}
@media (max-width: 991.98px) {
.modern-actions {
flex-direction: column;
gap: 0.5rem;
}
.btn-modern {
padding: 0.5rem 1rem;
}
}
/* ===== MODERN PAGINATION STYLES ===== */
.modern-pagination-container {
background: white;
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
border: 1px solid #e9ecef;
overflow-x: hidden;
max-width: 100%;
}
.modern-pagination {
margin: 0;
flex-wrap: wrap;
justify-content: center;
display: flex;
list-style: none;
padding: 0;
}
.modern-pagination .page-item {
margin: 0 0.25rem;
}
.modern-pagination .page-link {
border: none;
border-radius: 10px;
padding: 0.75rem 1rem;
color: #495057;
font-weight: 600;
background: #f8f9fa;
transition: all 0.3s ease;
min-width: 45px;
text-align: center;
}
.modern-pagination .page-link:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.modern-pagination .page-item.active .page-link {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.modern-pagination .page-item.disabled .page-link {
background: #e9ecef;
color: #6c757d;
cursor: not-allowed;
opacity: 0.6;
}
.modern-pagination .page-item.disabled .page-link:hover {
background: #e9ecef;
color: #6c757d;
transform: none;
box-shadow: none;
}
/* Search field styles */
.modern-filter-body .form-control {
border-radius: 10px;
border: 1px solid #dee2e6;
padding: 0.75rem 1rem;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.modern-filter-body .form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
.modern-filter-body .form-label {
font-weight: 600;
color: #495057;
margin-bottom: 0.5rem;
}
.modern-filter-body .form-text {
font-size: 0.8rem;
color: #6c757d;
}
/* Responsive pagination */
@media (max-width: 767.98px) {
.modern-pagination .page-link {
padding: 0.5rem 0.75rem;
min-width: 40px;
font-size: 0.9rem;
}
.modern-pagination .page-item {
margin: 0 0.125rem;
}
.modern-pagination-container {
padding: 1rem;
}
}
@media (max-width: 575.98px) {
.modern-pagination .page-link {
padding: 0.375rem 0.5rem;
min-width: 35px;
font-size: 0.8rem;
}
.modern-pagination .page-item {
margin: 0 0.0625rem;
}
}
/* ===== MODERN FORM STYLES ===== */
.modern-form-container {
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
overflow: hidden;
border: 1px solid #e9ecef;
}
.modern-form {
padding: 0;
}
.modern-form-section {
border-bottom: 1px solid #f8f9fa;
}
.modern-form-section:last-child {
border-bottom: none;
}
.modern-section-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 1.5rem 2rem 1rem;
font-weight: 600;
color: #495057;
font-size: 1.1rem;
border-bottom: 1px solid #dee2e6;
}
.modern-section-body {
padding: 2rem;
}
.modern-form-group {
margin-bottom: 1.5rem;
}
.modern-form-group:last-child {
margin-bottom: 0;
}
.modern-form-label {
display: block;
font-weight: 600;
color: #495057;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.modern-form-control {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 0.9rem;
transition: all 0.3s ease;
background: #f8f9fa;
margin-bottom: 1rem;
}
.modern-form-control:focus {
outline: none;
border-color: #667eea;
background: white;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
.modern-form-control::placeholder {
color: #adb5bd;
font-style: italic;
}
.modern-form-error {
color: #dc3545;
font-size: 0.8rem;
margin-top: 0.25rem;
display: block;
font-weight: 500;
}
.modern-form-help {
color: #6c757d;
font-size: 0.8rem;
margin-top: 0.25rem;
display: block;
}
.modern-form-control-plaintext {
padding: 0.5rem 0;
margin-bottom: 0;
line-height: 1.5;
color: #495057;
background-color: transparent;
border: solid transparent;
border-width: 1px 0;
font-size: 0.9rem;
}
.modern-select {
min-height: 3rem;
}
.modern-form-actions {
background: #f8f9fa;
padding: 1.5rem 2rem;
border-top: 1px solid #dee2e6;
}
/* Form responsive adjustments */
@media (max-width: 991.98px) {
.modern-section-header {
padding: 1.25rem 1.5rem 0.75rem;
font-size: 1rem;
}
.modern-section-body {
padding: 1.5rem;
}
.modern-form-actions {
padding: 1.25rem 1.5rem;
}
}
@media (max-width: 767.98px) {
.modern-section-header {
padding: 1rem 1.25rem 0.5rem;
font-size: 0.95rem;
}
.modern-section-body {
padding: 1.25rem;
}
.modern-form-actions {
padding: 1rem 1.25rem;
}
.modern-form-actions .d-flex {
flex-direction: column;
gap: 0.75rem;
}
.modern-form-actions .btn {
width: 100%;
}
}
@media (max-width: 575.98px) {
.modern-section-header {
padding: 0.75rem 1rem 0.5rem;
font-size: 0.9rem;
}
.modern-section-body {
padding: 1rem;
}
.modern-form-actions {
padding: 0.75rem 1rem;
}
.modern-form-control {
padding: 0.625rem 0.875rem;
font-size: 0.85rem;
}
.modern-form-label {
font-size: 0.85rem;
}
}
/* 20250630 dodano */
.no-mobile-view {
display: inherit;
}
.mobile-view {
display: none;
}
.mobile-view-title {
display: none;
}
@media (max-width: 767.98px) {
.no-mobile-view {
display: none;
}
.mobile-view {
display: inherit;
}
.mobile-view-title {
display: inherit;
font-size: 80%;
font-weight: 400;
color: #6c757d !important;
}
table.mobile-table {
display: block;
width: 100% !important;
max-width: 100% !important;
}
table.mobile-table thead {
display: none;
}
/* Tbody - pe艂na szeroko艣膰 */
table.mobile-table tbody,
table.mobile-table .modern-tbody,
table.mobile-table#ratesTable tbody,
table.mobile-table#ratesTable .modern-tbody {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
padding-bottom: 1rem !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
}
table.mobile-table td {
display: inline-block;
vertical-align: middle !important;
box-sizing: border-box !important;
}
/* Dla patients i staff - upewnij si臋, 偶e td nie powoduj膮 problem贸w z szeroko艣ci膮 */
table.mobile-table#filterTable tbody tr.modern-tr td {
box-sizing: border-box !important;
max-width: 100% !important;
}
/* Wyj膮tek dla tabel rate - musz膮 by膰 block */
table.mobile-table#ratesTable td {
display: block !important;
width: 100% !important;
}
table.mobile-table tr {
display: block;
width: 100% !important;
max-width: 100% !important;
margin-bottom: 16px;
margin-left: 0 !important;
margin-right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
border: 1px solid rgba(0, 0, 0, .125) !important;
border-radius: .25rem;
box-sizing: border-box !important;
clear: both !important;
float: none !important;
}
/* Upewnij si臋, 偶e wiersze w patients i staff maj膮 pe艂n膮 szeroko艣膰 */
/* U偶ywamy bardziej specyficznych selektor贸w bazuj膮cych na klasach */
table.mobile-table#filterTable tbody tr.modern-tr {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0.5rem !important;
box-sizing: border-box !important;
clear: both !important;
float: none !important;
position: relative !important;
}
/* Dodatkowe wymuszenie dla staff - bazuj膮c na tym 偶e staff ma staff-pesel */
table.mobile-table#filterTable tbody tr.modern-tr:has(.staff-pesel),
table.mobile-table#filterTable tbody tr.modern-tr:has(.staff-phone),
table.mobile-table#filterTable tbody tr.modern-tr:has(.staff-email) {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
box-sizing: border-box !important;
clear: both !important;
float: none !important;
}
/* Upewnij si臋, 偶e tbody i table maj膮 pe艂n膮 szeroko艣膰 dla patients i staff */
table.mobile-table#filterTable tbody {
width: 100% !important;
max-width: 100% !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
table.mobile-table#filterTable {
width: 100% !important;
max-width: 100% !important;
display: block !important;
margin: 0 !important;
}
/* Upewnij si臋, 偶e modern-table-container dla patients i staff ma pe艂n膮 szeroko艣膰 */
.modern-table-container:has(table.mobile-table#filterTable),
.modern-table-container table.mobile-table#filterTable {
width: 100% !important;
max-width: 100% !important;
}
/* Upewnij si臋, 偶e td w patients i staff nie powoduj膮 problem贸w z szeroko艣ci膮 wiersza */
table.mobile-table#filterTable tbody tr.modern-tr td {
white-space: normal !important;
}
/* Dodatkowe style dla wierszy - upewnij si臋 偶e s膮 wycentrowane i pe艂nej szeroko艣ci */
table.mobile-table#filterTable tbody tr.modern-tr {
white-space: normal !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/* Upewnij si臋, 偶e modern-table-container dla patients i staff ma pe艂n膮 szeroko艣膰 */
.modern-table-container:has(table.mobile-table#filterTable),
.modern-table-container table.mobile-table#filterTable {
width: 100% !important;
max-width: 100% !important;
}
/* Wyj膮tek dla tabel rate - pe艂na szeroko艣膰 */
table.mobile-table#ratesTable tr,
table.mobile-table#ratesTable tbody tr,
table.mobile-table#ratesTable tbody tr.rate-row {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
box-sizing: border-box !important;
clear: both !important;
float: none !important;
}
/* Ostatni wiersz w tabelach rate - upewnij si臋, 偶e jest w pe艂ni widoczny */
table.mobile-table#ratesTable tbody tr:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Pierwszy wiersz - upewnij si臋, 偶e g贸rne rogi s膮 widoczne */
table.mobile-table tbody tr:first-child {
border-top-left-radius: .25rem !important;
border-top-right-radius: .25rem !important;
}
/* G艁脫WNA POPRAWKA - modern-table-container na mobile - dla WSZYSTKICH tabel */
.modern-table-container {
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
overflow-x: hidden !important; /* Tylko poziomy overflow ukryty - zapobiega przesuwaniu na boki */
overflow-y: visible !important; /* Pionowy overflow widoczny - pozwala zobaczy膰 ostatni wiersz */
padding: 0 !important;
padding-bottom: 3rem !important; /* Zwi臋kszony padding dla ostatniego wiersza */
background: transparent !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
display: block !important; /* Upewnij si臋, 偶e kontener jest widoczny */
visibility: visible !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Upewnij si臋, 偶e wiersze maj膮 widoczne bordery - dla patients, staff, users, params, activities */
table.mobile-table#filterTable tbody tr.modern-tr {
border: 1px solid rgba(0, 0, 0, .125) !important;
border-left: 1px solid rgba(0, 0, 0, .125) !important;
border-right: 1px solid rgba(0, 0, 0, .125) !important;
overflow: visible !important;
box-shadow: none !important;
}
/* Upewnij si臋, 偶e modern-table-container nie ucina border贸w */
.modern-table-container:has(table.mobile-table#filterTable) {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
/* Upewnij si臋, 偶e wszystkie wiersze w filterTable maj膮 pe艂n膮 szeroko艣膰 i widoczne bordery */
/* Style s膮 ju偶 zdefiniowane wy偶ej dla table.mobile-table#filterTable tbody tr.modern-tr */
/* Dodatkowo upewniamy si臋, 偶e params i activities r贸wnie偶 maj膮 pe艂n膮 szeroko艣膰 */
.modern-table-container:has(table.mobile-table#filterTable) table.mobile-table#filterTable tbody tr.modern-tr {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
/* Layout dla activities.jsp na mobile - zwarty uk艂ad */
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) {
display: block !important;
padding: 0.75rem !important;
margin-bottom: 1rem !important;
border: 1px solid #e9ecef !important;
border-radius: 0.25rem !important;
position: relative !important;
}
/* Domy艣lnie wszystkie td s膮 block */
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td {
border: none !important;
padding: 0.25rem 0 !important;
margin-bottom: 0.5rem !important;
display: block !important;
width: 100% !important;
}
/* Pierwsza linia: Data + "ile czasu temu" + IP - wszystko w jednej linii, kompaktowo */
/* Pierwsza kom贸rka z dat膮 - flexbox z IP po prawej */
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:first-child {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 0.5rem !important;
margin-bottom: 0.5rem !important;
padding-bottom: 0.5rem !important;
border-bottom: 1px solid #e9ecef !important;
position: relative !important;
width: 100% !important;
}
/* Data z "ile czasu up艂yn臋艂o" - po lewej, kompaktowo */
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:first-child .activity-date-cell {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
flex-wrap: nowrap !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:first-child .activity-date-main,
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:first-child .activity-date-secondary {
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
font-size: 0.85rem !important;
}
/* Adres IP - po prawej w pierwszej kom贸rce, u偶ywamy position absolute */
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:nth-child(5) {
display: inline-block !important;
width: auto !important;
margin-left: auto !important;
font-size: 0.8rem !important;
padding: 0 !important;
margin-bottom: 0 !important;
position: absolute !important;
right: 0.75rem !important;
top: 0.75rem !important;
background: white !important;
z-index: 1 !important;
padding-left: 0.5rem !important;
}
/* Druga linia: Typ zdarzenia + Dane u偶ytkownika - obok siebie, kompaktowo */
/* U偶ywamy inline-block, aby by艂y obok siebie */
/* Typ zdarzenia */
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:nth-child(2) {
display: inline-block !important;
width: auto !important;
max-width: none !important;
margin-right: 1rem !important;
margin-bottom: 0.5rem !important;
vertical-align: middle !important;
font-size: 0.85rem !important;
}
/* Dane u偶ytkownika - obok typu */
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:nth-child(4) {
display: inline-block !important;
width: auto !important;
max-width: none !important;
margin-right: 0 !important;
margin-bottom: 0.5rem !important;
vertical-align: middle !important;
font-size: 0.8rem !important;
}
/* Opis - pe艂na szeroko艣膰, po typie i u偶ytkowniku */
/* U偶ywamy clear: left, aby by艂 w nowej linii po typie i u偶ytkowniku */
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:nth-child(3) {
display: block !important;
width: 100% !important;
clear: left !important;
margin-bottom: 0.5rem !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:nth-child(4) .activity-user-cell {
display: flex !important;
align-items: center !important;
gap: 0.4rem !important;
flex-wrap: nowrap !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:nth-child(4) .activity-user-avatar {
font-size: 0.75rem !important;
width: 1.2rem !important;
height: 1.2rem !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:nth-child(4) .activity-user-info {
display: flex !important;
align-items: center !important;
gap: 0.3rem !important;
flex-wrap: nowrap !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:nth-child(4) .activity-user-name,
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:nth-child(4) .activity-user-details {
display: inline !important;
margin-right: 0.3rem !important;
white-space: nowrap !important;
font-size: 0.8rem !important;
}
/* Trzecia linia: Opis - pe艂na szeroko艣膰, kompaktowo */
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:nth-child(3) {
display: block !important;
width: 100% !important;
margin-bottom: 0.5rem !important;
font-size: 0.9rem !important;
line-height: 1.4 !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:nth-child(3) .activity-description-main {
font-size: 0.9rem !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:nth-child(3) .activity-description-secondary {
font-size: 0.75rem !important;
margin-top: 0.25rem !important;
}
/* Czwarta linia: Przyciski */
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:last-child {
padding-top: 0.5rem !important;
border-top: 1px solid #e9ecef !important;
margin-top: 0.25rem !important;
margin-bottom: 0 !important;
width: 100% !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:last-child .action-buttons {
display: flex !important;
justify-content: flex-start !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.activity-date-cell) td:last-child .btn {
padding: 0.25rem 0.5rem !important;
font-size: 0.8rem !important;
}
/* Layout dla params.jsp na mobile - zwarty uk艂ad */
table.mobile-table#filterTable tbody tr.modern-tr:has(.param-name-cell) {
display: flex !important;
flex-direction: column !important;
padding: 0.75rem !important;
margin-bottom: 1rem !important;
border: 1px solid #e9ecef !important;
border-radius: 0.25rem !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.param-name-cell) td {
display: block !important;
width: 100% !important;
border: none !important;
padding: 0.25rem 0 !important;
margin-bottom: 0.5rem !important;
}
/* Pierwsza linia: Nazwa parametru */
table.mobile-table#filterTable tbody tr.modern-tr:has(.param-name-cell) td:first-child {
padding-bottom: 0.5rem !important;
border-bottom: 1px solid #e9ecef !important;
margin-bottom: 0.5rem !important;
font-size: 0.95rem !important;
}
/* Druga linia: Typ i Warto艣膰 obok siebie */
table.mobile-table#filterTable tbody tr.modern-tr:has(.param-name-cell) td:nth-child(2),
table.mobile-table#filterTable tbody tr.modern-tr:has(.param-name-cell) td:nth-child(3) {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
width: auto !important;
margin-right: 1rem !important;
margin-bottom: 0.5rem !important;
font-size: 0.85rem !important;
}
/* Trzecia linia: Kategoria, Status i Data - wszystko w jednej linii */
table.mobile-table#filterTable tbody tr.modern-tr:has(.param-name-cell) td:nth-child(4),
table.mobile-table#filterTable tbody tr.modern-tr:has(.param-name-cell) td:nth-child(5),
table.mobile-table#filterTable tbody tr.modern-tr:has(.param-name-cell) td:nth-child(6) {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
width: auto !important;
margin-right: 0.75rem !important;
margin-bottom: 0.5rem !important;
font-size: 0.8rem !important;
vertical-align: middle !important;
}
/* Czwarta linia: Przyciski akcji */
table.mobile-table#filterTable tbody tr.modern-tr:has(.param-name-cell) td:last-child {
padding-top: 0.5rem !important;
border-top: 1px solid #e9ecef !important;
margin-top: 0.25rem !important;
margin-bottom: 0 !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.param-name-cell) td:last-child .action-buttons {
display: flex !important;
justify-content: flex-start !important;
gap: 0.5rem !important;
flex-wrap: wrap !important;
}
table.mobile-table#filterTable tbody tr.modern-tr:has(.param-name-cell) td:last-child .btn {
padding: 0.25rem 0.5rem !important;
font-size: 0.8rem !important;
}
/* Layout dla subscriptions.jsp na mobile - tylko wiersze bez specjalnych klas */
/* U偶ywamy bardziej specyficznego selektora - tylko wiersze w #devices-tbody */
#devices-tbody tr,
table.mobile-table#filterTable tbody tr:not(:has(.activity-date-cell)):not(:has(.param-name-cell)):not(:has(.patient-pesel)):not(:has(.staff-pesel)):not(:has(.price-name-cell)):not(.modern-tr) {
display: flex !important;
flex-direction: column !important;
padding: 1rem !important;
margin-bottom: 1.5rem !important;
border: 1px solid #e9ecef !important;
border-radius: 0.25rem !important;
}
/* Wykluczamy wiersze z innych widok贸w u偶ywaj膮c :not() */
#devices-tbody tr td,
table.mobile-table#filterTable tbody tr:not(:has(.activity-date-cell)):not(:has(.param-name-cell)):not(:has(.patient-pesel)):not(:has(.staff-pesel)):not(:has(.price-name-cell)):not(.modern-tr) td {
display: block !important;
width: 100% !important;
border: none !important;
padding: 0.5rem 0 !important;
margin-bottom: 0.5rem !important;
}
/* Pierwsza linia: Urz膮dzenie */
#devices-tbody tr td:first-child,
table.mobile-table#filterTable tbody tr:not(:has(.activity-date-cell)):not(:has(.param-name-cell)):not(:has(.patient-pesel)):not(:has(.staff-pesel)):not(:has(.price-name-cell)):not(.modern-tr) td:first-child {
padding-bottom: 0.75rem !important;
border-bottom: 1px solid #e9ecef !important;
margin-bottom: 0.75rem !important;
}
/* Druga linia: Typ i Status obok siebie */
#devices-tbody tr td:nth-child(2),
#devices-tbody tr td:nth-child(3),
table.mobile-table#filterTable tbody tr:not(:has(.activity-date-cell)):not(:has(.param-name-cell)):not(:has(.patient-pesel)):not(:has(.staff-pesel)):not(:has(.price-name-cell)):not(.modern-tr) td:nth-child(2),
table.mobile-table#filterTable tbody tr:not(:has(.activity-date-cell)):not(:has(.param-name-cell)):not(:has(.patient-pesel)):not(:has(.staff-pesel)):not(:has(.price-name-cell)):not(.modern-tr) td:nth-child(3) {
display: inline-flex !important;
align-items: center !important;
gap: 0.75rem !important;
width: auto !important;
margin-right: 1rem !important;
margin-bottom: 0.75rem !important;
}
/* Trzecia linia: Ostatnia aktywno艣膰 */
#devices-tbody tr td:nth-child(4),
table.mobile-table#filterTable tbody tr:not(:has(.activity-date-cell)):not(:has(.param-name-cell)):not(:has(.patient-pesel)):not(:has(.staff-pesel)):not(:has(.price-name-cell)):not(.modern-tr) td:nth-child(4) {
display: block !important;
margin-bottom: 0.75rem !important;
}
/* Ostatnia linia: Przyciski akcji */
#devices-tbody tr td:last-child,
table.mobile-table#filterTable tbody tr:not(:has(.activity-date-cell)):not(:has(.param-name-cell)):not(:has(.patient-pesel)):not(:has(.staff-pesel)):not(:has(.price-name-cell)):not(.modern-tr) td:last-child {
padding-top: 0.75rem !important;
border-top: 1px solid #e9ecef !important;
margin-top: 0.5rem !important;
}
#devices-tbody tr td:last-child .btn-group,
table.mobile-table#filterTable tbody tr:not(:has(.activity-date-cell)):not(:has(.param-name-cell)):not(:has(.patient-pesel)):not(:has(.staff-pesel)):not(:has(.price-name-cell)):not(.modern-tr) td:last-child .btn-group {
display: flex !important;
justify-content: flex-start !important;
gap: 0.5rem !important;
}
/* Upewnij si臋, 偶e kontener nadrz臋dny dla patients i staff ma pe艂n膮 szeroko艣膰 */
.col-12:has(table.mobile-table#filterTable),
.row:has(table.mobile-table#filterTable),
.container-fluid:has(table.mobile-table#filterTable) {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Dodatkowe style dla wierszy w patients i staff - wymuszenie pe艂nej szeroko艣ci */
/* U偶ywamy :has() aby dzia艂a艂o tylko dla patients i staff */
table.mobile-table#filterTable tbody tr.modern-tr:has(.patient-pesel),
table.mobile-table#filterTable tbody tr.modern-tr:has(.staff-pesel),
table.mobile-table#filterTable tbody tr.modern-tr:has(.patient-address),
table.mobile-table#filterTable tbody tr.modern-tr:has(.staff-phone) {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
box-sizing: border-box !important;
clear: both !important;
float: none !important;
position: relative !important;
}
/* Alternatywa dla przegl膮darek bez :has() - wszystkie wiersze w filterTable */
/* To ju偶 jest zdefiniowane wy偶ej, ale dodajemy jeszcze raz dla pewno艣ci */
table.mobile-table#filterTable tbody tr.modern-tr {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
/* Wymuszenie pe艂nej szeroko艣ci dla div贸w nadrz臋dnych w patients i staff */
.modern-table-container > table.mobile-table#filterTable,
.modern-table-container table.mobile-table#filterTable {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
}
/* Upewnij si臋, 偶e div nadrz臋dny modern-table-container ma pe艂n膮 szeroko艣膰 */
div:has(table.mobile-table#filterTable),
.modern-table-container {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Upewnij si臋, 偶e wszystkie kontenery nadrz臋dne maj膮 pe艂n膮 szeroko艣膰 */
.col-12:has(.modern-table-container),
.row:has(.modern-table-container),
.container-fluid:has(.modern-table-container) {
width: 100% !important;
max-width: 100% !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
/* Wymuszenie pe艂nej szeroko艣ci dla div贸w bezpo艣rednio nadrz臋dnych */
.modern-table-container,
div > .modern-table-container,
.col-12 > div > .modern-table-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
opacity: 1 !important;
}
/* Upewnij si臋, 偶e wszystkie tbody s膮 widoczne - dla WSZYSTKICH tabel */
.modern-table-container table tbody,
.modern-table-container table.mobile-table tbody,
.modern-table-container table#filterTable tbody,
.modern-table-container table.modern-table tbody {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
min-height: auto !important;
}
/* Ostatni wiersz w ka偶dej tabeli - upewnij si臋, 偶e jest widoczny */
.modern-table-container table tbody tr:last-child,
.modern-table-container table.mobile-table tbody tr:last-child,
.modern-table-container table#filterTable tbody tr:last-child,
.modern-table-container table.modern-table tbody tr:last-child {
margin-bottom: 0 !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Wszystkie kom贸rki w ostatnim wierszu - tylko dla mobile-table */
.modern-table-container table.mobile-table tbody tr:last-child td {
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
clip: auto !important;
clip-path: none !important;
position: relative !important;
}
/* Ostatnia kom贸rka w ostatnim wierszu - tylko dla mobile-table */
.modern-table-container table.mobile-table tbody tr:last-child td:last-child {
padding-bottom: 2rem !important; /* Zwi臋kszony padding */
margin-bottom: 0 !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
}
/* Dodatkowy padding na ko艅cu tbody dla wszystkich tabel - tylko dla mobile-table */
.modern-table-container table.mobile-table tbody::after {
content: '';
display: block;
height: 2rem;
width: 100%;
clear: both;
}
/* Odst臋p mi臋dzy Modern Header a Bulk Rate Setting Section na mobile */
.modern-header {
margin-bottom: 1.5rem !important;
}
.modern-header + #messageContainer {
margin-bottom: 1rem !important;
}
.modern-header + #messageContainer + .card,
.modern-header + .card {
margin-top: 1.5rem !important;
}
/* Ukryj karty statystyk na mobile w widokach params i prices */
/* NIE ukrywaj stat-card w admin-reports, homeStaff i home - tylko w widokach params i prices */
/* U偶ywamy selektora kt贸ry wyklucza admin-reports, staff-stats i home-stats - sprawdzamy czy NIE ma report-summary, NIE ma staff-stats i NIE ma home-stats */
.container-fluid:not(:has(.report-summary)):not(:has(.staff-stats)):not(:has(.home-stats)) .row.mb-4:has(.stat-card.bg-primary),
.container-fluid:not(:has(.report-summary)):not(:has(.staff-stats)):not(:has(.home-stats)) .row.mb-4:has(.stat-card.bg-success),
.container-fluid:not(:has(.report-summary)):not(:has(.staff-stats)):not(:has(.home-stats)) .row.mb-4:has(.stat-card.bg-info),
.container-fluid:not(:has(.report-summary)):not(:has(.staff-stats)):not(:has(.home-stats)) .row.mb-4:has(.stat-card.bg-warning) {
display: none !important;
}
/* Alternatywny selektor dla przegl膮darek, kt贸re nie obs艂uguj膮 :has() */
/* Ukryj tylko stat-card w row.mb-4 na mobile - tylko w widokach params i prices (NIE admin-reports, NIE homeStaff, NIE home) */
/* Wykluczamy admin-reports, staff-stats i home-stats sprawdzaj膮c czy NIE ma report-summary, NIE ma staff-stats i NIE ma home-stats w kontenerze */
.container-fluid:not(:has(.report-summary)):not(:has(.staff-stats)):not(:has(.home-stats)) .row.mb-4 .stat-card.bg-primary,
.container-fluid:not(:has(.report-summary)):not(:has(.staff-stats)):not(:has(.home-stats)) .row.mb-4 .stat-card.bg-success,
.container-fluid:not(:has(.report-summary)):not(:has(.staff-stats)):not(:has(.home-stats)) .row.mb-4 .stat-card.bg-info,
.container-fluid:not(:has(.report-summary)):not(:has(.staff-stats)):not(:has(.home-stats)) .row.mb-4 .stat-card.bg-warning {
display: none !important;
}
/* Ukryj kolumny zawieraj膮ce stat-card - tylko w widokach params i prices (NIE admin-reports, NIE homeStaff, NIE home) */
.container-fluid:not(:has(.report-summary)):not(:has(.staff-stats)):not(:has(.home-stats)) .row.mb-4 .col-md-3.col-6.mb-3:has(.stat-card.bg-primary),
.container-fluid:not(:has(.report-summary)):not(:has(.staff-stats)):not(:has(.home-stats)) .row.mb-4 .col-md-3.col-6.mb-3:has(.stat-card.bg-success),
.container-fluid:not(:has(.report-summary)):not(:has(.staff-stats)):not(:has(.home-stats)) .row.mb-4 .col-md-3.col-6.mb-3:has(.stat-card.bg-info),
.container-fluid:not(:has(.report-summary)):not(:has(.staff-stats)):not(:has(.home-stats)) .row.mb-4 .col-md-3.col-6.mb-3:has(.stat-card.bg-warning) {
display: none !important;
}
/* Ukryj statystyki w subscriptions na mobile */
/* Subscriptions u偶ywa col-md-4 zamiast col-md-3 */
.container-fluid:not(:has(.home-stats)) .row.mb-4 .col-md-4.mb-3:has(.stat-card) {
display: none !important;
}
.container-fluid:not(:has(.home-stats)) .row.mb-4:has(.stat-card.stat-card-primary):has(.stat-card.stat-card-success):has(.stat-card.stat-card-info) {
display: none !important;
}
/* Dodatkowe zabezpieczenie - upewnij si臋, 偶e stat-card w report-summary, staff-stats i home-stats s膮 widoczne */
.report-summary .stat-card,
.report-summary .row .stat-card,
.staff-stats .stat-card,
.staff-stats .row .stat-card,
.home-stats .stat-card,
.home-stats .row .stat-card,
#staffReportResults .stat-card,
#servicesReportResults .stat-card,
#visitsReportResults .stat-card {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Upewnij si臋, 偶e report-summary i jego zawarto艣膰 s膮 widoczne */
.report-summary,
.report-summary .row,
.report-summary .row .col-md-2,
.report-summary .row .col-md-3 {
display: block !important;
visibility: visible !important;
}
.report-summary .row {
display: flex !important;
flex-wrap: wrap !important;
}
/* Kompaktowe stat-card na mobile - 2 kolumny zamiast 5 */
.report-summary .row .col-md-2,
.report-summary .row .col-md-3 {
flex: 0 0 50% !important;
max-width: 50% !important;
padding: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.report-summary .stat-card {
padding: 0.75rem 0.5rem !important;
margin-bottom: 0 !important;
}
.report-summary .stat-card h3 {
font-size: 1.25rem !important;
margin-bottom: 0.25rem !important;
}
.report-summary .stat-card small {
font-size: 0.7rem !important;
display: block !important;
line-height: 1.2 !important;
}
/* Tabela raport贸w na mobile - bardziej czytelna i kompaktowa */
.report-summary + .mt-4 .table-responsive,
#staffReportResults .table-responsive,
#servicesReportResults .table-responsive,
#visitsReportResults .table-responsive {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
border: 1px solid #dee2e6 !important;
border-radius: 0.25rem !important;
}
.report-summary + .mt-4 .table,
#staffReportResults .table,
#servicesReportResults .table,
#visitsReportResults .table {
font-size: 0.8rem !important;
margin-bottom: 0 !important;
width: 100% !important;
min-width: 600px !important; /* Minimalna szeroko艣膰 dla czytelno艣ci */
}
.report-summary + .mt-4 .table thead th,
#staffReportResults .table thead th,
#servicesReportResults .table thead th,
#visitsReportResults .table thead th {
font-size: 0.7rem !important;
padding: 0.4rem 0.3rem !important;
white-space: nowrap !important;
font-weight: 600 !important;
background-color: #343a40 !important;
color: white !important;
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
}
.report-summary + .mt-4 .table tbody td,
#staffReportResults .table tbody td,
#servicesReportResults .table tbody td,
#visitsReportResults .table tbody td {
padding: 0.4rem 0.3rem !important;
font-size: 0.75rem !important;
white-space: nowrap !important;
}
/* Kompaktowe kolumny dla lepszej czytelno艣ci */
.report-summary + .mt-4 .table th:nth-child(1),
.report-summary + .mt-4 .table td:nth-child(1),
#staffReportResults .table th:nth-child(1),
#staffReportResults .table td:nth-child(1) {
min-width: 80px !important;
max-width: 100px !important;
}
.report-summary + .mt-4 .table th:nth-child(2),
.report-summary + .mt-4 .table td:nth-child(2),
#staffReportResults .table th:nth-child(2),
#staffReportResults .table td:nth-child(2) {
min-width: 120px !important;
max-width: 150px !important;
}
.report-summary + .mt-4 .table th:nth-child(3),
.report-summary + .mt-4 .table td:nth-child(3),
#staffReportResults .table th:nth-child(3),
#staffReportResults .table td:nth-child(3) {
min-width: 150px !important;
max-width: 200px !important;
}
.report-summary + .mt-4 .table th.text-right,
.report-summary + .mt-4 .table td.text-right,
#staffReportResults .table th.text-right,
#staffReportResults .table td.text-right {
min-width: 90px !important;
text-align: right !important;
}
/* Przycisk eksportu na mobile */
#exportButtonContainer,
.report-summary + .mt-4 .text-right,
#staffReportResults .text-right,
#servicesReportResults .text-right,
#visitsReportResults .text-right {
text-align: center !important;
margin-bottom: 1rem !important;
}
#exportButtonContainer .btn,
.report-summary + .mt-4 .btn,
#staffReportResults .btn,
#servicesReportResults .btn,
#visitsReportResults .btn {
width: 100% !important;
max-width: 300px !important;
margin: 0 auto !important;
}
/* Upewnij si臋, 偶e kontener nie ma ogranicze艅 wysoko艣ci */
.container-fluid .row .col-12,
.container-fluid .row .col-12 > div {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
}
/* Wrapper i content - upewnij si臋, 偶e nie ograniczaj膮 wysoko艣ci */
.wrapper {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
}
.content {
overflow-x: hidden !important; /* Tylko poziomy overflow ukryty */
overflow-y: auto !important; /* Pionowy overflow - scroll je艣li potrzeba */
height: auto !important;
max-height: none !important;
}
/* Container-fluid i row - upewnij si臋, 偶e nie ograniczaj膮 */
.container-fluid,
.container-fluid .row,
.container-fluid .row .col-12,
.container-fluid .row .col-12 > div,
.container-fluid .row .col-12 > div > div {
overflow: visible !important;
overflow-x: hidden !important; /* Tylko poziomy overflow ukryty */
overflow-y: visible !important; /* Pionowy overflow widoczny */
height: auto !important;
max-height: none !important;
min-height: auto !important;
padding-bottom: 1rem;
}
.container-fluid .row .mheader {
padding-bottom: 0rem !important;
}
/* Upewnij si臋, 偶e body i html nie ograniczaj膮 */
html,
body {
overflow-x: hidden !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
}
/* Wrapper i content - upewnij si臋, 偶e nie ograniczaj膮 */
.wrapper {
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
}
.content {
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
}
/* Kontener tabeli rate - upewnij si臋, 偶e nie ogranicza szeroko艣ci */
.modern-table-container table#ratesTable,
.modern-table-container table.mobile-table#ratesTable {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
display: block !important;
}
/* Kontener nadrz臋dny - upewnij si臋, 偶e nie ogranicza szeroko艣ci */
.container-fluid .row .col-12 .modern-table-container,
.container-fluid .row .col-12 > div .modern-table-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.mobile-view-font-big {
font-size: 140%;
vertical-align: middle !important;
}
.mobile-view-inline {
display: inline-block !important;
}
.mobile-view-block {
display: block !important;
}
/* Specyficzne style dla patients.jsp na mobile - lepszy uk艂ad */
/* U偶ywamy selektor贸w bazuj膮cych na klasach patient-* aby nie wp艂ywa膰 na inne widoki */
/* PESEL - label i warto艣膰 w jednej linii (td z klas膮 mobile-view-block zawieraj膮cy patient-pesel) */
table.mobile-table#filterTable tbody tr.modern-tr td.mobile-view-block {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
flex-wrap: nowrap !important;
}
table.mobile-table#filterTable tbody tr.modern-tr td.mobile-view-block .mobile-view-title {
display: inline !important;
margin-right: 0.25rem !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
table.mobile-table#filterTable tbody tr.modern-tr td.mobile-view-block .patient-pesel {
display: inline !important;
flex-shrink: 0 !important;
}
/* Adres - pe艂na szeroko艣膰, bez 艂amania (td zawieraj膮cy patient-address) */
/* U偶ywamy selektora bazuj膮cego na tym, 偶e patient-address jest tylko w patients */
table.mobile-table#filterTable tbody tr.modern-tr td .patient-address {
display: block !important;
width: 100% !important;
margin-bottom: 0.5rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Ukryj
w adresie - adres w jednej linii */
table.mobile-table#filterTable tbody tr.modern-tr td .patient-address br {
display: none !important;
}
/* Label dla adresu - nad adresem */
table.mobile-table#filterTable tbody tr.modern-tr td .mobile-view-title + .patient-address {
margin-top: 0.25rem !important;
}
/* Telefon - pod adresem, pe艂na szeroko艣膰 (td zawieraj膮cy patient-phone) */
table.mobile-table#filterTable tbody tr.modern-tr td .patient-phone {
display: inline !important;
}
/* Email - zostaje jak jest (td zawieraj膮cy patient-email) */
table.mobile-table#filterTable tbody tr.modern-tr td .patient-email {
display: inline !important;
}
/* Upewnij si臋, 偶e td z adresem i telefonem s膮 w bloku (pe艂na szeroko艣膰) */
/* W patients: td:nth-child(4)=adres, td:nth-child(5)=telefon, td:nth-child(6)=email */
/* U偶ywamy selektora tylko dla wierszy kt贸re maj膮 patient-address (tylko patients) */
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(4):has(.patient-address),
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(5):has(.patient-phone) {
display: block !important;
width: 100% !important;
margin-bottom: 0.5rem !important;
}
/* Label dla telefonu - obok warto艣ci */
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(5) .mobile-view-title {
display: inline !important;
margin-right: 0.5rem !important;
}
/* Label dla emailu - obok warto艣ci */
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(6) .mobile-view-title {
display: inline !important;
margin-right: 0.5rem !important;
}
/* Specyficzne style dla staff.jsp na mobile - podobny uk艂ad jak patients */
/* W staff: td:nth-child(3)=telefon, td:nth-child(4)=email, td:nth-child(5)=PESEL, td:nth-child(6)=NPWZ, td:nth-child(7)=miejscowo艣膰 */
/* U偶ywamy selektor贸w bazuj膮cych na nth-child TYLKO dla wierszy kt贸re maj膮 staff-pesel (tylko staff) */
/* PESEL - label i warto艣膰 w jednej linii (td:nth-child(5) z staff-pesel) */
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(5):has(.staff-pesel),
table.mobile-table#filterTable tbody tr.modern-tr:has(.staff-pesel) td:nth-child(5) {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
flex-wrap: nowrap !important;
width: 100% !important;
}
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(5) .mobile-view-title {
display: inline !important;
margin-right: 0.25rem !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(5) .staff-pesel {
display: inline !important;
flex-shrink: 0 !important;
}
/* NPWZ - label i warto艣膰 w jednej linii (td:nth-child(6) z staff-npwz) */
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(6):has(.staff-npwz),
table.mobile-table#filterTable tbody tr.modern-tr:has(.staff-npwz) td:nth-child(6) {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
flex-wrap: nowrap !important;
width: 100% !important;
}
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(6) .mobile-view-title {
display: inline !important;
margin-right: 0.25rem !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(6) .staff-npwz {
display: inline !important;
flex-shrink: 0 !important;
}
/* Telefon - pe艂na szeroko艣膰 (td:nth-child(3) z staff-phone) */
table.mobile-table#filterTable tbody tr.modern-tr:has(.staff-phone) td:nth-child(3),
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(3):has(.staff-phone) {
display: block !important;
width: 100% !important;
margin-bottom: 0.5rem !important;
}
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(3) .staff-phone {
display: inline !important;
}
/* Email - pe艂na szeroko艣膰 (td:nth-child(4) z staff-email) */
table.mobile-table#filterTable tbody tr.modern-tr:has(.staff-email) td:nth-child(4),
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(4):has(.staff-email) {
display: block !important;
width: 100% !important;
margin-bottom: 0.5rem !important;
}
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(4) .staff-email {
display: inline !important;
}
/* Miejscowo艣膰 - pe艂na szeroko艣膰, w jednej linii (td:nth-child(7) z staff-city) */
table.mobile-table#filterTable tbody tr.modern-tr:has(.staff-city) td:nth-child(7),
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(7):has(.staff-city) {
display: block !important;
width: 100% !important;
margin-bottom: 0.5rem !important;
}
table.mobile-table#filterTable tbody tr.modern-tr td:nth-child(7) .staff-city {
display: inline !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.modern-td {
padding: 0.5rem 0.2rem !important;
}
/* Rate tables (staffRates, priceRates) - ujednolicony layout na mobile */
table.mobile-table#ratesTable td,
table.mobile-table#ratesTable tbody td,
table.mobile-table#ratesTable tbody tr td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
border: none !important;
padding: 0.75rem 1rem !important;
margin-bottom: 0.5rem !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
float: none !important;
clear: both !important;
}
/* Pierwsza kom贸rka - nazwa us艂ugi/personelu */
table.mobile-table#ratesTable td:first-child {
padding-top: 1rem !important;
border-bottom: 2px solid #e9ecef !important;
margin-bottom: 0.75rem !important;
padding-bottom: 0.75rem !important;
}
/* Druga kom贸rka - warto艣膰 */
table.mobile-table#ratesTable td:nth-child(2)::before {
content: "Warto艣膰:";
display: block;
font-size: 0.75rem;
font-weight: 600;
color: #6c757d;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Trzecia kom贸rka - typ */
table.mobile-table#ratesTable td:nth-child(3)::before {
content: "Typ:";
display: block;
font-size: 0.75rem;
font-weight: 600;
color: #6c757d;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Ostatni wiersz - upewnij si臋, 偶e wszystkie kom贸rki s膮 widoczne */
table.mobile-table#ratesTable tbody tr:last-child,
table.mobile-table#ratesTable tbody tr:last-child.rate-row {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
overflow: visible !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
}
/* Ostatnia kom贸rka w ostatnim wierszu - upewnij si臋, 偶e jest widoczna */
table.mobile-table#ratesTable tbody tr:last-child td,
table.mobile-table#ratesTable tbody tr:last-child.rate-row td {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important;
clip: auto !important;
position: relative !important;
}
table.mobile-table#ratesTable tbody tr:last-child td:last-child,
table.mobile-table#ratesTable tbody tr:last-child.rate-row td:last-child {
padding-bottom: 1rem !important;
margin-bottom: 0 !important;
display: block !important;
}
/* Pola formularzy w tabelach rate */
table.mobile-table#ratesTable .form-control {
width: 100% !important;
margin-top: 0 !important;
font-size: 0.9rem !important;
padding: 0.375rem 0.75rem !important;
box-sizing: border-box !important;
}
/* Select - mniejszy padding, 偶eby placeholder by艂 w pe艂ni widoczny */
table.mobile-table#ratesTable select.form-control,
table.mobile-table#ratesTable select.form-control-sm,
table.mobile-table#ratesTable td select.form-control,
table.mobile-table#ratesTable td select.form-control-sm {
padding: 0.375rem 0.5rem !important;
height: auto !important;
min-height: 2.25rem !important;
line-height: 1.5 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Input - r贸wnie偶 mniejszy padding dla sp贸jno艣ci */
table.mobile-table#ratesTable input.form-control,
table.mobile-table#ratesTable input.form-control-sm,
table.mobile-table#ratesTable td input.form-control,
table.mobile-table#ratesTable td input.form-control-sm {
padding: 0.375rem 0.75rem !important;
height: auto !important;
min-height: 2.25rem !important;
line-height: 1.5 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Kom贸rki z nazw膮 - wi臋kszy font */
table.mobile-table#ratesTable td:first-child .price-name,
table.mobile-table#ratesTable td:first-child .staff-name {
font-size: 1.1rem !important;
font-weight: 600 !important;
display: block !important;
}
/* Avatar w pierwszej kom贸rce */
table.mobile-table#ratesTable td:first-child .price-avatar-small,
table.mobile-table#ratesTable td:first-child .staff-avatar-small {
margin-bottom: 0.5rem !important;
}
/* Layout dla price-name-cell i staff-name-cell na mobile */
table.mobile-table#ratesTable td:first-child .price-name-cell,
table.mobile-table#ratesTable td:first-child .staff-name-cell {
flex-direction: column !important;
align-items: flex-start !important;
}
/* Usu艅 marginesy z price-info-cell i staff-info-cell */
table.mobile-table#ratesTable td:first-child .price-info-cell,
table.mobile-table#ratesTable td:first-child .staff-info-cell {
width: 100% !important;
margin-left: 0 !important;
}
/* AGRESYWNE STYLE - najwy偶szy priorytet dla tabel rate na mobile */
/* Najpierw ustaw szeroko艣膰 dla wszystkich element贸w nadrz臋dnych */
.container-fluid .row .col-12 > div:has(table#ratesTable),
.container-fluid .row .col-12 > div:has(.modern-table-container),
.container-fluid .row .col-12 > div > div:has(table#ratesTable),
.container-fluid .row .col-12 > div > div:has(.modern-table-container) {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
padding-bottom: 3rem !important;
margin: 0 !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
min-height: auto !important;
}
.modern-table-container {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
.modern-table-container table#ratesTable,
.modern-table-container table.mobile-table#ratesTable {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
display: block !important;
table-layout: auto !important;
}
.modern-table-container table#ratesTable tbody,
.modern-table-container table.mobile-table#ratesTable tbody {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.modern-table-container table#ratesTable tbody tr.rate-row,
.modern-table-container table.mobile-table#ratesTable tbody tr.rate-row {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 auto 16px auto !important;
display: block !important;
box-sizing: border-box !important;
}
.modern-table-container table#ratesTable tbody tr.rate-row:last-child {
margin-bottom: 0 !important;
}
.modern-table-container table#ratesTable tbody tr.rate-row td,
.modern-table-container table.mobile-table#ratesTable tbody tr.rate-row td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0.75rem 1rem !important;
box-sizing: border-box !important;
}
.modern-table-container table#ratesTable tbody tr.rate-row:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
overflow: visible !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
display: block !important;
}
.modern-table-container table#ratesTable tbody tr.rate-row:last-child td {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
clip: auto !important;
position: relative !important;
}
.modern-table-container table#ratesTable tbody tr.rate-row:last-child td:last-child {
padding-bottom: 2rem !important;
margin-bottom: 2rem !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
position: relative !important;
z-index: 1 !important;
clip: auto !important;
clip-path: none !important;
}
/* Upewnij si臋, 偶e select w ostatniej kom贸rce jest widoczny */
.modern-table-container table#ratesTable tbody tr.rate-row:last-child td:last-child select {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: 2.25rem !important;
max-height: none !important;
overflow: visible !important;
position: relative !important;
z-index: 2 !important;
}
/* Upewnij si臋, 偶e wszystkie wiersze s膮 widoczne */
.modern-table-container table#ratesTable tbody tr.rate-row {
position: relative !important;
z-index: 1 !important;
}
.modern-table-container table#ratesTable tbody tr.rate-row:last-child {
position: relative !important;
z-index: 2 !important;
margin-bottom: 3rem !important;
padding-bottom: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
clip: auto !important;
clip-path: none !important;
}
/* Dodatkowy padding na ko艅cu tbody */
.modern-table-container table#ratesTable tbody::after {
content: '';
display: block;
height: 3rem;
width: 100%;
clear: both;
}
.modern-table-container table#ratesTable tbody tr.rate-row td select,
.modern-table-container table#ratesTable tbody tr.rate-row td input {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.modern-table-container table#ratesTable tbody tr.rate-row td select {
padding: 0.375rem 0.5rem !important;
min-height: 2.25rem !important;
line-height: 1.5 !important;
}
}
/* User Staff Assignment Styles */
.staff-assignment-info {
margin-bottom: 8px;
}
.staff-assignment-info .badge {
font-size: 0.75rem;
padding: 4px 8px;
}
.staff-assignment-badge {
background-color: #17a2b8;
color: white;
font-size: 0.75rem;
padding: 4px 8px;
border-radius: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.staff-assignment-badge i {
font-size: 0.7rem;
}
/* User Staff Assignment Form Styles */
.modern-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.modern-card-header {
padding: 20px 25px;
border-bottom: 1px solid #e9ecef;
font-weight: 600;
font-size: 1.1rem;
border-radius: 12px 12px 0 0;
}
.modern-card-body {
padding: 25px;
}
.info-item {
margin-bottom: 15px;
}
.info-label {
font-weight: 600;
color: #6c757d;
display: block;
margin-bottom: 5px;
font-size: 0.9rem;
}
.info-value {
color: #212529;
font-size: 1rem;
}
.modern-select, .modern-textarea {
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 12px 15px;
transition: all 0.3s ease;
}
.modern-select:focus, .modern-textarea:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}
/* Ograniczenie wysoko艣ci listy rozwijanej */
.modern-select {
max-height: 200px;
overflow-y: auto;
}
/* Style dla opcji w select */
.modern-select option {
padding: 8px 12px;
font-size: 0.9rem;
}
/* Responsywne style dla select */
@media (max-width: 767.98px) {
.modern-select {
max-height: 150px;
font-size: 0.9rem;
}
.modern-select option {
padding: 6px 10px;
font-size: 0.85rem;
}
}
.form-actions {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
}
/* User Staff History Styles */
.staff-info {
display: flex;
flex-direction: column;
}
.staff-name {
font-weight: 600;
}
.staff-details {
margin-top: 2px;
}
.date-info {
font-weight: 500;
}
.assigned-by {
color: #495057;
}
.notes-text {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.relation-inactive {
background-color: #f8f9fa;
opacity: 0.7;
}
.schedule-active {
background-color: #e8faec;
}
.schedule-inactive {
background-color: #f1f1f1;
}
.cube-state1 {
background-color: #a3e4d7;
min-height: 3rem;
}
.cube-state0 {
background-color: #fae5d3;
min-height: 3rem;
}
.cube-selected {
background-color: #d7bde2 !important;
}
.cube {
background-color: #ebf5fb;
}
.cube-name {
font-size: 1.2rem;
color: #212529;
}
.cube-info {
font-size: 0.9rem;
color: #6c757d;
}
/* ========================================
PRICE LIST STYLES
======================================== */
/* Stat Cards */
.stat-card {
transition: transform 0.3s ease;
border: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-card i {
opacity: 0.9;
}
/* Font Size Utilities */
.font-size-lg {
font-size: 1.1rem;
}
/* Detail Items */
.detail-item {
margin-bottom: 1.5rem;
}
.detail-label {
font-weight: 600;
color: #495057;
margin-bottom: 0.5rem;
display: block;
}
.detail-value {
color: #2c3e50;
}
/* Activity Items */
.activity-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.activity-color {
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 1rem;
}
.activity-info {
flex: 1;
}
.activity-label {
font-weight: 600;
color: #495057;
}
.activity-value {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
}
/* Percentage Items */
.percentage-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.percentage-label {
width: 120px;
font-weight: 600;
color: #495057;
}
.percentage-bar {
flex: 1;
height: 8px;
background-color: #e9ecef;
border-radius: 4px;
margin: 0 1rem;
overflow: hidden;
}
.percentage-fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
}
.percentage-value {
width: 50px;
text-align: right;
font-weight: 600;
color: #495057;
}
/* Summary Items */
.summary-item {
margin-bottom: 0.75rem;
font-size: 1rem;
}
/* Stat Numbers */
.stat-number {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.stat-label {
color: #6c757d;
font-size: 0.875rem;
}
/* Form Labels */
.form-label {
font-weight: 600;
color: #495057;
}
/* Custom Switch Styles */
.custom-switch .custom-control-label::before {
background-color: #dc3545;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
background-color: #28a745;
}
/* Legacy Alert Styles - Merged with new styles above */
/* Grid Layout */
.d-grid {
display: grid;
}
.gap-2 {
gap: 0.5rem;
}
/* Button Group Styles */
.btn-group .btn {
margin-right: 2px;
}
.btn-group .btn:last-child {
margin-right: 0;
}
/* Table Styles */
.table th {
border-top: none;
font-weight: 600;
color: #fff;
}
.table-bordered thead td, .table-bordered thead th {
color: #000;
}
.table td {
vertical-align: middle;
}
/* Progress Bar */
.progress {
background-color: #e9ecef;
}
/* Responsive Design for Price Lists */
@media (max-width: 768px) {
.activity-color {
width: 16px;
height: 16px;
margin-right: 0.75rem;
}
.activity-value {
font-size: 1.25rem;
}
.percentage-label {
width: 100px;
font-size: 0.875rem;
}
.percentage-value {
width: 40px;
font-size: 0.875rem;
}
.stat-number {
font-size: 1.5rem;
}
.detail-item {
margin-bottom: 1rem;
}
.summary-item {
font-size: 0.9rem;
}
}
@media (max-width: 575.98px) {
.percentage-item {
flex-direction: column;
align-items: flex-start;
}
.percentage-label {
width: 100%;
margin-bottom: 0.5rem;
}
.percentage-bar {
width: 100%;
margin: 0 0 0.5rem 0;
}
.percentage-value {
width: 100%;
text-align: left;
}
.activity-item {
flex-direction: column;
align-items: flex-start;
}
.activity-color {
margin-bottom: 0.5rem;
}
}
/* ========================================
PRICE TABLE STYLES
======================================== */
/* Price Name Cell */
.price-name-cell {
display: flex;
align-items: center;
}
/* Staff rates table alignment fixes */
#ratesTable .rate-value-cell {
display: flex;
align-items: center;
gap: 0.5rem;
}
#ratesTable .rate-value-cell .rate-active {
position: static;
margin: 0;
flex: 0 0 auto;
}
#ratesTable .rate-value-cell .rate-value-input {
flex: 1 1 auto;
min-width: 0;
}
@media (max-width: 767.98px) {
table.mobile-table#ratesTable td:first-child .price-name-cell,
table.mobile-table#ratesTable td:first-child .staff-name-cell {
flex-direction: row !important;
align-items: center !important;
}
table.mobile-table#ratesTable td:first-child .price-avatar-small,
table.mobile-table#ratesTable td:first-child .staff-avatar-small {
margin-bottom: 0 !important;
margin-right: 0.5rem !important;
}
table.mobile-table#ratesTable .rate-value-cell {
display: grid !important;
grid-template-columns: 24px minmax(0, 1fr) !important;
align-items: center !important;
gap: 0.5rem !important;
width: 100% !important;
max-width: 100% !important;
padding-right: 0 !important;
overflow: visible !important;
}
table.mobile-table#ratesTable tbody tr.rate-row td:nth-child(2) {
text-align: left !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
table.mobile-table#ratesTable .rate-value-cell .rate-active {
position: static !important;
margin: 0 !important;
justify-self: start !important;
}
table.mobile-table#ratesTable .rate-value-cell .rate-value-input {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
}
/* ========================================
MOBILE HEADER - BETTER TAP TARGETS
======================================== */
@media (max-width: 767.98px) {
header .col-8.col-md-3 {
gap: 0.35rem !important;
}
header .col-8.col-md-3 .dropdown {
margin-right: 0 !important;
}
header #languageDropdown,
header #userDropdown {
min-height: 40px !important;
min-width: 40px !important;
padding: 0.35rem 0.55rem !important;
font-size: 0.95rem !important;
line-height: 1 !important;
border-radius: 0.4rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
header #languageDropdown i,
header #userDropdown i {
font-size: 1.05rem !important;
margin-right: 0.2rem !important;
}
header .notification-icon {
width: 40px !important;
height: 40px !important;
margin-left: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(255, 255, 255, 0.7) !important;
border-radius: 0.4rem !important;
}
header .notification-icon i {
font-size: 1.05rem !important;
}
header .notification-icon .badge {
top: -6px !important;
right: -6px !important;
}
}
.price-avatar-small {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
margin-right: 1rem;
}
.price-info-cell {
flex: 1;
}
.price-name {
font-weight: 600;
color: #495057;
display: block;
margin-bottom: 0.25rem;
}
/* Price Value */
.price-value {
font-weight: 600;
color: #28a745;
font-size: 1.1rem;
}
/* Price Description */
.price-description {
color: #6c757d;
font-size: 0.9rem;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
/* Price Date */
.price-date {
color: #6c757d;
font-size: 0.875rem;
}
/* Price Disabled State */
.price-disabled {
background-color: #f8f9fa;
opacity: 0.7;
}
.price-disabled .price-name {
color: #6c757d;
}
.price-disabled .price-value {
color: #6c757d;
}
/* Responsive Design for Price Tables */
@media (max-width: 768px) {
.price-avatar-small {
width: 35px;
height: 35px;
font-size: 1rem;
margin-right: 0.75rem;
}
.price-name {
font-size: 0.9rem;
}
.price-value {
font-size: 1rem;
}
.price-description {
font-size: 0.8rem;
max-width: 150px;
}
.price-date {
font-size: 0.8rem;
}
}
@media (max-width: 575.98px) {
.price-avatar-small {
width: 30px;
height: 30px;
font-size: 0.9rem;
margin-right: 0.5rem;
}
.price-name {
font-size: 0.85rem;
}
.price-value {
font-size: 0.9rem;
}
.price-description {
font-size: 0.75rem;
max-width: 120px;
}
.price-date {
font-size: 0.75rem;
color: #6c757d;
}
}
/* Activity Table Styles */
.activity-stats {
display: flex;
align-items: center;
}
.activity-date-cell {
display: flex;
flex-direction: column;
}
.activity-date-main {
display: flex;
align-items: center;
font-weight: 500;
}
.activity-date {
color: #495057;
}
.activity-date-secondary {
margin-top: 0.25rem;
}
.activity-type-badge {
font-size: 0.75rem;
padding: 0.375rem 0.75rem;
border-radius: 20px;
white-space: normal;
word-wrap: break-word;
word-break: break-word;
display: inline-block;
max-width: 100%;
line-height: 1.4;
}
.activity-description-cell {
display: flex;
flex-direction: column;
}
.activity-description-main {
font-weight: 500;
color: #495057;
}
.activity-description-secondary {
margin-top: 0.25rem;
}
.activity-user-cell {
display: flex;
align-items: center;
}
.activity-user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.875rem;
margin-right: 0.75rem;
}
.activity-user-info {
display: flex;
flex-direction: column;
}
.activity-user-name {
font-weight: 500;
color: #495057;
}
.activity-user-details {
font-size: 0.875rem;
}
.activity-ip {
background: #f8f9fa;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.875rem;
color: #6c757d;
border: 1px solid #e9ecef;
}
/* Mobile responsive for activity table */
@media (max-width: 767.98px) {
.activity-date-cell {
margin-bottom: 0.5rem;
}
.activity-date-main {
font-size: 0.875rem;
}
.activity-date-secondary {
margin-top: 0.125rem;
}
.activity-type-badge {
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
}
.activity-description-main {
font-size: 0.875rem;
}
.activity-description-secondary {
font-size: 0.75rem;
}
.activity-user-avatar {
width: 28px;
height: 28px;
font-size: 0.75rem;
margin-right: 0.5rem;
}
.activity-user-name {
font-size: 0.875rem;
}
.activity-user-details {
font-size: 0.75rem;
}
.activity-ip {
font-size: 0.75rem;
padding: 0.125rem 0.375rem;
}
}
@media (max-width: 575.98px) {
.activity-user-cell {
flex-direction: column;
align-items: flex-start;
}
.activity-user-avatar {
margin-bottom: 0.25rem;
margin-right: 0;
}
.activity-ip {
word-break: break-all;
}
}
/* Parametry - nowe klasy */
.param-stats {
display: flex;
align-items: center;
}
.param-name-cell {
display: flex;
align-items: center;
gap: 12px;
}
.param-avatar-small {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
flex-shrink: 0;
}
.param-info-cell {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.param-name {
font-weight: 600;
color: #2c3e50;
font-size: 14px;
line-height: 1.3;
}
.param-description {
font-size: 12px;
color: #6c757d;
line-height: 1.2;
}
.param-value-cell {
display: flex;
flex-direction: column;
gap: 4px;
}
.param-value-main {
display: flex;
align-items: center;
gap: 8px;
}
.param-value {
font-weight: 500;
color: #2c3e50;
font-size: 14px;
}
.param-value-secondary {
font-size: 12px;
color: #6c757d;
}
.param-category-cell {
display: flex;
flex-direction: column;
gap: 4px;
}
.param-category-secondary {
font-size: 12px;
color: #6c757d;
}
.param-date-cell {
display: flex;
flex-direction: column;
gap: 4px;
}
.param-date-main {
display: flex;
align-items: center;
gap: 6px;
}
.param-date {
font-size: 13px;
color: #6c757d;
font-weight: 500;
}
.param-disabled {
opacity: 0.6;
background-color: #f8f9fa;
}
.param-disabled .param-name {
color: #6c757d;
}
.param-disabled .param-value {
color: #6c757d;
}
/* Responsywno艣膰 dla parametr贸w */
@media (max-width: 767.98px) {
.param-avatar-small {
width: 32px;
height: 32px;
font-size: 14px;
}
.param-name {
font-size: 13px;
}
.param-description {
font-size: 11px;
}
.param-value {
font-size: 13px;
}
.param-value-secondary {
font-size: 11px;
}
.param-date {
font-size: 12px;
}
}
@media (max-width: 575.98px) {
.param-avatar-small {
width: 28px;
height: 28px;
font-size: 12px;
}
.param-name {
font-size: 12px;
}
.param-description {
font-size: 10px;
}
.param-value {
font-size: 12px;
}
.param-value-secondary {
font-size: 10px;
}
.param-date {
font-size: 11px;
}
}
/* ========================================
REGISTRATION STYLES
======================================== */
/* Modern Schedule Styles */
.modern-schedule-container {
margin-top: 1rem;
}
.schedule-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}
.schedule-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
transition: all 0.3s ease;
overflow: hidden;
}
.schedule-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.card-selected {
background-color: #ffea00;
}
.staff-header {
display: flex;
align-items: center;
padding: 1rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.staff-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
font-size: 1.5rem;
}
.schedule-planned {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
border: 1px solid #28a745;
}
.staff-info {
flex: 1;
}
.staff-info > .staff-name {
font-weight: 600;
margin: 0;
color: #fff;
}
.staff-location {
color: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
}
.time-slots {
padding: 1rem;
display: grid;
gap: 0.75rem;
}
.time-slot {
border-radius: 8px;
padding: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.time-slot.available {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-color: #28a745;
}
.time-slot.available:hover {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
transform: scale(1.02);
}
.time-slot.available.selected {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
transform: scale(1.02);
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}
.time-slot.unavailable {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
border-color: #dc3545;
opacity: 0.7;
cursor: not-allowed;
}
.slot-content {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.slot-icon {
font-size: 1.1rem;
margin-right: 0.5rem;
}
.slot-time {
flex: 1;
font-weight: 500;
}
.slot-status {
font-size: 1.2rem;
}
/* Loading Animation */
#loadingIndicator {
padding: 2rem;
}
.spinner-border {
width: 3rem;
height: 3rem;
}
/* Animation for notifications - Merged with new alert styles above */
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Modern card hover effects */
.modern-card {
position: relative;
overflow: hidden;
}
.modern-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.modern-card:hover::before {
left: 100%;
}
/* Patient Search Styles */
#patientSearch {
border-radius: 8px;
border: 2px solid #e9ecef;
transition: all 0.3s ease;
}
/* Dropdown visibility fixes */
#patientDropdown.show {
display: block !important;
}
#patientDropdown {
z-index: 2000 !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
}
/* Ensure icons are visible */
.input-group-text i {
color: #6c757d !important;
font-size: 1rem !important;
}
#patientSearch:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
#patientDropdown {
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
}
.patient-option {
padding: 0.75rem 1rem;
border-bottom: 1px solid #f8f9fa;
transition: background-color 0.2s ease;
}
.patient-option:hover {
background-color: #f8f9fa;
text-decoration: none;
}
.patient-option:last-child {
border-bottom: none;
}
.patient-option-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
}
.patient-option-name {
font-weight: 600;
color: #495057;
margin-bottom: 0.25rem;
}
.patient-option-contact {
font-size: 0.875rem;
}
.selected-patient-card {
display: flex;
align-items: center;
padding: 1rem;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 8px;
border: 2px solid #28a745;
}
.patient-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin-right: 1rem;
}
.patient-details {
flex: 1;
}
.patient-name {
font-weight: 600;
color: #495057;
margin: 0;
}
.patient-contact {
font-size: 0.875rem;
}
.patient-contact > div {
display: block;
margin-bottom: 0.25rem;
}
.patient-contact > div:last-child {
margin-bottom: 0;
}
.text-purple {
color: #7b1fa2 !important;
}
.patient-name i {
font-size: 0.9rem;
opacity: 0.8;
}
.patient-name i:hover {
opacity: 1;
transform: scale(1.1);
transition: all 0.2s ease;
}
/* Tooltip dla ikon p艂ci */
.patient-name i[title] {
cursor: help;
}
#clearPatientSelection {
border-radius: 50%;
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Loading animation for search */
#searchLoading {
padding: 0.5rem;
}
.spinner-border-sm {
width: 1rem;
height: 1rem;
}
/* Service Search Styles */
#serviceSearch {
border-radius: 8px;
border: 2px solid #e9ecef;
transition: all 0.3s ease;
}
#serviceSearch:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
#serviceDropdown {
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
}
.service-option {
padding: 0.75rem 1rem;
border-bottom: 1px solid #f8f9fa;
transition: background-color 0.2s ease;
}
.service-option:hover {
background-color: #f8f9fa;
text-decoration: none;
}
.service-option:last-child {
border-bottom: none;
}
.service-option-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
min-width: 40px;
}
.service-option-name {
font-weight: 600;
color: #495057;
margin-bottom: 0.25rem;
}
.service-option-price {
font-size: 0.875rem;
}
.selected-service-card {
display: flex;
align-items: center;
padding: 1rem;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 8px;
border: 2px solid #ff6b6b;
}
.service-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin-right: 1rem;
}
.service-details {
flex: 1;
}
.service-name {
font-weight: 600;
color: #495057;
margin: 0;
}
.service-price {
font-size: 0.875rem;
}
#clearServiceSelection {
border-radius: 50%;
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Loading animation for service search */
#serviceSearchLoading {
padding: 0.5rem;
}
/* Responsive adjustments for registration */
@media (max-width: 768px) {
.schedule-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.staff-header {
padding: 0.75rem;
}
.staff-avatar {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.time-slots {
padding: 0.75rem;
}
.patient-option-avatar {
width: 35px;
height: 35px;
font-size: 1rem;
}
.patient-avatar {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.selected-patient-card {
padding: 0.75rem;
}
.service-option-avatar {
width: 35px;
height: 35px;
font-size: 1rem;
min-width: 35px;
}
.service-avatar {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.selected-service-card {
padding: 0.75rem;
}
}
/* Sticky sidebar for desktop registration */
.registration-sidebar {
position: sticky;
top: 20px;
z-index: 100;
}
/* Mobile registration styles */
@media (max-width: 767.98px) {
.registration-sidebar {
position: static;
top: auto;
}
}
/* Patient Header Menu - Quick Action Style */
.header-quick-actions {
display: flex;
flex-wrap: nowrap;
gap: 0.75rem;
align-items: stretch;
justify-content: space-between;
width: 100%;
height: 100%;
}
.header-quick-action-btn {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
text-decoration: none;
color: #fff;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
flex: 1;
min-height: 60px;
height: 100%;
}
.header-quick-action-btn:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.header-quick-action-btn .d-flex {
width: 100%;
height: 100%;
}
.header-quick-action-btn strong {
font-size: 0.85rem;
display: block;
line-height: 1.2;
margin-bottom: 0.1rem;
}
.header-quick-action-btn small {
font-size: 0.7rem;
opacity: 0.8;
line-height: 1.1;
}
.header-quick-action-btn .text-muted {
color:#fff !important;
}
.header-quick-action-btn i {
font-size: 1.3rem;
flex-shrink: 0;
}
/* Mobile menu styling for patient header */
.mobile-quick-actions {
padding: 1rem;
}
.mobile-quick-action-btn {
display: block;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
text-decoration: none;
color: #fff;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 0.75rem;
}
.mobile-quick-action-btn:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
text-decoration: none;
transform: translateX(5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.mobile-quick-action-btn strong {
font-size: 1rem;
display: block;
line-height: 1.3;
}
.mobile-quick-action-btn small {
font-size: 0.85rem;
opacity: 0.8;
}
.mobile-quick-action-btn i {
font-size: 1.5rem;
}
/* Header layout optimization */
header .container-fluid .row {
align-items: stretch;
}
header .container-fluid .row > div {
display: flex;
align-items: center;
}
/* Desktop menu container - maximize space usage */
.desktop-menu-container {
flex: 1;
padding: 0 1rem;
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
.header-quick-actions {
display: none;
}
.desktop-menu-container {
display: none;
}
}
@media (max-width: 767.98px) {
.mobile-quick-action-btn {
padding: 0.75rem;
}
.mobile-quick-action-btn strong {
font-size: 0.9rem;
}
.mobile-quick-action-btn small {
font-size: 0.8rem;
}
.mobile-quick-action-btn i {
font-size: 1.3rem;
}
}
/* Patient Dashboard Quick Actions */
.quick-action-btn {
display: block;
padding: 1rem;
background: #f8f9fa;
border-radius: 10px;
text-decoration: none;
color: #495057;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.quick-action-btn:hover {
background: #e9ecef;
color: #495057;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.quick-action-btn i {
font-size: 1.5rem;
}
@media (max-width: 767.98px) {
/* Wyj膮tek dla widok贸w rates - przycisk zapisz musi by膰 widoczny */
.modern-header .modern-actions {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
width: 100% !important;
margin-top: 1rem !important;
}
.modern-header .modern-actions .btn-modern {
width: 100% !important;
}
/* Layout modern-header na mobile - kolumna */
.modern-header .d-flex {
flex-direction: column !important;
align-items: flex-start !important;
}
.modern-header .d-flex > div:first-child {
width: 100% !important;
margin-bottom: 0.5rem !important;
}
.quick-action-btn {
margin-bottom: 1rem;
}
}
/* Dashboard Styles from home.jsp */
/* Welcome Section */
.welcome-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
padding: 2rem;
color: white;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.welcome-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.welcome-subtitle {
font-size: 1rem;
opacity: 0.9;
}
/* Dashboard Title */
.dashboard-title {
font-size: 1.5rem;
font-weight: 600;
color: #495057;
border-bottom: 2px solid #e9ecef;
padding-bottom: 0.5rem;
}
/* Statistics Cards - Enhanced */
.stat-card {
background: white;
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.stat-card-body {
display: flex;
align-items: center;
}
.stat-card-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
font-size: 1.5rem;
color: white;
}
.stat-card-primary .stat-card-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.stat-card-success .stat-card-icon {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.stat-card-info .stat-card-icon {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.stat-card-content {
flex: 1;
}
.stat-card-number {
font-size: 2rem;
font-weight: 700;
margin: 0;
color: #495057;
}
.stat-card-label {
font-size: 0.9rem;
color: #6c757d;
margin: 0.25rem 0;
}
.stat-card-trend {
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.stat-card-trend-up {
color: #28a745;
}
.stat-card-trend-down {
color: #dc3545;
}
/* Dashboard Cards */
.dashboard-card {
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
height: 100%;
}
.dashboard-card-header {
padding: 1.5rem 1.5rem 1rem;
border-bottom: 1px solid #e9ecef;
}
.dashboard-card-title {
font-size: 1.2rem;
font-weight: 600;
color: #495057;
margin: 0;
}
.dashboard-card-body {
padding: 1.5rem;
}
/* Upcoming Appointments */
.appointment-item {
display: flex;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid #f8f9fa;
}
.appointment-item:last-child {
border-bottom: none;
}
.appointment-time {
text-align: center;
margin-right: 1rem;
min-width: 80px;
}
.appointment-time .time {
display: block;
font-size: 1.1rem;
font-weight: 600;
color: #495057;
}
.appointment-time .date {
display: block;
font-size: 0.8rem;
color: #6c757d;
}
.appointment-details {
flex: 1;
}
.appointment-type {
font-size: 0.9rem;
color: #6c757d;
margin: 0;
}
.appointment-status {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
padding: 0.25rem 0.75rem;
border-radius: 20px;
}
.status-confirmed {
background: #d4edda;
color: #155724;
}
.status-pending {
background: #fff3cd;
color: #856404;
}
/* Quick Actions */
.quick-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* Activity Timeline */
.activity-timeline {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.activity-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
flex-shrink: 0;
}
.activity-icon-success {
background: #28a745;
}
.activity-icon-info {
background: #17a2b8;
}
.activity-icon-warning {
background: #ffc107;
}
.activity-content {
flex: 1;
margin-left: 1rem;
}
.activity-title {
font-size: 1rem;
font-weight: 600;
color: #495057;
margin: 0 0 0.25rem 0;
}
.activity-description {
font-size: 0.9rem;
color: #6c757d;
margin: 0 0 0.25rem 0;
}
.activity-time {
font-size: 0.8rem;
color: #adb5bd;
}
/* Responsive Design for Dashboard */
@media (max-width: 767.98px) {
.welcome-title {
font-size: 1.5rem;
}
.stat-card-number {
font-size: 1.5rem;
}
.stat-card-body {
flex-direction: column;
text-align: center;
}
.stat-card-icon {
margin-right: 0;
margin-bottom: 1rem;
}
.appointment-item {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.appointment-time {
margin-right: 0;
text-align: left;
}
.activity-item {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.activity-icon {
align-self: flex-start;
}
}
@media (max-width: 767.98px) {
/* Wyj膮tek dla widok贸w rates - przycisk zapisz musi by膰 widoczny */
.modern-header .modern-actions {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
width: 100% !important;
margin-top: 1rem !important;
}
.modern-header .modern-actions .btn-modern {
width: 100% !important;
}
/* Layout modern-header na mobile - kolumna */
.modern-header .d-flex {
flex-direction: column !important;
align-items: flex-start !important;
}
.modern-header .d-flex > div:first-child {
width: 100% !important;
margin-bottom: 0.5rem !important;
}
.quick-action-btn {
margin-bottom: 1rem;
}
}
/* Style dla listy rezerwacji */
.reservation-list-container {
max-height: 400px;
overflow-y: auto;
padding: 0;
}
.reservation-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
margin-bottom: 8px;
border-radius: 8px;
background: #fff;
border: 1px solid #e9ecef;
transition: all 0.2s ease;
cursor: pointer;
}
.reservation-item:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transform: translateY(-1px);
}
.reservation-item.draggable {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-color: #007bff;
}
.reservation-item.draggable:hover {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-color: #0056b3;
}
.reservation-item.empty-slot {
background: #f8f9fa;
border-color: #dee2e6;
opacity: 0.7;
}
.reservation-item.empty-slot:hover {
background: #e9ecef;
opacity: 1;
}
.reservation-item.selected-slot {
background: #ffea00 !important;
}
.reservation-content {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.reservation-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
}
.reservation-item.empty-slot .reservation-icon {
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}
.reservation-details {
flex: 1;
min-width: 0;
}
.reservation-time {
font-weight: 600;
color: #495057;
font-size: 14px;
margin-bottom: 2px;
}
.reservation-patient {
color: #6c757d;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.reservation-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.cancel-reservation-btn {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 12px;
}
.cancel-reservation-btn:hover {
background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
transform: scale(1.1);
}
.cancel-reservation-btn:active {
transform: scale(0.95);
}
.close-reservation-btn {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #8a8787 0%, #777475 100%);
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 12px;
}
.close-reservation-btn:hover {
background: linear-gradient(135deg, #777475 0%, #636262 100%);
transform: scale(1.1);
}
.plan-btn {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 12px;
}
.plan-btn:hover {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
transform: scale(1.1);
}
.reservation-daypart-separator {
margin: 16px 0 8px 0;
padding: 8px 16px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 6px;
font-weight: 600;
color: #495057;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-left: 3px solid #007bff;
}
.reservation-empty-state {
text-align: center;
padding: 32px 16px;
color: #6c757d;
}
.reservation-empty-state i {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.reservation-empty-state h6 {
margin-bottom: 8px;
color: #495057;
}
.reservation-empty-state p {
font-size: 14px;
margin: 0;
}
/* Responsywno艣膰 dla listy rezerwacji */
@media (max-width: 768px) {
.reservation-item {
padding: 10px 12px;
margin-bottom: 6px;
}
.reservation-icon {
width: 28px;
height: 28px;
margin-right: 10px;
font-size: 12px;
}
.reservation-time {
font-size: 13px;
}
.reservation-patient {
font-size: 12px;
}
.cancel-reservation-btn {
width: 24px;
height: 24px;
font-size: 10px;
}
.reservation-daypart-separator {
margin: 12px 0 6px 0;
padding: 6px 12px;
font-size: 11px;
}
}
@media (max-width: 575.98px) {
.reservation-item {
padding: 8px 10px;
margin-bottom: 4px;
}
.reservation-icon {
width: 24px;
height: 24px;
margin-right: 8px;
font-size: 10px;
}
.reservation-time {
font-size: 12px;
}
.reservation-patient {
font-size: 11px;
}
.cancel-reservation-btn {
width: 20px;
height: 20px;
font-size: 8px;
}
}
/* Style dla strony homeNoAuth.jsp */
.auth-required-card {
border: none;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
border-radius: 16px;
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
transition: all 0.3s ease;
}
.auth-required-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.auth-required-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-size: 32px;
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}
.auth-required-title {
color: #2c3e50;
font-weight: 700;
font-size: 2.2rem;
margin-bottom: 1rem;
}
.auth-required-description {
color: #6c757d;
font-size: 1.1rem;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.auth-features {
margin: 2rem 0;
}
.feature-item {
text-align: center;
padding: 1.5rem;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: all 0.3s ease;
height: 100%;
}
.feature-item:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.feature-item i {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
}
.feature-item h6 {
color: #2c3e50;
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.feature-item small {
color: #6c757d;
font-size: 0.9rem;
line-height: 1.4;
}
.auth-actions {
margin: 2rem 0;
}
.auth-actions .btn {
padding: 12px 30px;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.auth-actions .btn-primary {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border: none;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}
.auth-actions .btn-primary:hover {
background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}
.auth-actions .btn-outline-secondary {
border: 2px solid #6c757d;
color: #6c757d;
background: transparent;
}
.auth-actions .btn-outline-secondary:hover {
background: #6c757d;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}
.auth-help {
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #007bff;
}
.info-section {
margin-top: 3rem;
}
.info-card {
text-align: center;
padding: 2rem;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 15px rgba(0,0,0,0.08);
transition: all 0.3s ease;
height: 100%;
border: 1px solid #e9ecef;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.info-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 24px;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}
.info-card:nth-child(2) .info-icon {
background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}
.info-card:nth-child(3) .info-icon {
background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}
.info-card h5 {
color: #2c3e50;
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.3rem;
}
.info-card p {
color: #6c757d;
line-height: 1.6;
margin: 0;
font-size: 0.95rem;
}
.font-plus {
font-size: 1.2rem !important;
}
.star-icon {
color: black; /* kolor gwiazdki (ikonki) */
background-color: #ffea00; /* 偶贸艂te t艂o */
border: 1px solid black; /* czarna ramka */
border-radius: 50%; /* zaokr膮glenie (np. ko艂o) */
padding: 6px; /* odst臋p, 偶eby t艂o by艂o widoczne */
font-size: 14px; /* mo偶esz dostosowa膰 rozmiar */
}
/* Responsywno艣膰 dla homeNoAuth */
@media (max-width: 768px) {
.auth-required-title {
font-size: 1.8rem;
}
.auth-required-description {
font-size: 1rem;
}
.auth-required-icon {
width: 60px;
height: 60px;
font-size: 24px;
}
.feature-item {
padding: 1rem;
margin-bottom: 1rem;
}
.feature-item i {
font-size: 2rem;
}
.auth-actions .btn {
padding: 10px 20px;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.info-card {
padding: 1.5rem;
margin-bottom: 1rem;
}
.info-icon {
width: 50px;
height: 50px;
font-size: 20px;
}
}
@media (max-width: 575.98px) {
.auth-required-card .card-body {
padding: 2rem 1.5rem;
}
.auth-required-title {
font-size: 1.5rem;
}
.auth-required-description {
font-size: 0.95rem;
}
.feature-item h6 {
font-size: 1rem;
}
.feature-item small {
font-size: 0.85rem;
}
.auth-actions .btn {
width: 100%;
margin-bottom: 0.75rem;
}
.info-card {
padding: 1rem;
}
.info-card h5 {
font-size: 1.1rem;
}
.info-card p {
font-size: 0.9rem;
}
}
/* ========================================
AUTOPAY STYLES
======================================== */
/* Autopay Cards */
.autopay-success-card,
.autopay-error-card,
.autopay-status-card,
.autopay-redirect-card {
border: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 12px;
overflow: hidden;
}
.autopay-success-card {
border-left: 4px solid #28a745;
border-right: 4px solid #28a745;
}
.autopay-error-card {
border-left: 4px solid #dc3545;
border-right: 4px solid #dc3545;
}
.autopay-status-card {
border-left: 4px solid #17a2b8;
border-right: 4px solid #17a2b8;
}
.autopay-redirect-card {
border-left: 4px solid #ffc107;
border-right: 4px solid #ffc107;
}
/* Autopay Headers */
.autopay-success-header {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
border: none;
padding: 1.5rem;
}
.autopay-error-header {
background: linear-gradient(135deg, #dc3545, #e74c3c);
color: white;
border: none;
padding: 1.5rem;
}
.autopay-status-header {
background: linear-gradient(135deg, #17a2b8, #6f42c1);
color: white;
border: none;
padding: 1.5rem;
}
.autopay-redirect-header {
background: linear-gradient(135deg, #ffc107, #fd7e14);
color: white;
border: none;
padding: 1.5rem;
}
/* Autopay Icons */
.autopay-success-icon {
font-size: 2.5rem;
margin-right: 1rem;
color: #fff;
}
.autopay-error-icon {
font-size: 2.5rem;
margin-right: 1rem;
color: #fff;
}
.autopay-status-icon {
font-size: 2.5rem;
margin-right: 1rem;
color: #fff;
}
.autopay-redirect-icon {
font-size: 2.5rem;
margin-right: 1rem;
color: #fff;
animation: spin 2s linear infinite;
}
/* Autopay Content */
.autopay-success-content,
.autopay-error-content,
.autopay-status-content,
.autopay-redirect-content {
padding: 2rem;
}
.autopay-success-subtitle,
.autopay-error-subtitle,
.autopay-status-subtitle,
.autopay-redirect-subtitle {
color: #6c757d;
font-weight: 400;
margin-bottom: 1.5rem;
}
/* Autopay Messages */
.autopay-success-message {
background: #d4edda;
color: #155724;
padding: 1rem 1.5rem;
border-radius: 8px;
border: 1px solid #c3e6cb;
margin-bottom: 2rem;
font-weight: 500;
}
.autopay-error-message {
background: #f8d7da;
color: #721c24;
padding: 1rem 1.5rem;
border-radius: 8px;
border: 1px solid #f5c6cb;
margin-bottom: 2rem;
font-weight: 500;
}
.autopay-success-message i,
.autopay-error-message i {
margin-right: 0.5rem;
font-size: 1.1rem;
}
/* Autopay Order Info */
.autopay-order-info {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 1.5rem;
margin: 2rem 0;
}
.autopay-info-item {
margin-bottom: 1rem;
}
.autopay-info-item:last-child {
margin-bottom: 0;
}
.autopay-info-item label {
font-weight: 600;
color: #495057;
margin-bottom: 0.5rem;
display: block;
}
.autopay-order-id {
font-family: 'Courier New', monospace;
font-weight: 600;
color: #007bff;
background: #e3f2fd;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.9rem;
}
/* Autopay Status Badges */
.autopay-status-badge {
font-size: 0.9rem;
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 500;
}
.autopay-status-badge i {
margin-right: 0.25rem;
}
/* Autopay Actions */
.autopay-success-actions,
.autopay-error-actions,
.autopay-status-actions {
margin-top: 2rem;
}
.autopay-success-actions .btn,
.autopay-error-actions .btn,
.autopay-status-actions .btn {
margin: 0.25rem;
border-radius: 25px;
font-weight: 500;
padding: 0.75rem 1.5rem;
transition: all 0.3s ease;
}
.autopay-success-actions .btn:hover,
.autopay-error-actions .btn:hover,
.autopay-status-actions .btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Autopay Transaction Details */
.autopay-transaction-details {
background: #f8f9fa;
border-radius: 8px;
padding: 2rem;
margin: 1.5rem 0;
}
.autopay-detail-group {
margin-bottom: 1.5rem;
}
.autopay-detail-group:last-child {
margin-bottom: 0;
}
.autopay-detail-title {
color: #495057;
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.autopay-detail-title i {
margin-right: 0.5rem;
color: #6c757d;
}
.autopay-detail-value {
font-size: 1.1rem;
color: #212529;
margin-bottom: 0;
word-break: break-word;
}
/* Autopay Error Details */
.autopay-error-details {
margin: 1.5rem 0;
}
.autopay-error-reason {
font-weight: 500;
}
/* Autopay Help Info */
.autopay-help-info {
margin-top: 2rem;
}
.autopay-help-info .card {
border: 1px solid #e9ecef;
border-radius: 8px;
}
.autopay-help-info .card-title {
color: #495057;
font-weight: 600;
}
.autopay-help-info .card-text {
color: #6c757d;
font-size: 0.9rem;
}
/* Autopay Security Info */
.autopay-security-info {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid #e9ecef;
}
.autopay-security-info small {
font-size: 0.8rem;
}
.autopay-security-info i {
margin-right: 0.25rem;
color: #28a745;
}
/* Autopay No Data */
.autopay-no-data {
text-align: center;
padding: 3rem 2rem;
}
.autopay-no-data i {
color: #6c757d;
margin-bottom: 1rem;
}
/* Autopay Form Styles (for payment-form.jsp) */
.autopay-form-card {
border: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 12px;
overflow: hidden;
}
.autopay-form-header {
background: linear-gradient(135deg, #007bff, #6610f2);
color: white;
border: none;
padding: 1.5rem;
}
.autopay-form-icon {
font-size: 2rem;
margin-right: 1rem;
}
.autopay-form-body {
padding: 2rem;
}
.autopay-form-group {
margin-bottom: 1.5rem;
}
.autopay-form-group label {
font-weight: 600;
color: #495057;
margin-bottom: 0.5rem;
}
.autopay-form-control {
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: all 0.3s ease;
}
.autopay-form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.autopay-form-submit {
background: linear-gradient(135deg, #28a745, #20c997);
border: none;
border-radius: 25px;
padding: 1rem 2rem;
font-size: 1.1rem;
font-weight: 600;
color: white;
transition: all 0.3s ease;
width: 100%;
}
.autopay-form-submit:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}
.autopay-form-security {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid #e9ecef;
}
.autopay-form-security small {
font-size: 0.8rem;
color: #6c757d;
}
.autopay-form-security i {
margin-right: 0.25rem;
color: #28a745;
}
/* Responsive Design for Autopay */
@media (max-width: 768px) {
.autopay-success-content,
.autopay-error-content,
.autopay-status-content {
padding: 1.5rem;
}
.autopay-transaction-details {
padding: 1.5rem;
}
.autopay-success-actions .btn,
.autopay-error-actions .btn,
.autopay-status-actions .btn {
width: 100%;
margin: 0.25rem 0;
}
.autopay-order-info .row > div {
margin-bottom: 1rem;
}
.autopay-detail-group {
margin-bottom: 1rem;
}
}
@media (max-width: 576px) {
.autopay-success-header,
.autopay-error-header,
.autopay-status-header {
padding: 1rem;
}
.autopay-success-icon,
.autopay-error-icon,
.autopay-status-icon {
font-size: 2rem;
margin-right: 0.5rem;
}
.autopay-success-content,
.autopay-error-content,
.autopay-status-content {
padding: 1rem;
}
.autopay-transaction-details {
padding: 1rem;
}
.autopay-order-info {
padding: 1rem;
}
.autopay-detail-value {
font-size: 1rem;
}
}
/* Autopay Redirect Specific Styles */
.autopay-loading-container {
margin: 2rem 0;
}
.autopay-loading-spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #ffc107;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
margin: 0 auto;
}
.autopay-redirect-message {
background: #e3f2fd;
color: #1565c0;
padding: 1rem 1.5rem;
border-radius: 8px;
border: 1px solid #bbdefb;
margin: 1rem 0;
font-weight: 500;
}
.autopay-redirect-message i {
margin-right: 0.5rem;
font-size: 1.1rem;
}
.autopay-transaction-info {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 1.5rem;
margin: 2rem 0;
}
.autopay-transaction-id {
font-family: 'Courier New', monospace;
font-weight: 600;
color: #6f42c1;
background: #f3e5f5;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.9rem;
}
.autopay-redirect-actions {
margin: 2rem 0;
}
.autopay-redirect-button {
background: linear-gradient(135deg, #007bff, #0056b3);
border: none;
border-radius: 25px;
padding: 1rem 2rem;
font-size: 1.1rem;
font-weight: 600;
color: white;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.autopay-redirect-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
color: white;
text-decoration: none;
}
.autopay-redirect-help {
margin: 2rem 0;
}
.autopay-redirect-help .alert {
border-radius: 8px;
border: none;
padding: 1.5rem;
}
.autopay-redirect-help .alert i {
margin-right: 0.5rem;
font-size: 1.1rem;
}
.autopay-countdown {
margin-top: 1rem;
}
.autopay-countdown #countdown {
font-weight: 600;
color: #007bff;
font-size: 1.1rem;
}
/* Animacja spin dla ikony redirect */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive dla redirect */
@media (max-width: 768px) {
.autopay-redirect-content {
padding: 1.5rem;
}
.autopay-transaction-info {
padding: 1rem;
}
.autopay-redirect-button {
width: 100%;
margin: 0.5rem 0;
}
.autopay-loading-spinner {
width: 50px;
height: 50px;
}
}
@media (max-width: 576px) {
.autopay-redirect-header {
padding: 1rem;
}
.autopay-redirect-icon {
font-size: 2rem;
margin-right: 0.5rem;
}
.autopay-redirect-content {
padding: 1rem;
}
.autopay-transaction-info {
padding: 1rem;
}
.autopay-redirect-message {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
}
/* Autopay Return Info Styles */
.autopay-return-info {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border: 1px solid #2196f3;
border-radius: 10px;
margin-bottom: 1.5rem;
padding: 1rem 1.5rem;
}
.autopay-return-info h6 {
color: #1976d2;
font-weight: 600;
margin-bottom: 0.5rem;
}
.autopay-return-info p {
margin-bottom: 0.25rem;
font-size: 0.95rem;
}
.autopay-return-info strong {
color: #0d47a1;
}
/* Autopay Status Alert Styles */
.autopay-status-alert {
border-radius: 10px;
margin-bottom: 1.5rem;
border: none;
padding: 1rem 1.5rem;
}
.autopay-status-alert h6 {
font-weight: 600;
margin-bottom: 0.5rem;
}
.autopay-status-alert.alert-success {
background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
color: #2e7d32;
border: 1px solid #4caf50;
}
.autopay-status-alert.alert-danger {
background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
color: #c62828;
border: 1px solid #f44336;
}
.autopay-status-alert.alert-warning {
background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
color: #ef6c00;
border: 1px solid #ff9800;
}
/* Autopay Status Loading Styles */
.autopay-status-loading {
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.autopay-status-loading i {
color: #007bff;
margin-right: 0.5rem;
}
.autopay-final-message {
border-radius: 10px;
border: none;
padding: 1rem 1.5rem;
margin-top: 1rem;
}
.autopay-final-message h6 {
font-weight: 600;
margin-bottom: 0.5rem;
}
.autopay-final-message.alert-success {
background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
color: #2e7d32;
border: 1px solid #4caf50;
}
.autopay-final-message.alert-danger {
background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
color: #c62828;
border: 1px solid #f44336;
}
/* Payment Status Styles */
.payment-status-loading {
display: flex;
align-items: center;
padding: 0.5rem;
background: #f8f9fa;
border-radius: 6px;
border: 1px solid #e9ecef;
font-size: 0.875rem;
color: #6c757d;
}
.payment-status-loading i {
color: #007bff;
margin-right: 0.5rem;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.payment-btn {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border: none;
border-radius: 6px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: white;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}
.payment-btn:hover {
background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
color: white;
}
.payment-btn:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}
.payment-btn i {
margin-right: 0.25rem;
}
/* Service and Price Column Styles */
.modern-td .text-success {
font-weight: 600;
font-size: 1rem;
}
.modern-td strong {
font-weight: 600;
}
/* Responsive adjustments for payment columns */
@media (max-width: 768px) {
.payment-status-loading {
font-size: 0.75rem;
padding: 0.25rem;
}
.payment-btn {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
}
/* Company Styles */
.company-contact-item {
display: flex;
align-items: flex-start;
padding: 1.5rem;
border-radius: 12px;
transition: all 0.3s ease;
background: #fff;
border: 1px solid #e9ecef;
margin-bottom: 1rem;
}
.company-contact-item:hover {
background-color: #f8f9fa;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.company-contact-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #007bff, #0056b3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.5rem;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,123,255,0.3);
}
.company-contact-icon i {
font-size: 1.4rem;
color: white;
}
.company-contact-content {
flex: 1;
}
.company-contact-label {
font-size: 0.9rem;
font-weight: 600;
color: #6c757d;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.company-contact-value {
font-size: 1.1rem;
color: #212529;
margin-bottom: 0;
line-height: 1.4;
}
.company-contact-value a {
color: #007bff;
font-weight: 500;
text-decoration: none;
}
.company-contact-value a:hover {
color: #0056b3;
text-decoration: underline;
}
.company-info-card {
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0,123,255,0.3);
}
.company-info-card h3 {
margin-bottom: 0;
font-weight: 600;
}
.company-hours-card {
background: #f8f9fa;
border-radius: 12px;
padding: 2rem;
text-align: center;
border: 1px solid #e9ecef;
}
.company-hours-card h4 {
color: #007bff;
margin-bottom: 1rem;
font-weight: 600;
}
.company-hours-card p {
margin-bottom: 0.5rem;
}
.company-hours-card .text-muted {
color: #6c757d !important;
}
.company-action-buttons {
text-align: center;
margin-top: 2rem;
}
.company-action-buttons .btn {
margin: 0 0.5rem;
padding: 0.75rem 2rem;
border-radius: 8px;
font-weight: 500;
}
@media (max-width: 768px) {
.company-contact-item {
flex-direction: column;
text-align: center;
padding: 1rem;
}
.company-contact-icon {
margin-right: 0;
margin-bottom: 1rem;
width: 50px;
height: 50px;
}
.company-contact-icon i {
font-size: 1.2rem;
}
.company-info-card {
padding: 1.5rem;
}
.company-hours-card {
padding: 1.5rem;
}
.company-action-buttons .btn {
display: block;
width: 100%;
margin: 0.5rem 0;
}
}
/* Language Selector Styles - dla strony logowania */
.language-selector {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
.language-selector .btn-outline-light {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.8);
color: #495057;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.language-selector .btn-outline-light:hover {
background: rgba(255, 255, 255, 1);
border-color: rgba(255, 255, 255, 1);
color: #495057;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.language-selector .btn-outline-light:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* Modern Alert Styles */
.modern-alert {
border-radius: 12px;
border: none;
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
border-left: 4px solid #dc3545;
}
.modern-alert i {
color: #dc3545;
}
/* Password Change Form Specific Styles */
.modern-form-section .modern-section-header {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-left: 4px solid #2196f3;
padding: 1rem 1.5rem;
}
.modern-form-section .modern-section-header i {
color: #1976d2;
}
.modern-form-section .modern-section-header .modern-actions {
margin-left: auto;
}
.modern-form-section .modern-section-header .modern-actions .btn-modern {
padding: 0.5rem 1rem;
font-size: 0.875rem;
border-radius: 8px;
}
/* Header Optimization */
header.bg-dark {
padding: 0.5rem 0 !important;
}
header .navbar-nav {
flex-wrap: nowrap;
}
header .navbar-nav .nav-item {
margin-right: 0.5rem;
}
header .navbar-nav .nav-link {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
white-space: nowrap;
}
header .dropdown {
margin-right: 0.5rem;
}
header .dropdown .btn {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
}
header .notification-icon {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
/* Responsive header adjustments */
@media (max-width: 991.98px) {
header .navbar-nav .nav-link {
font-size: 0.85rem;
padding: 0.4rem 0.6rem;
}
}
@media (max-width: 767.98px) {
header .col-auto {
padding: 0 0.25rem;
}
header .mobile-menu-btn {
font-size: 1.25rem;
padding: 0.25rem 0.5rem;
}
}
/* Password strength indicator */
.password-strength {
margin-top: 0.5rem;
font-size: 0.875rem;
}
.password-strength.weak {
color: #dc3545;
}
.password-strength.medium {
color: #ffc107;
}
.password-strength.strong {
color: #28a745;
}
/* Staff Dashboard Statistics */
.stat-card {
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: none;
overflow: hidden;
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.stat-icon {
opacity: 0.9;
}
.stat-content h4 {
font-weight: 700;
font-size: 1.8rem;
}
.stat-content small {
font-size: 0.85rem;
opacity: 0.9;
}
/* Staff Visits Styles */
.visits-timeline {
max-height: 600px;
overflow-y: auto;
padding-right: 10px;
}
.visits-timeline::-webkit-scrollbar {
width: 6px;
}
.visits-timeline::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.visits-timeline::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.visits-timeline::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.visit-item {
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 20px;
margin-bottom: 15px;
cursor: pointer;
transition: all 0.3s ease;
background: white;
position: relative;
overflow: hidden;
}
.visit-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(135deg, #007bff, #0056b3);
transition: width 0.3s ease;
}
.visit-item:hover {
border-color: #007bff;
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.15);
transform: translateY(-3px);
}
.visit-item:hover::before {
width: 6px;
}
.visit-time {
font-size: 1.2em;
margin-bottom: 10px;
font-weight: 600;
}
.visit-patient {
margin-bottom: 8px;
font-size: 1.1em;
}
.visit-service {
margin-bottom: 10px;
color: #6c757d;
font-size: 0.95em;
}
.visit-status {
text-align: right;
margin-top: 10px;
}
.visit-details h6 {
color: #495057;
margin-bottom: 10px;
font-weight: 600;
}
/* Staff Reports Styles */
.report-summary {
margin-bottom: 30px;
}
.report-summary .stat-card {
text-align: center;
}
.report-summary .stat-card h3 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 5px;
}
.report-summary .stat-card small {
font-size: 0.9rem;
opacity: 0.9;
}
.empty-state {
text-align: center;
padding: 60px 20px;
}
.empty-state-content i {
opacity: 0.5;
}
.empty-state-content h5 {
margin-bottom: 15px;
font-weight: 500;
}
.empty-state-content p {
margin-bottom: 20px;
color: #6c757d;
}
.spinner-border {
width: 3rem;
height: 3rem;
}
/* Calendar styles */
.calendar-container {
text-align: center;
}
.calendar-container input[type="date"] {
font-size: 1.1rem;
padding: 12px;
border-radius: 8px;
border: 2px solid #e9ecef;
transition: all 0.3s ease;
}
.calendar-container input[type="date"]:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.stat-card {
margin-bottom: 15px;
}
.visit-item {
padding: 15px;
}
.visit-time {
font-size: 1.1em;
}
.visit-patient {
font-size: 1em;
}
}
.empty-state {
text-align: center;
padding: 60px 20px;
}
.empty-state-content i {
opacity: 0.5;
}
.report-summary {
margin-bottom: 30px;
}
.stat-card {
transition: transform 0.2s ease;
}
.stat-card:hover {
transform: translateY(-2px);
}
.spinner-border {
width: 3rem;
height: 3rem;
}
.mheader {
padding-bottom: 0rem !important;
margin-bottom: 0rem !important;
}
/* Kompaktowe statystyki w homeStaff na mobile - podobnie jak w adminReports */
@media (max-width: 767.98px) {
/* Statystyki w homeStaff - 2 kolumny, kompaktowe */
.staff-stats.row .col-md-6.col-lg-3 {
flex: 0 0 50% !important;
max-width: 50% !important;
padding: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.staff-stats .stat-card {
padding: 0.75rem 0.5rem !important;
margin-bottom: 0 !important;
}
.staff-stats .stat-card .stat-icon {
margin-right: 0.5rem !important;
}
.staff-stats .stat-card .stat-icon i {
font-size: 1.25rem !important;
}
.staff-stats .stat-card .stat-content h4 {
font-size: 1.25rem !important;
margin-bottom: 0.25rem !important;
}
.staff-stats .stat-card .stat-content small {
font-size: 0.7rem !important;
display: block !important;
line-height: 1.2 !important;
}
/* Statystyki w home - 2 kolumny, kompaktowe (podobnie jak homeStaff) */
.home-stats.row .col-12.col-md-4 {
flex: 0 0 50% !important;
max-width: 50% !important;
padding: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
/* Trzecia karta statystyki w home - pe艂na szeroko艣膰 na mobile */
.home-stats.row .col-12.col-md-4:nth-child(3) {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.home-stats .stat-card {
padding: 0.75rem 0.5rem !important;
margin-bottom: 0 !important;
}
.home-stats .stat-card .stat-card-icon {
margin-right: 0.5rem !important;
width: 40px !important;
height: 40px !important;
}
.home-stats .stat-card .stat-card-icon i {
font-size: 1.25rem !important;
}
.home-stats .stat-card .stat-card-content h3.stat-card-number {
font-size: 1.25rem !important;
margin-bottom: 0.25rem !important;
}
.home-stats .stat-card .stat-card-content p.stat-card-label {
font-size: 0.7rem !important;
margin-bottom: 0.25rem !important;
line-height: 1.2 !important;
}
.home-stats .stat-card .stat-card-trend {
font-size: 0.65rem !important;
margin-top: 0.25rem !important;
}
/* Dzisiejsze wizyty w homeStaff - karty na mobile zamiast tabeli */
#todayVisitsTable {
display: block !important;
width: 100% !important;
border: none !important;
}
#todayVisitsTable thead.modern-thead {
display: none !important;
}
#todayVisitsTable tbody {
display: block !important;
width: 100% !important;
}
#todayVisitsTable tbody tr.modern-tr {
display: block !important;
width: 100% !important;
margin-bottom: 1rem !important;
padding: 1rem !important;
border: 1px solid #e9ecef !important;
border-radius: 0.25rem !important;
background: white !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
#todayVisitsTable tbody tr.modern-tr td {
display: block !important;
width: 100% !important;
border: none !important;
padding: 0.5rem 0 !important;
text-align: left !important;
}
#todayVisitsTable tbody tr.modern-tr td::before {
content: attr(data-label) ": ";
font-weight: 600 !important;
display: inline-block !important;
min-width: 100px !important;
margin-right: 0.5rem !important;
color: #6c757d !important;
}
#todayVisitsTable tbody tr.modern-tr td:first-child {
padding-top: 0 !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
margin-bottom: 0.5rem !important;
padding-bottom: 0.5rem !important;
border-bottom: 1px solid #e9ecef !important;
}
#todayVisitsTable tbody tr.modern-tr td:first-child::before {
display: none !important;
}
#todayVisitsTable tbody tr.modern-tr td:last-child {
padding-bottom: 0 !important;
}
/* Patient History - karty na mobile z uporz膮dkowanym uk艂adem */
#patientHistoryTable {
display: block !important;
width: 100% !important;
border: none !important;
}
#patientHistoryTable thead.modern-thead {
display: none !important;
}
#patientHistoryTable tbody {
display: block !important;
width: 100% !important;
}
#patientHistoryTable tbody tr.modern-tr {
display: block !important;
width: 100% !important;
margin-bottom: 1rem !important;
padding: 1rem !important;
border: 1px solid #e9ecef !important;
border-radius: 0.25rem !important;
background: white !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
#patientHistoryTable tbody tr.modern-tr td {
display: block !important;
width: 100% !important;
border: none !important;
padding: 0.5rem 0 !important;
text-align: left !important;
}
/* Linia 1: Data i godzina razem */
#patientHistoryTable tbody tr.modern-tr td.patient-history-date-time {
padding-top: 0 !important;
margin-bottom: 0.75rem !important;
padding-bottom: 0.75rem !important;
border-bottom: 1px solid #e9ecef !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
}
#patientHistoryTable tbody tr.modern-tr td.patient-history-date-time::before {
display: none !important;
}
/* Dodaj godzin臋 do pierwszej kom贸rki po dacie */
#patientHistoryTable tbody tr.modern-tr td.patient-history-date-time::after {
content: attr(data-time) !important;
font-weight: 600 !important;
margin-left: 1rem !important;
color: #6c757d !important;
}
/* Ukryj osobn膮 kom贸rk臋 z godzin膮 na mobile */
#patientHistoryTable tbody tr.modern-tr td.patient-history-time-cell {
display: none !important;
}
/* 艢rodek: daypart, duration, status - z etykietami */
#patientHistoryTable tbody tr.modern-tr td:nth-child(3),
#patientHistoryTable tbody tr.modern-tr td:nth-child(4),
#patientHistoryTable tbody tr.modern-tr td:nth-child(5) {
display: flex !important;
align-items: center !important;
width: 100% !important;
margin-bottom: 0.5rem !important;
flex-wrap: nowrap !important;
}
#patientHistoryTable tbody tr.modern-tr td:nth-child(3)::before,
#patientHistoryTable tbody tr.modern-tr td:nth-child(4)::before,
#patientHistoryTable tbody tr.modern-tr td:nth-child(5)::before {
content: attr(data-label) ": ";
font-weight: 600 !important;
display: inline-block !important;
min-width: 120px !important;
margin-right: 0.5rem !important;
color: #6c757d !important;
flex-shrink: 0 !important;
}
/* Upewnij si臋, 偶e zawarto艣膰 kom贸rki z czasem trwania jest w jednej linii */
#patientHistoryTable tbody tr.modern-tr td:nth-child(4) .d-flex {
display: inline-flex !important;
align-items: center !important;
margin-left: 0 !important;
}
/* Ostatnia linia: przycisk szczeg贸艂y */
#patientHistoryTable tbody tr.modern-tr td:last-child {
padding-top: 0.75rem !important;
border-top: 1px solid #e9ecef !important;
margin-top: 0.5rem !important;
text-align: center !important;
}
#patientHistoryTable tbody tr.modern-tr td:last-child::before {
display: none !important;
}
#patientHistoryTable tbody tr.modern-tr td:last-child .action-buttons {
display: flex !important;
justify-content: center !important;
}
/* Contact page - wy艣rodkowanie zawarto艣ci kart na mobile */
.company-contact-item {
text-align: center !important;
flex-direction: column !important;
align-items: center !important;
}
.company-contact-icon {
margin-bottom: 1rem !important;
margin-right: 0 !important;
}
.company-contact-content {
text-align: center !important;
width: 100% !important;
}
.company-contact-label {
text-align: center !important;
margin-bottom: 0.5rem !important;
}
.company-contact-value {
text-align: center !important;
}
/* Godziny pracy - ju偶 ma text-align: center, ale upewnijmy si臋 */
.company-hours-card {
text-align: center !important;
}
.company-hours-card .row {
justify-content: center !important;
}
.company-hours-card .col-md-6 {
text-align: center !important;
}
/* Przyciski akcji - wy艣rodkowanie na mobile */
.company-action-buttons {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 1rem !important;
}
.company-action-buttons .btn {
width: 100% !important;
max-width: 300px !important;
}
/* Schedule - skalowanie kalendarza do rozdzielczo艣ci na mobile */
.schedule-calendar {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
width: 100% !important;
}
.schedule-calendar table {
width: 100% !important;
min-width: 100% !important;
font-size: 0.85rem !important;
}
.schedule-calendar table th {
padding: 0.5rem 0.25rem !important;
font-size: 0.75rem !important;
white-space: nowrap !important;
}
.schedule-calendar table td {
padding: 0.5rem 0.25rem !important;
height: auto !important;
min-height: 50px !important;
font-size: 0.8rem !important;
}
.schedule-calendar table td div {
font-size: 0.9rem !important;
}
/* Schedule - konwersja tabeli na karty na mobile */
#scheduleTable.mobile-table {
display: block;
width: 100%;
}
#scheduleTable.mobile-table thead {
display: none;
}
#scheduleTable.mobile-table tbody {
display: block;
width: 100%;
}
#scheduleTable.mobile-table tbody tr {
display: block;
width: 100%;
margin-bottom: 1.5rem;
border: 1px solid #e9ecef;
border-radius: 0.25rem;
padding: 1rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
background: #fff;
}
#scheduleTable.mobile-table tbody tr td {
display: block;
width: 100%;
padding: 0.5rem 0;
border: none;
text-align: left;
}
#scheduleTable.mobile-table tbody tr td:before {
content: attr(data-label) ": ";
font-weight: bold;
display: inline-block;
margin-right: 0.5rem;
min-width: 120px;
}
#scheduleTable.mobile-table tbody tr td:first-child {
padding-top: 0;
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 0.75rem;
}
#scheduleTable.mobile-table tbody tr td:first-child:before {
display: none;
}
/* Schedule - przyciski w kolumnie Akcje na mobile - r贸wne z ma艂ymi odst臋pami */
#scheduleTable.mobile-table tbody tr td.schedule-actions-cell {
padding-top: 1rem;
margin-top: 0.75rem;
border-top: 1px solid #e9ecef;
}
#scheduleTable.mobile-table tbody tr td.schedule-actions-cell:before {
content: "Akcje: ";
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
}
#scheduleTable.mobile-table tbody tr td.schedule-actions-cell .schedule-action-buttons {
display: flex;
flex-direction: column;
gap: 0.4rem;
align-items: stretch;
}
#scheduleTable.mobile-table tbody tr td.schedule-actions-cell .schedule-action-buttons .btn,
#scheduleTable.mobile-table tbody tr td.schedule-actions-cell .schedule-action-buttons form {
width: 100%;
margin: 0;
flex: 1 1 auto;
}
#scheduleTable.mobile-table tbody tr td.schedule-actions-cell .schedule-action-buttons form {
display: flex;
width: 100%;
}
#scheduleTable.mobile-table tbody tr td.schedule-actions-cell .schedule-action-buttons form button {
width: 100%;
flex: 1 1 auto;
}
/* Dla wierszy bez szczeg贸艂贸w (Brak szczeg贸艂贸w) */
#scheduleTable.mobile-table tbody tr td:last-child:not(.schedule-actions-cell) {
padding-top: 1rem;
margin-top: 0.75rem;
border-top: 1px solid #e9ecef;
}
#scheduleTable.mobile-table tbody tr td:last-child:not(.schedule-actions-cell):before {
content: "Akcje: ";
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
}
}
/* iOS WebView mobile fix: prevent clipping of native date/time controls */
@supports (-webkit-touch-callout: none) {
@media (max-width: 768px) {
input[type="date"].form-control,
input[type="date"].form-control-sm,
input[type="time"].form-control,
input[type="time"].form-control-sm,
.date-input.form-control,
.date-input.form-control-sm {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding-right: 0.35rem !important;
}
/* iOS WebView: input time potrafi miec zbyt duza szerokosc wewnetrzna */
input[type="time"].form-control,
input[type="time"].form-control-sm {
display: block !important;
-webkit-appearance: none !important;
appearance: none !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
/* Zmniejsz margines natywnego przycisku pickera czasu na iOS */
input[type="time"]::-webkit-calendar-picker-indicator {
margin: 0 !important;
padding: 0 !important;
}
/* Zapobiega "wypychania" inputa przez flex/grid kontener */
.form-group .row > [class*="col-"] {
min-width: 0 !important;
}
}
}
/* Header mobile tuning (header/headerPatient/headerStaff) */
@media (max-width: 767.98px) {
/* Ukryj logo w mobilnym headerze we wszystkich wariantach */
header .navbar-brand img.d-md-none {
display: none !important;
}
/* Zwolnij miejsce po logo */
header .col-1.col-md-1,
header .col-auto {
display: none !important;
}
/* Mniejszy napis "Menu" obok hamburgera */
header .mobile-menu-btn span {
font-size: 0.82rem !important;
letter-spacing: 0.2px !important;
}
/* Wspolny kontener kontrolek usera dla col-8 i col-7 */
header .col-8.col-md-3,
header .col-7.col-md-3 {
gap: 0.35rem !important;
}
}
/* iOS WebView: ikonki jezyka/profilu bywaja renderowane za male */
@supports (-webkit-touch-callout: none) {
@media (max-width: 767.98px) {
header #languageDropdown,
header #userDropdown,
header .notification-icon {
min-height: 44px !important;
min-width: 44px !important;
}
header #languageDropdown i,
header #userDropdown i,
header .notification-icon i {
font-size: 1.2rem !important;
}
}
}