body {background: linear-gradient(135deg, #e9e9e9 0%, #aaaaaa 100%); height: 98vh; font-family:'PT Sans', sans-serif; overflow-x:hidden;
    /*  background: #2A7B9B; background: linear-gradient(145deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(201, 89, 89, 1) 100%); */}


::-webkit-scrollbar-button {width:12px; height:0;}
::-webkit-scrollbar-thumb {background-color: #bbb;}

::-webkit-resizer {width:7px; height:0;}
::-webkit-scrollbar {width:15px; background: #fff;}


@font-face {font-family:'PT Sans'; font-display:swap; src:local('PT Sans'), local('PTSans-Regular'), url('fonts/ptsans/ptsans.woff2') format('woff2'),
url('fonts/ptsans/ptsans.woff') format('woff'), url('fonts/ptsans/ptsans.ttf') format('truetype'); font-weight:400; font-style:normal;}
@font-face {font-family:'PT Sans'; font-display:swap; src:local('PT Sans Italic'), local('PTSans-Italic'), url('fonts/ptsans/ptsansitalic.woff2') format('woff2'),
url('fonts/ptsans/ptsansitalic.woff') format('woff'), url('fonts/ptsans/ptsansitalic.ttf') format('truetype'); font-weight:400; font-style:italic;}

a {color: #000; text-decoration: none;}

h3 {margin: 10px; font-size: 16px;}

.month-navigation {width:400px; margin-left:463px; background:#fff; text-align:center; padding:20px 0; border-radius:12px 12px 0 0;}
.month-navigation a {text-decoration:none; margin:0 10px; color:#025aff;}


.calendar-material {max-width:1010px; font-family: 'Roboto', sans-serif; margin:0 0 0 310px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); border-radius: 0 0 12px 12px; overflow: hidden;}

.calendar-material .header {background: #db9cba; background: linear-gradient(133deg, rgba(219, 156, 186, 1) 0%, rgba(81, 139, 207, 1) 100%);
    color: white; padding: 20px; text-align: center; font-size: 1.3em;}

.calendar-material .weekdays {display: grid; grid-template-columns: repeat(7, 1fr); background: #F5F5F5; padding: 12px 0; font-weight:500;}
.calendar-material .weekdays span {color: #c965a9;}
.calendar-material .days {display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #E0E0E0;}
.calendar-material .day {min-height: 144px; background: white; transition: all 0.2s;}
.calendar-material .day:hover {background: #F5F5F5; cursor:pointer;}
.calendar-material .today {background: #E1F5FE;}
.day-number {margin:3px 0 0 3px;}


.event p {margin:2px 1px; padding:2px 1px; border-radius: 2px; font-size: 12px; width:136px;}

.draft {background: #9E9E9E; color: white;}
.review, .review_head, .review_director, .review_finance, .review_owner {background: #ffe007; color: black;}
.correct_manager, .correct_director {background: #ff8022; color: white;}
.correct_head {background: #F44336; color: white;}
.requires_payment, .approved, .paid_part {background: #955dfd; color: white;}


.finish {background: #4CAF50; color: white;}
.paid_fully {background: #5bb4f5; color: white;}
.paid {background: #3962ff; color: white;}
.rejected {background: #000; color: white;}



.status-legend {width:245px; position:fixed; right:10px; top:394px; transform:translateY(-50%); background:#ffffffe6; padding:8px; z-index:10;}
.status-legend > div {font-size:15px; margin-bottom:20px;}
.status-legend div div {display: flex; align-items: center; background: #fff;}


.status-legend div:last-child {margin-bottom:0;}

.status-legend span {display:inline-block; font-weight:500; margin-right: 10px;}
.status-legend > p {color:#666; margin:10px; font-size:13px;}
.status-legend div div p {margin:0;}

.status-legend span {width: 30px; height: 30px;}
.status-legend .approved {background: #4CAF50;}
.status-legend .paid:nth-child(1) {background: #5bb4f5;}
.status-legend .paid:nth-child(2) {background: #3962ff;}
.status-legend .paid:nth-child(3) {background: #955dfd;}
.status-legend .rejected {background: #000;}
.status-legend .review {background: #ffe007;}
.status-legend .draft {background: #9E9E9E;}
.status-legend .correction {background: #ff8022;}
.status-legend .correction:nth-child(2) {background: #F44336;}

.group-title {display: flex; align-items: center;}
.status-group span {width: 30px; height: 30px;}


#day-panel {position:fixed; top:0; right:-300px; width:312px; max-height:1000px; background:#ffffffe6; box-shadow:-2px 0 10px rgba(0,0,0,0.1);
    z-index:10; transition:right 0.3s; overflow-x:scroll; }
#day-panel.visible {right:276px;}

.panel-header {padding:20px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center;}
.close-panel {background:none; border:none; font-size:20px; cursor:pointer;}
.panel-content {padding:8px;}
.panel_list {padding-bottom: 10px; display: block; text-decoration: underline;}

.new-invoice-btn {display:block; background: #db9cba; background: linear-gradient(-60deg, rgba(255, 193, 7, 1) 0%, rgba(81, 139, 207, 1) 100%); color:#fff;
    text-align:center; padding:10px; border-radius:4px; margin-bottom:15px;}



.invoices-list .status-group{margin-bottom:20px;}
.invoices-list .status-title{padding:5px 0;font-weight:bold;border-bottom:1px solid #eee;}
.invoices-list .invoice{padding:8px 0;cursor:pointer;}
.invoices-list .invoice:hover{background:#f5f5f5;}


/*
.user_panel{position:fixed;height:100vh;width:300px;background:#ffffffba;left:0;padding:20px;box-shadow:2px 0 5px rgba(0,0,0,0.1);overflow-y:auto;}
.user-avatar{text-align:center;margin-bottom:20px;}
.user-avatar img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid #6200EE;}
.user-info h3{margin:0 0 10px 0;color:#333;font-size:18px;}
.user-info p{margin:5px 0;color:#555;font-size:14px;}
.user-info strong{color:#333;}
.user-stats{margin-top:20px;padding-top:15px;border-top:1px solid #eee;}
.user-stats h4{margin:0 0 10px 0;color:#333;}
.user-stats p{margin:5px 0;color:#555;font-size:13px;}
*/


.user-panel {height:100vh; width:300px; background:linear-gradient(135deg,rgba(255,255,255,0.9),rgba(255,255,255,0.7));
    backdrop-filter:blur(5px); border-radius:12px ;box-shadow:0 4px 12px rgba(0,0,0,0.08); position:fixed;}

.user-avatar {width:90px; height:90px; border-radius:8px; object-fit:cover;}


.user-content { width: 270px; margin:15px; border-radius: 10px; padding-bottom: 8px;
    background:#EEAECA; background:linear-gradient(262deg, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);}

.user-notify { width: 270px; margin:15px; border-radius: 10px; padding-bottom: 8px;
    background:#EEAECA; background:linear-gradient(0deg, rgba(230, 238, 174, 1) 0%, rgba(148, 187, 233, 1) 100%); padding-top:8px;}

.user-notify p {margin:10px;}
.user-notify span {color:#bbb; font-size: 12.5px;}

.user-info {display: flex;}
.user-info > div {margin-left:10px;}
.user-info p:nth-child(2) {background: #cc7ea5; width:150px; padding: 2px 5px;}



.user-panel h3{margin:0 0 5px;font-size:18px;color:#333;}
.user-meta {margin: 10px; background: #fff; padding-bottom: 10px; border-top: 1px solid white; font-size: 13px;}
.user-meta p {margin:10px;}


.user-notify .user-meta {font-size: 15px; overflow-y: scroll; max-height:350px;}
.user-meta p a {color:#000; text-decoration: underline;}

.user_invoices {padding: 2px 5px;}
.user_invoices.new {background: #e0e1dc; }
.user_invoices.review {background: #dfeab2; }

.user_theme {width:96%; display: flex; align-items: center; justify-content: left;}
.user_theme p {font-size: 15px; margin-right: 10px;}



.invoice { padding: 10px; border-bottom: 1px solid #eee;}
.invoice div a {/*display: block;*/}
.invoice .amount { color: #666; font-weight: bold; }
.invoice .comment { color: #ff5722; font-size: 12px; }
.status-group h3 {/* margin: 15px 0 5px 0; */color: #333; }


.payment-details {margin-top:8px;font-size:13px;color:#555;}
.payment-details > div {margin-bottom:2px;}
.payment-details span {background: #955dfd; color: #fff; padding:2px;}
.payment-part {padding:3px 0;border-bottom:1px dashed #eee;}
.paid_requires {background: #955dfd; color: #fff; }
/*
.payment-part.paid {color:#4CAF50;text-decoration:line-through;}*/
.comment {margin-top:5px;font-size:12px;color:#E91E63;}


.notification { position: fixed; top: 10px; right: 20px; background: #4CAF50; color: white; padding: 15px 25px; border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 1000; display: none; animation: fadeIn 0.3s;}

@keyframes fadeIn
{
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0);}
}