.status-legend {width:235px; position:fixed; right:10px; top:404px; 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;}


body {background: #121212; height: 98vh; font-family:'PT Sans', sans-serif; overflow-x:hidden; background-image: url("/b3.jpg"); background-size: auto;}
a {color: #e0e0e0; text-decoration: none;}
h3 {margin: 10px; font-size: 16px; color: #ffffff;}

.month-navigation {width:400px; margin-left:463px; background:#1e1e1e; text-align:center; padding:20px 0; border-radius:12px 12px 0 0; border:1px solid #2d2d2d;}
.month-navigation a {text-decoration:none; margin:0 10px; color:#64b5f6;}
.month-navigation span {color:#b0b0b0;}

.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.4); overflow: hidden; background:#1e1e1e;}
.calendar-material .header {background: #2d2d2d; color: #e0e0e0; padding: 20px; text-align: center; font-size: 1.3em; border-bottom:1px solid #333;}
.calendar-material .weekdays {display: grid; grid-template-columns: repeat(7, 1fr); background: #252525; padding: 12px 0; font-weight:500; color:#9e9e9e;}
.calendar-material .weekdays span {color: #bb86fc;}
.calendar-material .days {display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #2d2d2d;}
.calendar-material .day {min-height: 144px; background: #313131; transition: all 0.2s; border:1px solid #2d2d2d;}
.calendar-material .day:hover {background: #252525; cursor:pointer;}
.calendar-material .today {background: #2a3b4d;}
.day-number {margin:3px 0 0 3px; color:#e0e0e0;}

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

.draft {background: #616161; color: white;}
.review, .review_head, .review_director, .review_finance, .review_owner {background: #ffb300; color: black;}
.correct_manager, .correct_director {background: #ff6d00; color: white;}
.correct_head {background: #cf6679; color: white;}
.requires_payment, .approved, .paid_part {background: #7b5eca; color: white;}
.finish {background: #00c853; color: white;}
.paid_fully {background: #2962ff; color: white;}
.paid {background: #304ffe; color: white;}
.rejected {background: #424242; color: white;}







.user-panel {height:100vh; width:300px; background:#1e1e1e; box-shadow:0 4px 12px rgba(0,0,0,0.3); position:fixed; border-right:1px solid #333; background:linear-gradient(0deg, #111, #222);}
.user-content {width: 270px; margin:15px; padding-bottom: 8px; background:#2d2d2d; border:1px solid #333;}
.user-notify {width: 270px; margin:15px; padding-bottom: 8px; background:#2d2d2d; padding-top:8px; border:1px solid #333;}
.user-notify p {margin:10px; color:#e0e0e0;}
.user-notify span {color:#9e9e9e; font-size: 12.5px;}
.user-info {display: flex;}
.user-info > div {margin-left:10px;}
.user-info p:nth-child(2) {background: #333; width:150px; padding: 2px 5px; color:#e0e0e0;}
.user-panel h3 {margin:0 0 5px; font-size:18px; color:#ffffff;}
.user-meta {margin: 10px; background: #252525; padding-bottom: 10px; border-top: 1px solid #333; font-size: 13px; color:#e0e0e0;}
.user-meta p {margin:10px;}
.user-notify .user-meta {font-size: 15px; overflow-y: scroll; max-height:350px; background:#252525;}
.user-meta p a {color:#64b5f6; text-decoration: underline;}
.user_invoices {padding: 2px 5px;}
.user_invoices.new {background: #333; color:#e0e0e0;}
.user_invoices.review {background: #2d2d2d; color:#e0e0e0;}

.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 #333;}
.invoice div a {color:#64b5f6;}
.invoice .amount {font-weight: bold;}
.invoice .comment {color: #ff8a65; font-size: 12px;}


.status-group h3 {color: #e0e0e0; color: #000;}
.payment-details {margin-top:8px; font-size:13px; color:#b0b0b0;}
.payment-details > div {margin-bottom:2px;}
.payment-details span {background: #7b5eca; color: #fff; padding:2px;}
.payment-part {padding:3px 0; border-bottom:1px dashed #333;}
.paid_requires {background: #7b5eca; color: #fff;}
.comment {margin-top:5px; font-size:12px; color:#ff8a65;}

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

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




#day-panel {position:fixed; top:0; right:-330px; width:316px; max-height:1000px; background:#f7f7f7; box-shadow:-2px 0 10px rgba(0,0,0,0.1); z-index:10; transition:right 0.3s; overflow-y:scroll;}
#day-panel.visible {right:268px;}
.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;}
#day-panel a {color: #000;}

.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; transition: all linear .3s;}
.new-invoice-btn:hover {background: #fff;}

.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;}