*{box-sizing:border-box;}html,body{margin: 0;height: 100%;font-family: 'Plus Jakarta Sans',"Segoe UI",Arial,sans-serif;background-color: #f4f6f8;background: linear-gradient(rgba(255,255,255,0.78),rgba(255,255,255,0.78)),url("/img/batik-bg.jpg");background-size: cover;background-position: center;background-repeat: no-repeat;}body::before{display: none;}.container{display:flex;min-height:100vh;position:relative;z-index:1;}.sidebar{width:260px;background:#1f6f8b;color:#fff;position:fixed;top:0;left:0;height:100vh;display:flex;flex-direction:column;padding:16px 16px 16px;}.profile{display:flex;align-items:center;gap:10px;margin-bottom:22px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.15);text-decoration:none;color:inherit;transition:all .2s ease;}.profile:hover{opacity:.9;cursor:pointer;}.avatar{width:40px;height:40px;background:#d9edf2;border-radius:50%;flex-shrink:0;}.avatar-wrapper{position:relative;display:inline-block;}.avatar-edit{position:absolute;bottom:-2px;right:-2px;width:15px;height:15px;background:#ffffff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#1f6f8b;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:.2s;}.profile:hover .avatar-edit{transform:scale(1.1);}.menu::-webkit-scrollbar{width: 4px;}.menu::-webkit-scrollbar-track{background: rgba(255,255,255,0.05);}.menu::-webkit-scrollbar-thumb{background: rgba(255,255,255,0.2);border-radius: 10px;}.menu::-webkit-scrollbar-thumb:hover{background: rgba(255,255,255,0.3);}.menu{scrollbar-width: thin;scrollbar-color: rgba(255,255,255,0.2) rgba(255,255,255,0.05);}.menu a{display:flex;align-items:center;gap:12px;padding:11px 14px;color:#ffffff;text-decoration:none;border-radius:10px;margin-bottom:6px;font-size:14px;font-weight:500;transition:all .18s ease;}.menu a.active,.menu a:hover{background:#14586e;}main{margin-left:260px;flex:1;padding: 0px 16px 16px 16px;height:100vh;overflow-y:auto;-webkit-overflow-scrolling: touch;backface-visibility: hidden;transform: translateZ(0);}.topbar{background:#e3f0f5;padding: 8px 18px;border-radius: 12px;margin-bottom: 12px;display:flex;justify-content:space-between;align-items:center;border:1px solid #e3edf1;box-shadow:0 4px 14px rgba(0,0,0,.05);position:sticky;top:0;z-index:10;transition:all .2s ease;}.topbar-left{display: flex;align-items: center;justify-content: flex-start !important;gap: 15px;flex: 1;}.topbar:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);}.topbar-title{font-size: 18px;font-weight: 800;color: #0f172a;margin-bottom: 2px;}.topbar-subtitle{font-size: 11px;color: #64748b;}.topbar-right{display:flex;align-items:center;gap:10px;}.notif{position: relative;}.notif-icon-wrapper{position: relative;cursor: pointer;padding: 8px;border-radius: 10px;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;font-size: 20px;color: #1f6f8b;}.notif-icon-wrapper:hover{background: rgba(31,111,139,0.1);}.notif-badge{position: absolute;top: 2px;right: 2px;background: #ef4444;color: #fff;font-size: 10px;font-weight: 700;padding: 2px 6px;border-radius: 20px;border: 2px solid #fff;animation: pulse-red 2s infinite;}@keyframes pulse-red{0%{transform: scale(0.95);box-shadow: 0 0 0 0 rgba(239,68,68,0.7);}70%{transform: scale(1);box-shadow: 0 0 0 6px rgba(239,68,68,0);}100%{transform: scale(0.95);box-shadow: 0 0 0 0 rgba(239,68,68,0);}}.notif-dropdown{position: absolute;top: calc(100% + 15px);right: -10px;width: 320px;background: rgba(255,255,255,0.88);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);border: 1px solid rgba(255,255,255,0.4);border-radius: 18px;box-shadow: 0 20px 40px rgba(0,0,0,0.12);z-index: 1000;overflow: hidden;display: none;flex-direction: column;transform-origin: top right;animation: dropdownFadeIn 0.3s cubic-bezier(0.19,1,0.22,1);}@keyframes dropdownFadeIn{from{opacity: 0;transform: scale(0.95) translateY(-5px);}to{opacity: 1;transform: scale(1) translateY(0);}}.notif-dropdown.show{display: flex !important;}.notif-header{padding: 16px 20px;border-bottom: 1px solid rgba(0,0,0,0.06);display: flex;justify-content: space-between;align-items: center;font-weight: 800;color: #1f6f8b;font-size: 15px;}.notif-header-left{display: flex;align-items: center;gap: 12px;}.notif-close-mobile{display: none;cursor: pointer;font-size: 18px;padding: 5px;color: #1f6f8b;}.notif-count{background: rgba(239,68,68,0.1);color: #ef4444;font-size: 11px;padding: 3px 10px;border-radius: 20px;}.notif-body{max-height: 400px;overflow-y: auto;}.notif-body::-webkit-scrollbar{width: 5px;}.notif-body::-webkit-scrollbar-thumb{background: rgba(0,0,0,0.1);border-radius: 10px;}.notif-item{display: flex;gap: 14px;padding: 15px 20px;text-decoration: none;transition: all 0.2s ease;border-bottom: 1px solid rgba(0,0,0,0.04);}.notif-item:hover{background: rgba(31,111,139,0.04);}.notif-item-icon{width: 40px;height: 40px;border-radius: 12px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;font-size: 16px;}.notif-item.request .notif-item-icon{background: #eff6ff;color: #3b82f6;}.notif-item.chat .notif-item-icon{background: #ecfdf5;color: #10b981;}.notif-item.status .notif-item-icon{background: #fff7ed;color: #f97316;}.notif-item-content{flex: 1;min-width: 0;}.notif-item-title{font-size: 13.5px;font-weight: 800;color: #1f6f8b;margin-bottom: 2px;}.notif-item-desc{font-size: 12px;color: #64748b;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 1.4;}.notif-item-time{font-size: 10px;color: #475569;margin-top: 5px;font-weight: 600;}.notif-empty{padding: 50px 20px;text-align: center;color: #475569;}.notif-empty i{font-size: 40px;margin-bottom: 12px;opacity: 0.3;}.notif-empty p{font-size: 14px;font-weight: 500;}.notif-footer{padding: 14px;text-align: center;background: rgba(0,0,0,0.02);border-top: 1px solid rgba(0,0,0,0.04);}.notif-footer a{font-size: 12px;color: #1f6f8b;text-decoration: none;font-weight: 700;}@media (max-width: 768px){.notif-dropdown{position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: #ffffff;border-radius: 0;z-index: 9999;right: 0;bottom: 0;animation: dropdownSlideIn 0.3s cubic-bezier(0.19,1,0.22,1);}@keyframes dropdownSlideIn{from{transform: translateX(100%);}to{transform: translateX(0);}}.notif-dropdown.show{display: flex !important;}.notif-close-mobile{display: block;}.notif-body{max-height: none;flex: 1;}.notif-header{padding: 20px;background: #fff;position: sticky;top: 0;z-index: 10;}.notif-footer{padding: 20px;background: #fff;position: sticky;bottom: 0;z-index: 10;}}.topbar{transition:transform .25s ease;}.topbar.hide{transform:translateY(-120%);}.card{background: #fff;padding: 24px;border-radius: var(--border-radius-premium);border: none;box-shadow: var(--shadow-premium);margin-bottom: 20px;}.btn-add{background: var(--success-color);color:#fff !important;padding:10px 22px;border-radius: var(--border-radius-premium);border:none;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px;text-decoration:none !important;transition:all .2s ease;box-shadow: 0 4px 10px rgba(46,125,50,0.15);}.btn-add:hover{background: var(--success-hover);transform:translateY(-1.5px);box-shadow: 0 6px 15px rgba(46,125,50,0.25);}.btn-add:active{transform:translateY(0);box-shadow:none;}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}.user-avatar{margin-bottom:10px;width:40px;height:40px;border-radius:50%;object-fit:cover;}.user-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}.user-email{font-size:13px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}.table-responsive{width: 100%;overflow-x: auto;-webkit-overflow-scrolling: touch;margin-top: 15px;border-radius: 12px;}table{width: 100%;border-collapse: collapse;background: transparent;table-layout: auto;}th{text-align: left;padding: 8px 6px;background: #f8fafc;font-weight: 800;color: #64748b;border-bottom: 2px solid #f1f5f9;font-size: 11px;text-transform: uppercase;letter-spacing: 0.8px;white-space: nowrap;}td{padding: 8px 6px;border-bottom: 1px solid #f1f5f9;vertical-align: middle;word-break: break-word;color: #334155;font-size: 11.5px;}td{padding:12px 10px;border-bottom:1px solid #eef2f6;vertical-align:middle;word-break: break-word;}table tbody tr{transition: background .15s ease;}table tbody tr:hover{background:#eef6fa;transform:scale(1.002);}.user-cell{display:flex;align-items:center;gap:8px;}.user-info{display:flex;flex-direction:column;overflow:hidden;}.user-name{font-weight:600;}.user-email{font-size:13px;color:#777;}.btn-danger{background: var(--danger-color);color:#fff !important;border:none;padding:7px 16px;border-radius: 10px;font-size:12.5px;font-weight: 700;cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;align-items: center;gap: 5px;transition:all .2s ease;box-shadow: 0 3px 8px rgba(239,68,68,0.1);}.btn-danger:hover{background: var(--danger-hover);transform:translateY(-1px);box-shadow: 0 5px 12px rgba(239,68,68,0.2);}.btn-aktifkan{background: var(--success-color);color:#fff !important;padding:7px 16px;border-radius: 10px;font-size:12.5px;font-weight: 700;text-decoration:none;display:inline-flex;align-items: center;gap: 5px;transition:all .2s ease;box-shadow: 0 3px 8px rgba(46,125,50,0.1);}.btn-aktifkan:hover{background: var(--success-hover);transform:translateY(-1px);box-shadow: 0 5px 12px rgba(46,125,50,0.2);}.btn-info{background: var(--primary-color);color: #fff !important;padding: 7px 16px;border-radius: 10px;font-size: 12.5px;font-weight: 700;text-decoration: none;display: inline-flex;align-items: center;gap: 5px;transition: all .2s ease;box-shadow: 0 3px 8px rgba(31,111,139,0.1);}.btn-info:hover{background: var(--primary-hover);transform: translateY(-1px);box-shadow: 0 5px 12px rgba(31,111,139,0.2);}.table-tools{display:flex;align-items:center;justify-content:space-between;margin-top:5px;margin-bottom:8px;}.search-form{display:flex;align-items:center;gap:12px;margin: 0;}.search-input{height:36px;width:220px;padding:0 16px;border:1px solid #e0e6eb;border-radius:10px;font-size:14px;background:#fff;transition:all .2s;}.search-input:focus{outline:none;border-color:#1f6f8b;box-shadow:0 0 0 3px rgba(31,111,139,.15);}.search-btn{height:36px;padding:0 22px;background: var(--primary-color);color:#fff;border:none;border-radius: 10px;font-size:14px;cursor:pointer;font-weight:700;transition: all .2s ease;box-shadow: 0 3px 8px rgba(31,111,139,0.1);}.search-select{height:36px;padding:0 12px;border:1px solid #e0e6eb;border-radius:10px;font-size:14px;background:#fff;min-width:130px;outline:none;}.search-select:focus{border-color:#1f6f8b;box-shadow:0 0 0 3px rgba(31,111,139,.15);}.search-btn:hover{background: var(--primary-hover);transform: translateY(-1px);box-shadow: 0 5px 12px rgba(31,111,139,0.2);}.search-reset{height:36px;padding:0 18px;background:#e0e6eb;color:#333;border-radius:10px;display:flex;align-items:center;text-decoration:none;font-size:14px;}.search-reset:hover{background:#d1d9e0;}.table-info{font-size:14px;color:#666;}.pagination{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}.pagination li a,.pagination li span{display:block;padding:6px 12px;border-radius:6px;background:#f1f4f7;border:1px solid #e0e6eb;color:#333;text-decoration:none;font-size:14px;}.pagination li.active span{background:#1f6f8b;color:#fff;border-color:#1f6f8b;}.pagination li a:hover{background:#e6edf2;}.pagination li{display:inline-flex;align-items:center;}.pagination li span,.pagination li a{display:flex;align-items:center;justify-content:center;height:34px;min-width:34px;}.pagination-box{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}.pagination-box p{margin:0;}.pagination{align-items:flex-end;}.pagination li a[rel="prev"],.pagination li a[rel="next"]{background:#1f6f8b;color:#fff;border-color:#1f6f8b;}.pagination li a[rel="prev"]:hover,.pagination li a[rel="next"]:hover{background:#14586e;}.pagination-box nav div:first-child{display:none;}.badge{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;}.badge-aktif{background:#e8f5e9;color:#2e7d32;}.badge-nonaktif{background:#fef2f2;color:#ef4444;border: 1px solid rgba(239,68,68,0.1);}.user-avatar-default{width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:20px;text-transform:uppercase;box-shadow:0 2px 4px rgba(0,0,0,.15);}.avatar-blue{background:#1f6f8b;}.avatar-green{background:#2e7d32;}.avatar-purple{background:#7b1fa2;}.avatar-orange{background:#ef6c00;}.avatar-red{background:#c62828;}.search-select{height:36px;padding:0 40px 0 14px;border:1px solid #dbe2e8;border-radius:10px;font-size:14px;background:#fff;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;transition:all .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px;}.search-select:hover{border-color:#1f6f8b;}.search-select:focus{outline:none;border-color:#1f6f8b;box-shadow:0 0 0 3px rgba(31,111,139,.15);}.search-select option{padding:10px;}.table-footer{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:15px;border-top:1px solid #e5e7eb;}.per-page-wrapper{display:flex;align-items:center;gap:8px;}.per-page-label{font-size:14px;color:#666;}.per-page-form{margin:0;}.per-page-select{height:34px;padding:0 26px 0 10px;border:1px solid #e0e6eb;border-radius:6px;font-size:13px;background:#fff;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:12px;}.per-page-select:hover{border-color:#1f6f8b;}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}.page-title{font-size:20px;font-weight:700;color:#0f172a;margin-bottom:2px;position:relative;padding-left:14px;}.page-title:before{content:"";position:absolute;left:0;top:4px;height:18px;width:4px;background:#1f6f8b;border-radius:4px;}.page-info{display:flex;align-items:center;gap:6px;font-size:13px;color:#334155;margin-top:2px;margin-bottom:8px;}.page-info b{background:#e3f2f6;padding:4px 10px;border-radius:8px;color:#1f6f8b;font-weight:700;font-size:14px;margin-left:6px;display:inline-block;}table{width:100%;border-collapse:collapse;margin-top:10px;}.topbar-logo{height: 60px;display:block;margin-bottom:4px;}.form-container{max-width:720px;margin:10px auto;}.form-title{font-size:20px;font-weight:700;margin-bottom:20px;}.form-group{display:flex;flex-direction:column;margin-bottom:16px;}.form-group label{font-size:14px;font-weight:600;margin-bottom:6px;color:#333;}.form-input{height:38px;padding:0 12px;border:1px solid #dbe2e8;border-radius:8px;font-family: inherit;font-size:14px;background:#ffffff;transition:all .2s ease;}.form-input:hover{border-color:#b8c6cf;}.form-input:focus{outline:none;border-color:#1f6f8b;box-shadow:0 0 0 3px rgba(31,111,139,.15);}.form-actions{display:flex;align-items:center;gap:12px;margin-top:20px;}.btn-cancel{background:#e5e7eb;color:#374151;padding:9px 18px;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;border:1px solid #d1d5db;transition:all .2s;}.btn-cancel:hover{background:#d1d5db;}.form-wrapper{max-width:720px;}.topbar-left{display:flex;align-items:center;gap:16px;}.school-motto{display:flex;flex-direction:column;line-height:1.15;}.school-title{font-size:16px;font-weight:800;letter-spacing:1.2px;background:linear-gradient( 90deg,#1f6f8b,#2e7d32,#ef6c00,#1f6f8b );background-size:300% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:schoolGradient 12s linear infinite;}.school-values{font-size:12px;font-weight:600;color:#334155;letter-spacing:.6px;opacity:.95;}@keyframes schoolGradient{0%{background-position:0% center;}100%{background-position:300% center;}}.topbar-left:hover .school-values{color:#1f6f8b;letter-spacing:1px;transition:all .35s ease;}.profile-info{display:flex;flex-direction:column;line-height:1.2;}.profile-title{font-size:15px;font-weight:700;color:#ffffff;}.profile-subtitle{font-size:12px;color:#cfe5ec;font-weight:600;margin-top:2px;}.logout{margin-top:auto;padding-top:15px;border-top: 1px solid rgba(255,255,255,0.1);}.logout-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;background:#ffffff;color:#1f6f8b;text-decoration:none;border-radius:10px;font-size:14px;font-weight:700;transition:all .2s ease;}.logout-btn:hover{background:#f1f7fa;transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.12);}input[type="file"]{font-size:14px;color:#555;border:1px solid #dbe2e8;border-radius:8px;padding:6px;background:#fff;}input[type="file"]::file-selector-button{background:#1f6f8b;color:#fff;border:none;padding:7px 14px;border-radius:6px;margin-right:10px;font-weight:600;cursor:pointer;transition:.2s;}input[type="file"]::file-selector-button:hover{background:#14586e;}.cropper-container{width:100%;max-height:380px;}.cropper-view-box,.cropper-face{border-radius:50%;}.profile-photo-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:10px;}.profile-avatar{width:110px;height:110px;border-radius:50%;object-fit:cover;margin-bottom:6px;}.avatar-upload{position:relative;display:inline-block;cursor:pointer;}.profile-avatar{width:110px;height:110px;border-radius:50%;object-fit:cover;transition:.2s;}.profile-avatar:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.2);}.avatar-camera{position:absolute;bottom:0;right:0;background:#1f6f8b;color:white;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 2px 6px rgba(0,0,0,.3);}.avatar-text{display:block;font-size:12px;color:#666;margin-top:6px;}.avatar-initial{background:#1f6f8b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;width:110px;height:110px;border-radius:50%;}.stat-grid{display: grid;grid-template-columns: repeat(4,1fr);gap: 20px;margin-bottom: 24px;}@media (max-width: 1024px){.stat-grid{grid-template-columns: repeat(2,1fr);}}@media (max-width: 640px){.stat-grid{grid-template-columns: 1fr;}}.dashboard-row{display: grid;grid-template-columns: 2fr 1fr;gap: 12px;align-items: start;}@media (max-width: 992px){.dashboard-row{grid-template-columns: 1fr;}}.small-box{border-radius: 20px;display: block;position: relative;overflow: hidden;color: #fff;transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);border: 1px solid rgba(255,255,255,0.1);box-shadow: inset 0 1px 2px rgba(255,255,255,0.2),0 10px 15px -3px rgba(0,0,0,0.1);}.small-box:hover{transform: translateY(-8px) scale(1.02);}.small-box.bg-info{background: linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%);box-shadow: 0 10px 25px -5px rgba(14,165,233,0.4);}.small-box.bg-success{background: linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow: 0 10px 25px -5px rgba(16,185,129,0.4);}.small-box.bg-warning{background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%);box-shadow: 0 10px 25px -5px rgba(245,158,11,0.4);}.small-box.bg-danger{background: linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow: 0 10px 25px -5px rgba(239,68,68,0.4);}.small-box.bg-warning p,.small-box.bg-warning h3,.small-box.bg-warning .small-box-footer{color: #fff !important;}.small-box .inner{padding: 12px 18px;position: relative;z-index: 2;}.small-box h3{font-size: 30px;font-weight: 800;letter-spacing: -1.2px;margin-bottom: 2px;line-height: 1.1;}.small-box p{font-size: 11px;opacity: 0.85;letter-spacing: 0.4px;font-weight: 700;text-transform: uppercase;margin: 0;}.small-box .icon{position: absolute;right: 12px;top: 10px;opacity: 0.15;transition: all 0.5s ease;z-index: 1;color: #fff;}.small-box .icon i{font-size: 55px;}.small-box:hover .icon{transform: scale(1.15) rotate(-12deg);opacity: 0.28;}.small-box .small-box-footer{background: rgba(0,0,0,0.12);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);padding: 6px 0;color: rgba(255,255,255,0.9);display: flex !important;align-items: center;justify-content: center;gap: 7px;text-decoration: none;font-size: 11.5px;font-weight: 700;transition: all 0.3s ease;border-top: 1px solid rgba(255,255,255,0.08);}.small-box .small-box-footer:hover{background: rgba(0,0,0,0.25);color: #fff;}.small-box .small-box-footer i{transition: transform 0.3s ease;}.small-box:hover .small-box-footer i{transform: translateX(4px);}.info-box{box-shadow: 0 2px 4px rgba(0,0,0,0.08);border-radius: 8px;background-color: #fff;display: flex;margin-bottom: 20px;min-height: 80px;padding: 0.5rem;position: relative;width: 100%;border: 1px solid #e2e8f0;}.info-box .info-box-icon{border-radius: 6px;align-items: center;display: flex;font-size: 1.875rem;justify-content: center;text-align: center;width: 70px;color: #fff;}.info-box-content{display: flex;flex-direction: column;justify-content: center;line-height: 1.2;flex: 1;padding: 0 10px;}.info-box-text{display: block;font-size: 14px;font-weight: 600;color: #64748b;margin-bottom: 4px;}.info-box-number{display: block;font-weight: 700;font-size: 20px;color: #0f172a;}.activity-card{background: #ffffff;border-radius: 12px;padding: 24px;border: 1px solid #e2e8f0;box-shadow: 0 2px 4px rgba(0,0,0,0.02);}.activity-card-title{font-size: 16px;font-weight: 700;color: #0f172a;margin-bottom: 20px;display: flex;align-items: center;}.activity-card-title span{border-left: 4px solid #ef6c00;padding-left: 10px;}.activity-list{max-height: 300px;overflow-y: auto;padding-right: 15px;}.activity-list::-webkit-scrollbar{width: 6px;}.activity-list::-webkit-scrollbar-track{background: #f1f5f9;border-radius: 10px;}.activity-list::-webkit-scrollbar-thumb{background: #cbd5e1;border-radius: 10px;}.activity-list::-webkit-scrollbar-thumb:hover{background: #475569;}.activity-item{margin-bottom: 12px;padding-bottom: 12px;border-bottom: 1px solid #f1f5f9;display: flex;justify-content: space-between;align-items: center;}.activity-item:last-child{border-bottom: none;margin-bottom: 0;padding-bottom: 0;}.activity-text{font-size: 14px;font-weight: 500;color: #334155;margin-bottom: 2px;}.activity-time{font-size: 12px;color: #475569;white-space: nowrap;}.quick-access-card{background: #ffffff;border-radius: 12px;padding: 24px;border: 1px solid #e2e8f0;box-shadow: 0 2px 4px rgba(0,0,0,0.02);}.quick-access-title{font-size: 16px;font-weight: 700;color: #0f172a;margin-bottom: 20px;border-left: 4px solid #2e7d32;padding-left: 10px;}.quick-access-grid{display: flex;flex-direction: column;gap: 10px;}.quick-access-btn{background: #f8fafc;color: #64748b;text-align: left;padding: 12px 16px;border-radius: 8px;text-decoration: none;font-size: 14px;font-weight: 500;border: 1px solid #e2e8f0;transition: all 0.2s ease;display: flex;align-items: center;justify-content: space-between;}.quick-access-btn::after{content: "→";color: #475569;font-weight: bold;transition: transform 0.2s ease;}.quick-access-btn:hover{background: #1f6f8b;color: #ffffff;border-color: #1f6f8b;}.quick-access-btn:hover::after{color: #ffffff;transform: translateX(4px);}@media (max-width: 768px){.quick-access-grid{grid-template-columns: 1fr;}}.detail-header{background: rgba(255,255,255,0.95);backdrop-filter: blur(8px);padding: 20px 25px;border-radius: 14px;box-shadow: 0 4px 15px rgba(0,0,0,0.05);display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;border: 1px solid #e2e8f0;}.detail-header .page-title{font-size: 22px;font-weight: 800;color: #0f172a;margin-bottom: 5px;}.detail-header .page-info{font-size: 14px;color: #64748b;margin-bottom: 0;}.btn-back{background: #ffffff;color: #475569;border: 1px solid #cbd5e1;padding: 10px 18px;border-radius: 10px;text-decoration: none;font-weight: 600;font-size: 14px;transition: all 0.2s;display: flex;align-items: center;gap: 8px;box-shadow: 0 2px 5px rgba(0,0,0,0.02);}.btn-back:hover{background: #f8fafc;color: #0f172a;border-color: #475569;transform: translateY(-1px);}.detail-grid{display: grid;grid-template-columns: 1fr 2.3fr;gap: 25px;align-items: stretch;}.profile-card-detail{display: flex;flex-direction: column;align-items: center;text-align: center;padding: 40px 25px;}.detail-avatar{width: 140px;height: 140px;border-radius: 50%;object-fit: cover;box-shadow: 0 8px 25px rgba(31,111,139,0.15);margin-bottom: 18px;border: 4px solid #fff;}.detail-avatar-default{width: 140px;height: 140px;font-size: 56px;box-shadow: 0 8px 25px rgba(31,111,139,0.15);margin-bottom: 18px;border: 4px solid #fff;}.detail-name{font-weight: 800;margin-bottom: 5px;color: #0f172a;font-size: 20px;}.detail-email{color: #64748b;font-size: 14px;margin-bottom: 15px;}.detail-badges{display: flex;gap: 10px;margin-bottom: 25px;}.badge-role{background: #e3f2f6;color: #1f6f8b;padding: 6px 14px;font-size: 13px;border-radius: 20px;font-weight: 600;}.detail-meta-box{width: 100%;text-align: left;background: #f8fafc;padding: 18px;border-radius: 12px;font-size: 13px;color: #475569;border: 1px solid #e2e8f0;}.meta-row{display: flex;justify-content: space-between;margin-bottom: 12px;border-bottom: 1px solid #cbd5e1;padding-bottom: 8px;}.meta-row:last-child{margin-bottom: 0;border-bottom: none;padding-bottom: 0;}.meta-val{color: #0f172a;font-weight: 600;}.meta-val-success{color: #2e7d32;font-weight: 700;}.meta-val-danger{color: #ef4444;font-weight: 500;font-style: italic;}.meta-sub-val{color: #475569;font-size: 11px;}.detail-actions{width: 100%;margin-top: 25px;display: flex;flex-direction: column;gap: 12px;}.btn-block-action{width: 100%;text-align: center;padding: 12px;font-weight: 600;display: flex;justify-content: center;align-items: center;gap: 8px;border-radius: 10px;}.btn-block-action.btn-info{background: #1f6f8b;color: white;text-decoration: none;transition: 0.2s;border: none;}.btn-block-action.btn-info:hover{background: #14586e;transform: translateY(-1px);}.btn-block-action.btn-cancel{background: #ffffff;color: #475569;border: 1px solid #d1d5db;text-decoration: none;transition: 0.2s;}.btn-block-action.btn-cancel:hover{background: #f1f5f9;color: #1e293b;}.detail-content-card{padding: 35px 40px;border-top: 5px solid #1f6f8b;}.detail-section-title{font-weight: 800;color: #0f172a;margin-bottom: 25px;border-bottom: 1px solid #e2e8f0;padding-bottom: 15px;font-size: 18px;display: flex;align-items: center;}.detail-section-title i{color: #1f6f8b;margin-right: 10px;font-size: 20px;}.detail-info-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin-bottom: 25px;}.info-label{color: #64748b;font-size: 13px;margin-bottom: 8px;display: block;font-weight: 500;}.info-val-box{font-size: 16px;font-weight: 700;color: #1e293b;background: #f1f5f9;padding: 12px 18px;border-radius: 10px;border: 1px solid #e2e8f0;}.info-val-border{font-size: 16px;font-weight: 700;color: #1e293b;border: 2px dashed #cbd5e1;padding: 18px;border-radius: 10px;}.info-val-warning{font-size: 16px;font-weight: 700;color: #1e293b;background: #fff3e0;padding: 15px 20px;border-radius: 10px;border-left: 4px solid #ef6c00;}.info-val-primary{font-size: 16px;font-weight: 700;color: #0f172a;background: #e3f2fd;padding: 18px 20px;border-radius: 10px;border-left: 4px solid #1f6f8b;display: flex;align-items: center;gap: 10px;}.info-val-large{font-size: 32px;font-weight: 800;color: #2e7d32;display: flex;align-items: baseline;gap: 8px;}.info-val-large span{font-size: 15px;font-weight: 600;color: #64748b;}.badge-career{background: #e8f5e9;color: #2e7d32;font-size: 14px;padding: 8px 16px;border-radius: 8px;display: inline-flex;align-items: center;gap: 8px;font-weight: 700;border: 1px solid #c8e6c9;}.link-btn-soft{display: inline-flex;align-items: center;gap: 8px;margin-top: 5px;background: #e3f2f6;color: #1f6f8b;font-weight: 700;padding: 10px 18px;border-radius: 8px;text-decoration: none;transition: 0.2s;}.link-btn-soft:hover{background: #d0e8f0;color: #14586e;transform: translateX(4px);}.text-empty{color: #475569;font-weight: 500;font-style: italic;}.beranda-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 30px;align-items: stretch;}.card-beranda{padding: 35px;display: flex;flex-direction: column;height: 100%;}.card-title-beranda{font-weight: 800;color: #1f6f8b;margin-bottom: 30px;font-size: 20px;border-bottom: 2px solid #f1f5f9;padding-bottom: 15px;}.section-subtitle-beranda{font-weight: 700;color: #334155;margin-bottom: 20px;font-size: 16px;display: flex;align-items: center;gap: 8px;}.section-subtitle-beranda i{color: #1f6f8b;}.textarea-beranda{flex: 1;min-height: 180px;padding: 15px;resize: vertical;}.image-preview-beranda{margin-bottom: 15px;border-radius: 12px;overflow: hidden;border: 2px dashed #cbd5e1;height: 160px;width: 100%;background: #f8fafc;}.image-preview-beranda img{width: 100%;height: 100%;object-fit: cover;}.btn-cancel-image{position: absolute;top: 10px;right: 10px;background: rgba(255,255,255,0.9);border: none;border-radius: 50%;width: 32px;height: 32px;cursor: pointer;display: flex;align-items: center;justify-content: center;color: #ef4444;box-shadow: 0 2px 4px rgba(0,0,0,0.15);transition: all 0.2s;z-index: 10;}.btn-cancel-image:hover{background: #ef4444;color: #ffffff;transform: scale(1.1);}.file-drop-area{background: #f8fafc;border: 1px solid #cbd5e1;border-radius: 10px;padding: 8px;}.file-input-beranda{width: 100%;color: #64748b;font-size: 13px;cursor: pointer;}.file-input-beranda::file-selector-button{background: #e2e8f0;color: #475569;border: none;padding: 8px 16px;border-radius: 6px;margin-right: 15px;font-weight: 600;cursor: pointer;transition: 0.2s;}.file-input-beranda::file-selector-button:hover{background: #cbd5e1;}.action-right{text-align: right;margin-top: 25px;padding-top: 20px;border-top: 1px solid #f1f5f9;}.footer-grid{display: grid;grid-template-columns: 1fr 1.2fr;gap: 30px;}.maps-preview{background: #f1f5f9;height: 150px;border-radius: 10px;margin-bottom: 15px;display: flex;align-items: center;justify-content: center;overflow: hidden;border: 1px solid #cbd5e1;}.maps-preview i{font-size: 40px;color: #cbd5e1;}.label-small{font-size: 12px;color: #64748b;margin-bottom: 8px;display: block;line-height: 1.4;}.label-heading{font-size: 14px;color: #475569;font-weight: 700;display: block;margin-bottom: 12px;}.textarea-maps{height: 80px;resize: none;font-size: 12px;line-height: 1.5;background: #f8fafc;}.maps-preview iframe{width: 100% !important;height: 100% !important;border: none !important;}.form-group-sm{margin-bottom: 15px;}.form-group-sm label{font-size: 13px;color: #64748b;margin-bottom: 6px;display: block;font-weight: 600;}.input-sm{height: 38px;font-size: 13px;background: #f8fafc;}.flex-grow-1{flex: 1;}.mt-auto{margin-top: auto;}.mt-4{margin-top: 30px;}.mb-2{margin-bottom: 12px;}.card-lowongan{margin-top: 25px;padding: 30px;border-radius: 20px;border: none;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05),0 2px 4px -1px rgba(0,0,0,0.03);background: #ffffff;}.title-lowongan{font-weight: 700;color: #000000;font-size: 20px;margin-bottom: 25px;}.filter-lowongan-group{display: flex;gap: 15px;margin-bottom: 25px;}.input-cari-lowongan{flex: 2;height: 45px;border-radius: 25px;padding-left: 20px;border: 1px solid #cbd5e1;font-size: 14px;color: #334155;outline: none;}.input-cari-lowongan:focus{border-color: #3b82f6;box-shadow: 0 0 0 3px rgba(59,130,246,0.1);}.select-filter-lowongan{flex: 1;height: 45px;border-radius: 25px;padding-left: 20px;border: 1px solid #cbd5e1;font-size: 14px;color: #334155;outline: none;appearance: none;background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right 15px center;background-color: #fff;cursor: pointer;}.select-filter-lowongan:focus{border-color: #3b82f6;box-shadow: 0 0 0 3px rgba(59,130,246,0.1);}table.table-lowongan{width: 100%;border-collapse: collapse;}table.table-lowongan th{padding: 15px 10px;color: #000;font-weight: 700;font-size: 14px;text-align: left;border-bottom: 2px solid #e2e8f0;}table.table-lowongan td{padding: 15px 10px;color: #334155;font-size: 14px;border-bottom: 1px solid #e2e8f0;}.btn-action-view{padding: 6px 16px;border: 1px solid #cbd5e1;border-radius: 18px;color: #475569;text-decoration: none;font-size: 13px;font-weight: 600;transition: all 0.2s;background: transparent;display: inline-block;}.btn-action-view:hover{background: #f8fafc;color: #0f172a;}.btn-action-delete{padding: 6px 16px;border: none;background: #e2e8f0;border-radius: 18px;color: #475569;font-size: 13px;font-weight: 600;cursor: pointer;transition: all 0.2s;display: inline-block;}.btn-action-delete:hover{background: #cbd5e1;color: #0f172a;}.lowongan-action-group{display: flex;gap: 10px;}.alert-flash{padding: 12px 20px;border-radius: 8px;margin-bottom: 20px;font-size: 14px;font-weight: 600;display: flex;align-items: center;gap: 8px;opacity: 1;transition: opacity 0.5s ease;}.alert-flash.alert-success{background: #e8f5e9;color: #2e7d32;border: 1px solid #c8e6c9;}.alert-flash.alert-danger{background: #ffebee;color: #c62828;border: 1px solid #ffcdd2;}.alert-flash.alert-warning{background: #fff8e1;color: #f57f17;border: 1px solid #ffecb3;}.page-tabs{display: flex;gap: 25px;border-bottom: 2px solid #e2e8f0;align-items: flex-end;margin-right: 15px;}.tab-item{font-size: 16px;font-weight: 500;color: #64748b;text-decoration: none;padding-bottom: 8px;border-bottom: 3px solid transparent;transition: all 0.2s;margin-bottom: -2px;}.tab-item:hover{color: #0f172a;}.tab-item.active{color: #0f172a;font-weight: 700;border-bottom-color: #0f172a;}.catatan-form{display: flex;flex-direction: column;gap: 15px;margin-top: 10px;}.catatan-form .form-group{display: flex;flex-direction: column;gap: 8px;}.catatan-form label{font-size: 15px;font-weight: 600;color: #0f172a;}.catatan-form .form-input,.catatan-form .form-select{width: 100%;padding: 12px 16px;border: 1px solid #cbd5e1;border-radius: 12px;font-size: 14px;background: #fff;transition: all .2s;font-family: inherit;color: #334155;box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);}.catatan-form textarea.form-input{resize: vertical;min-height: 100px;}.catatan-form .form-input:focus,.catatan-form .form-select:focus{outline: none;border-color: #1f6f8b;box-shadow: 0 0 0 3px rgba(31,111,139,.15);}.catatan-form .form-select{appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 14px center;background-size: 16px;padding-right: 40px;cursor: pointer;}.btn-send{background: #1f6f8b;color: #ffffff;border: none;padding: 10px 28px;border-radius: 10px;font-weight: 600;font-size: 14px;cursor: pointer;transition: all 0.2s ease;}.btn-send:hover{background: #14586e;}.faq-list{display: flex;flex-direction: column;gap: 16px;}.faq-card{border: 1px solid #dbe2e8;border-radius: 12px;padding: 18px 20px;background: #fff;transition: all 0.2s;}.faq-card:hover{box-shadow: 0 4px 12px rgba(0,0,0,0.04);border-color: #1f6f8b;}.faq-question{font-size: 16px;font-weight: 700;color: #0f172a;margin-bottom: 6px;}.faq-answer{font-size: 15px;color: #475569;margin-bottom: 18px;line-height: 1.5;}.faq-actions{display: flex;gap: 10px;}.laporan-header{display: grid;grid-template-columns: 2fr 1fr 1fr;font-weight: 700;color: #0f172a;font-size: 15px;padding-bottom: 12px;border-bottom: 2px solid #e2e8f0;margin-bottom: 10px;}.laporan-item{display: grid;grid-template-columns: 2fr 1fr 1fr;align-items: center;padding: 18px 0;border-bottom: 1px solid #e2e8f0;}.laporan-item:last-child{border-bottom: none;}.laporan-title{font-weight: 600;color: #334155;font-size: 15px;}.laporan-filter select{width: 160px;padding: 8px 14px;border: 1px solid #cbd5e1;border-radius: 8px;font-size: 14px;color: #475569;background: #fff;cursor: pointer;outline: none;appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 12px center;background-size: 14px;transition: all 0.2s;font-family: inherit;}.laporan-filter select:focus{border-color: #1f6f8b;box-shadow: 0 0 0 3px rgba(31,111,139,.15);}.laporan-actions{display: flex;gap: 10px;}.btn-lihat{background: #fff;color: #1f6f8b;border: 1px solid #1f6f8b;padding: 8px 16px;border-radius: 8px;font-weight: 600;font-size: 13px;cursor: pointer;text-decoration: none;transition: all 0.2s;}.btn-lihat:hover{background: #f0f7f9;}.btn-cetak{background: #1f6f8b;color: #fff;border: 1px solid #1f6f8b;padding: 8px 16px;border-radius: 8px;font-weight: 600;font-size: 13px;cursor: pointer;text-decoration: none;transition: all 0.2s;}.btn-cetak:hover{background: #14586e;border-color: #14586e;}.dashboard-mitra-grid{display: flex;flex-direction: column;gap: 20px;}.mitra-metrics{display: grid;grid-template-columns: repeat(3,1fr);gap: 20px;}.mitra-metric-card{background: #fff;border-radius: 12px;padding: 25px 20px;text-align: center;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);}.mitra-metric-title{font-size: 16px;font-weight: 600;color: #475569;margin-bottom: 15px;}.mitra-metric-value{font-size: 38px;font-weight: 800;color: #0f172a;}.mitra-row{display: grid;grid-template-columns: 2fr 1fr;gap: 15px;}.mitra-card-title{font-size: 18px;font-weight: 700;color: #0f172a;padding-bottom: 12px;border-bottom: 1px solid #e2e8f0;margin-bottom: 15px;}.btn-akses{display: block;width: 100%;margin-bottom: 12px;padding: 12px 15px;text-align: center;border-radius: 8px;font-weight: 600;font-size: 14px;text-decoration: none;background-color: #1f6f8b;color: #fff;transition: all 0.2s;}.btn-akses:hover{background-color: #14586e;color: #fff;}.btn-akses.outline{background-color: transparent;color: #1f6f8b;border: 1px solid #1f6f8b;}.btn-akses.outline:hover{background-color: #f0f7f9;}.btn-kelola-semua{float: right;font-size: 12px;padding: 6px 14px;background: #1f6f8b;color: white;border-radius: 6px;text-decoration: none;font-weight: 600;margin-top: -3px;}.btn-kelola-semua:hover{background: #14586e;}.mitra-table{width: 100%;border-collapse: collapse;}.mitra-table th{font-size: 14px;font-weight: 700;color: #0f172a;padding-bottom: 12px;text-align: left;}.mitra-table td{padding: 12px 0;border-bottom: 1px solid #e2e8f0;color: #475569;font-size: 14px;}.mitra-table tr:last-child td{border-bottom: none;}.aktivitas-list{display: flex;flex-direction: column;gap: 15px;}.aktivitas-item{font-size: 14px;color: #334155;line-height: 1.5;}.aktivitas-date{color: #64748b;margin-right: 5px;}.saran-list{padding-left: 20px;margin: 0;color: #334155;font-size: 14px;display: flex;flex-direction: column;gap: 10px;line-height: 1.5;}.badge-published{background: #e0f2fe;color: #0369a1;}.badge-draft{background: #f1f5f9;color: #475569;}.btn-action-sm{padding: 6px 14px;border-radius: 8px;font-size: 13px;font-weight: 600;text-decoration: none;display: inline-flex;align-items: center;gap: 5px;border: none;cursor: pointer;transition: all 0.2s;font-family: inherit;white-space: nowrap;}.btn-edit-sm{background: rgba(31,111,139,0.1);color: #1f6f8b;}.btn-edit-sm:hover{background: rgba(31,111,139,0.2);}.btn-close-sm{background: #e53935;color: #fff;}.btn-close-sm:hover{background: #b91c1c;}.btn-extend-sm{background: #2e7d32;color: #fff;}.btn-extend-sm:hover{background: #256628;}.btn-delete-sm{background: #fee2e2;color: #b91c1c;padding: 8px;border-radius: 8px;display: inline-flex;align-items: center;justify-content: center;width: 32px;height: 32px;}.btn-delete-sm:hover{background: #fecaca;}.modal{display: none;position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.4);backdrop-filter: blur(4px);transition: all 0.3s;}.modal-content{background-color: #fff;margin: 5% auto;padding: 0;border: 1px solid #e2e8f0;width: 550px;border-radius: 16px;box-shadow: 0 10px 25px rgba(0,0,0,0.1);position: relative;animation: slideIn 0.3s ease-out;}@keyframes slideIn{from{transform: translateY(-30px);opacity: 0;}to{transform: translateY(0);opacity: 1;}}.modal-header{padding: 18px 25px;border-bottom: 1px solid #edf2f7;display: flex;justify-content: space-between;align-items: center;}.modal-header h2{margin: 0;font-size: 18px;font-weight: 700;color: #0f172a;}.modal-close{color: #475569;font-size: 24px;font-weight: bold;cursor: pointer;transition: 0.2s;}.modal-close:hover{color: #475569;}.modal-body{padding: 25px;}.modal-footer{padding: 15px 25px;border-top: 1px solid #edf2f7;text-align: right;display: flex;justify-content: flex-end;gap: 10px;}.btn-cancel{background: #f1f5f9;color: #475569;border: none;padding: 10px 20px;border-radius: 10px;font-weight: 600;cursor: pointer;transition: 0.2s;}.btn-cancel:hover{background: #e2e8f0;}.form-group-modal{margin-bottom: 18px;}.form-group-modal label{display: block;font-size: 14px;font-weight: 600;color: #334155;margin-bottom: 8px;}.form-input-modal{width: 100%;padding: 12px 16px;border: 1px solid #cbd5e1;border-radius: 10px;font-size: 14px;background: #fff;transition: all 0.2s;}.form-input-modal:focus{outline: none;border-color: #1f6f8b;box-shadow: 0 0 0 3px rgba(31,111,139,.15);}.laporan-container{padding: 10px 5px;}.report-filter-card{background: #fff;border-radius: 16px;padding: 25px;margin-bottom: 25px;box-shadow: 0 4px 15px rgba(0,0,0,0.05);border: 1px solid #e2e8f0;}.filter-row{display: grid;grid-template-columns: 1fr 1fr auto;gap: 20px;align-items: flex-end;}.filter-group{display: flex;flex-direction: column;gap: 8px;}.filter-group label{font-size: 14px;font-weight: 700;color: #475569;}.report-table-card{background: #fff;border-radius: 16px;padding: 0;box-shadow: 0 4px 15px rgba(0,0,0,0.05);border: 1px solid #e2e8f0;overflow: hidden;}.report-header-area{padding: 20px 25px;border-bottom: 1px solid #edf2f7;display: flex;justify-content: space-between;align-items: center;background: #f8fafc;}.report-header-area h3{margin: 0;font-size: 18px;color: #0f172a;font-weight: 700;}.btn-print{background: #1f6f8b;color: #fff;padding: 10px 20px;border-radius: 10px;border: none;font-weight: 600;display: inline-flex;align-items: center;gap: 8px;cursor: pointer;transition: 0.2s;}.btn-print:hover{background: #14586e;transform: translateY(-1px);}.report-table{width: 100%;border-collapse: collapse;}.report-table th{background: #f1f5f9;padding: 15px 20px;text-align: left;font-weight: 700;color: #475569;font-size: 13px;text-transform: uppercase;letter-spacing: 0.025em;}.report-table td{padding: 15px 20px;border-bottom: 1px solid #f1f5f9;color: #334155;font-size: 14px;vertical-align: middle;word-break: break-word;}.truncate-text{max-width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;}.report-table tr:hover{background: #f8fafc;}.report-empty{padding: 40px;text-align: center;color: #475569;}@media print{body *{visibility: hidden;}.report-table-card,.report-table-card *{visibility: visible;}.report-table-card{position: absolute;left: 0;top: 0;width: 100%;box-shadow: none;border: none;}.btn-print,.report-header-area::after{display: none !important;}.report-header-area{background: none;padding-bottom: 40px;}.sidebar,.topbar,.report-filter-card{display: none !important;}main{margin: 0 !important;padding: 0 !important;}}.badge{padding: 6px 14px;border-radius: 20px;font-size: 12px;font-weight: 700;display: inline-block;white-space: nowrap;}.truncate-text{max-width: 250px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;cursor: help;}@media print{.no-print,.sidebar,.topbar,.topbar-wrapper,.table-tools,.table-footer,.card-header{display: none !important;}body{background: white !important;}body.is-printing-detail > *:not(#print-wrapper){display: none !important;}body.is-printing-detail #print-wrapper{display: block !important;position: static !important;width: 100% !important;background: white !important;padding: 0 !important;margin: 0 !important;}#print-wrapper .modal-body{display: block !important;padding: 0 !important;}.badge{-webkit-print-color-adjust: exact !important;print-color-adjust: exact !important;}}.badge-status-menunggu{background:#fff8e1;color:#f57f17;}.badge-status-berjalan{background:#e3f2fd;color:#1565c0;}.badge-status-selesai{background:#e8f5e9;color:#2e7d32;}.badge-status-disetujui{background:#e8f5e9;color:#2e7d32;}.badge-status-ditolak,.badge-danger{background:#fef2f2;color:#ef4444;border: 1px solid rgba(239,68,68,0.1);}.badge-jenis-online{background:#e3f2fd;color:#1565c0;font-weight: 600;padding: 4px 8px;border-radius: 4px;}.badge-jenis-offline{background:#f5f7f9;color:#333;font-weight: 600;padding: 4px 8px;border-radius: 4px;border: 1px solid #dcdcdc;}.table-date-text{font-size: 13px;color: #64748b;}.empty-table-text{padding: 30px;text-align: center;color: #475569;font-size: 14px;}.tes-page-header{display: flex;justify-content: space-between;align-items: center;border-bottom: none;margin-bottom: 15px;}.tes-page-title{font-size: 16px;font-weight: bold;color: #111827;}.btn-secondary{background-color: #6c757d;color: white;border: none;padding: 6px 12px;border-radius: 6px;font-size: 13px;font-weight: 600;display: inline-flex;align-items: center;gap: 4px;text-decoration: none;cursor: pointer;transition: 0.2s;}.btn-secondary:hover{background-color: #5a6268;color: white;}.btn-outline{background-color: white;color: #374151;border: 1px solid #d1d5db;padding: 6px 12px;border-radius: 6px;font-size: 13px;font-weight: 600;display: inline-flex;align-items: center;gap: 4px;text-decoration: none;cursor: pointer;transition: 0.2s;}.btn-outline:hover{background-color: #f3f4f6;color: #374151;}.tes-list{display: flex;flex-direction: column;gap: 8px;}.tes-card{border: 1px solid #d1d5db;border-radius: 6px;padding: 12px 16px;display: flex;justify-content: space-between;align-items: center;background-color: white;transition: 0.2s;}.tes-card:hover{border-color: #9ca3af;box-shadow: 0 1px 2px rgba(0,0,0,0.05);}.tes-info-title{font-weight: bold;font-size: 14px;margin-bottom: 2px;color: #111827;}.tes-info-subtitle{font-size: 13px;color: #4b5563;}.tes-actions{display: flex;gap: 6px;}.tes-empty{text-align: center;color: #6b7280;padding: 15px;}.siswa-body{background-color: #f8fafc;background-image: none !important;margin: 0;font-family: 'Inter','Segoe UI',sans-serif;color: #0f172a;scroll-behavior: smooth;}body.siswa-body::before{display: none;}.siswa-container{max-width: 1240px;margin: 0 auto;padding: 0 24px;}.siswa-navbar{background: rgba(255,255,255,0.85);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);box-shadow: 0 4px 20px rgba(0,0,0,0.04);position: sticky;top: 0;z-index: 50;border-bottom: 1px solid rgba(226,232,240,0.8);transition: all 0.3s ease;}.nav-container{display: flex;justify-content: space-between;align-items: center;height: 80px;}.nav-logo{display: flex;align-items: center;gap: 16px;}.placeholder-logo{width: 48px;height: 48px;border-radius: 14px;background: linear-gradient(135deg,#0ea5e9,#3b82f6);box-shadow: 0 4px 12px rgba(14,165,233,0.3);display: flex;align-items: center;justify-content: center;color: white;font-size: 20px;}.nav-logo i{font-size: 24px;}.logo-text{font-size: 22px;font-weight: 800;background: linear-gradient(135deg,#0f172a,#334155);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;letter-spacing: -0.5px;}.nav-links{display: flex;list-style: none;gap: 35px;margin: 0;padding: 0;}.nav-links li a{text-decoration: none;color: #64748b;font-weight: 600;font-size: 15px;transition: all 0.3s ease;position: relative;padding: 8px 0;}.nav-links li a:hover{color: #e8470a;}.nav-links li a.active{color: #e8470a;}.nav-links li a.active::after{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background: linear-gradient(90deg,#c0392b,#e8470a,#f5a623);border-radius: 3px 3px 0 0;}.nav-links li a::after{content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 3px;background: #e8470a;border-radius: 3px 3px 0 0;transition: width 0.3s ease;}.nav-links li a:hover::after{width: 100%;}.btn-logout-siswa{background: linear-gradient(135deg,#c0392b,#e8470a);color: #ffffff;border: none;border-radius: 30px;padding: 10px 28px;font-weight: 600;font-size: 15px;cursor: pointer;box-shadow: 0 4px 15px rgba(192,57,43,0.3);transition: all 0.3s cubic-bezier(0.4,0,0.2,1);}.btn-logout-siswa:hover{transform: translateY(-2px);box-shadow: 0 6px 20px rgba(192,57,43,0.45);color: #ffffff;}}.siswa-hero::before{content: '';position: absolute;top: -10%;right: -5%;width: 500px;height: 500px;background: radial-gradient(circle,rgba(14,165,233,0.1) 0%,rgba(255,255,255,0) 70%);border-radius: 50%;z-index: 0;}.siswa-hero::after{content: '';position: absolute;bottom: -15%;left: -10%;width: 600px;height: 600px;background: radial-gradient(circle,rgba(59,130,246,0.08) 0%,rgba(255,255,255,0) 70%);border-radius: 50%;z-index: 0;}.hero-container{display: grid;grid-template-columns: 1.1fr 0.9fr;gap: 60px;align-items: center;position: relative;z-index: 1;}.hero-content h1{font-size: 56px;font-weight: 800;line-height: 1.15;margin-bottom: 24px;background: linear-gradient(135deg,#0f172a 0%,#334155 100%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;letter-spacing: -1.5px;}.hero-text{font-size: 19px;line-height: 1.7;color: #475569;margin-bottom: 35px;}.hero-image-wrapper{display: flex;justify-content: flex-end;position: relative;}.hero-image{max-width: 100%;border-radius: 20px;box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.02);animation: floating 6s ease-in-out infinite;position: relative;z-index: 2;}.placeholder-hero-image{width: 100%;max-width: 550px;height: 400px;background: linear-gradient(135deg,#e0e7ff,#f3f4f6);border-radius: 24px;display: flex;align-items: center;justify-content: center;box-shadow: 0 20px 40px rgba(0,0,0,0.05);border: 1px solid rgba(255,255,255,0.5);}.placeholder-hero-image i{font-size: 120px;color: #cbd5e1;text-shadow: 2px 4px 10px rgba(0,0,0,0.05);}@keyframes floating{0%{transform: translateY(0px);}50%{transform: translateY(-15px);}100%{transform: translateY(0px);}}.siswa-footer{background: linear-gradient(160deg,#2d0a07 0%,#1a0504 100%);color: #f8fafc;padding-top: 80px;position: relative;border-top: 5px solid #e8470a;}.footer-container{display: grid;grid-template-columns: 1fr 2fr 1fr 1fr;gap: 50px;margin-bottom: 50px;}.placeholder-footer-logo{width: 120px;height: 120px;background: linear-gradient(135deg,#334155,#1e293b);border-radius: 16px;box-shadow: 0 10px 25px rgba(0,0,0,0.3);display: flex;align-items: center;justify-content: center;}.footer-title{font-size: 19px;font-weight: 700;margin-bottom: 20px;margin-top: 0;color: #f8fafc;letter-spacing: 0.5px;}.footer-info .footer-url{color: #f5a623;text-decoration: none;display: block;margin-bottom: 16px;font-weight: 500;transition: color 0.2s;}.footer-info .footer-url:hover{color: #e8470a;}.footer-info .footer-address{line-height: 1.6;color: #475569;font-size: 15px;}.footer-nav ul{list-style: none;padding: 0;margin: 0;}.footer-nav ul li{margin-bottom: 12px;}.footer-nav ul li a{color: #475569;text-decoration: none;transition: all 0.2s ease;font-size: 15px;}.footer-nav ul li a:hover{color: #f5a623;padding-left: 5px;}.social-icons{display: flex;gap: 16px;flex-wrap: wrap;}.social-icon{width: 44px;height: 44px;background-color: #1e293b;color: #475569;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 18px;text-decoration: none;transition: all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow: 0 4px 6px rgba(0,0,0,0.1);}.social-icon:hover{background-color: #e8470a;color: #ffffff;transform: translateY(-4px) scale(1.05);box-shadow: 0 10px 15px rgba(232,71,10,0.3);}.footer-bottom{border-top: 1px solid rgba(255,255,255,0.05);background: linear-gradient(160deg,#2d0a07 0%,#1a0504 100%) !important;text-align: center;padding: 24px 0;color: #c4896b;font-size: 14px;}.footer-bottom p{margin: 0;}.footer-bottom strong{color: #f5a623;}.siswa-features{padding: 120px 0;background-color: #f8fafc;position: relative;}.section-header{text-align: center;margin-bottom: 60px;}.section-header h2{font-size: 38px;font-weight: 800;color: #0f172a;margin-bottom: 16px;letter-spacing: -0.5px;}.section-header p{font-size: 19px;color: #64748b;max-width: 600px;margin: 0 auto;line-height: 1.6;}.features-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(320px,1fr));gap: 40px;}.feature-card{background: #ffffff;border-radius: 24px;padding: 45px 35px;box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);border: 1px solid rgba(226,232,240,0.8);transition: all 0.4s cubic-bezier(0.4,0,0.2,1);position: relative;overflow: hidden;}.feature-card:hover{transform: translateY(-10px);box-shadow: 0 20px 50px -10px rgba(232,71,10,0.12);border-color: rgba(232,71,10,0.25);}.feature-icon{width: 70px;height: 70px;border-radius: 20px;display: flex;align-items: center;justify-content: center;color: white;font-size: 30px;margin-bottom: 28px;box-shadow: 0 8px 20px rgba(0,0,0,0.1);}.feature-card h3{font-size: 24px;font-weight: 700;color: #0f172a;margin-bottom: 16px;letter-spacing: -0.3px;}.feature-card p{color: #475569;line-height: 1.7;margin: 0;font-size: 16px;}.siswa-hamburger{display: none;background: transparent;border: none;font-size: 24px;color: #0f172a;cursor: pointer;transition: all 0.3s ease;padding: 5px;}.siswa-hamburger:focus{outline: none;}.nav-menu{display: flex;align-items: center;gap: 35px;}.auth-actions{display: flex;gap: 15px;align-items: center;}@media screen and (max-width: 992px){.siswa-hamburger{display: block;}.nav-menu{position: absolute;top: 80px;left: 0;width: 100%;background: rgba(255,255,255,0.98);backdrop-filter: blur(15px);-webkit-backdrop-filter: blur(15px);flex-direction: column;gap: 20px;padding: 30px 24px;box-shadow: 0 10px 25px rgba(0,0,0,0.1);border-bottom: 1px solid rgba(226,232,240,0.8);transform: translateY(-150%);opacity: 0;visibility: hidden;transition: all 0.4s cubic-bezier(0.4,0,0.2,1);z-index: -1;}.nav-menu.active{transform: translateY(0);opacity: 1;visibility: visible;}.nav-links{flex-direction: column;width: 100%;gap: 15px;text-align: center;}.nav-links li a{display: inline-block;font-size: 18px;padding: 10px 0;}.nav-actions{width: 100%;display: flex;flex-direction: column;align-items: center;gap: 15px;margin-top: 10px;padding-top: 20px;border-top: 1px solid #e2e8f0;}.auth-actions{flex-direction: column;width: 100%;}.btn-logout-siswa{width: 100%;text-align: center;}.hero-container{grid-template-columns: 1fr;text-align: center;gap: 40px;}.hero-content h1{font-size: 42px;}.hero-image-wrapper{justify-content: center;}.footer-container{grid-template-columns: 1fr;gap: 40px;text-align: center;}.footer-logo{margin: 0 auto;max-width: 250px;}.social-icons{justify-content: center;}}:root{--primary-color: #1f6f8b;--primary-hover: #16566d;--danger-color: #ef4444;--danger-hover: #dc2626;--success-color: #2e7d32;--success-hover: #256628;--border-radius-premium: 12px;--shadow-premium: 0 4px 12px rgba(0,0,0,0.05);--shadow-hover: 0 8px 20px rgba(31,111,139,0.15);}h1,h2,h3,h4,.page-title{letter-spacing: -0.5px;}.btn-premium{display: inline-flex;align-items: center;justify-content: center;gap: 8px;padding: 10px 20px;background: var(--primary-color);color: #ffffff !important;border: none;border-radius: var(--border-radius-premium);font-weight: 700;font-size: 14px;text-decoration: none !important;cursor: pointer;transition: all 0.25s ease;box-shadow: 0 4px 10px rgba(31,111,139,0.2);}.btn-premium:hover{background: var(--primary-hover);transform: translateY(-1px);box-shadow: 0 6px 15px rgba(31,111,139,0.3);}.btn-outline-premium{display: inline-flex;align-items: center;justify-content: center;gap: 8px;padding: 9px 19px;background: transparent;color: var(--primary-color) !important;border: 2px solid var(--primary-color);border-radius: var(--border-radius-premium);font-weight: 700;font-size: 14px;text-decoration: none !important;cursor: pointer;transition: all 0.25s ease;}.btn-outline-premium:hover{background: rgba(31,111,139,0.05);color: var(--primary-hover) !important;border-color: var(--primary-hover);}.btn-danger-premium{display: inline-flex;align-items: center;justify-content: center;gap: 8px;padding: 10px 20px;background: var(--danger-color);color: #ffffff !important;border: none;border-radius: var(--border-radius-premium);font-weight: 700;font-size: 14px;text-decoration: none !important;cursor: pointer;transition: all 0.25s ease;box-shadow: 0 4px 10px rgba(239,68,68,0.2);}.btn-danger-premium:hover{background: var(--danger-hover);transform: translateY(-1px);box-shadow: 0 6px 15px rgba(239,68,68,0.3);}.btn-success-premium{display: inline-flex;align-items: center;justify-content: center;gap: 8px;padding: 10px 20px;background: var(--success-color);color: #ffffff !important;border: none;border-radius: var(--border-radius-premium);font-weight: 700;font-size: 14px;text-decoration: none !important;cursor: pointer;transition: all 0.25s ease;box-shadow: 0 4px 10px rgba(46,125,50,0.2);}.btn-success-premium:hover{background: var(--success-hover);transform: translateY(-1px);box-shadow: 0 6px 15px rgba(46,125,50,0.3);}.badge-premium{padding: 4px 10px;border-radius: 8px;font-size: 11px;font-weight: 800;text-transform: uppercase;letter-spacing: 0.5px;}@media screen and (max-width: 576px){.hero-content h1{font-size: 32px;}.logo-text{font-size: 18px;}.nav-logo img{height: 40px !important;}.btn-sidebar-mobile{display: none !important;background: none;border: none;color: #1f6f8b;font-size: 18px;cursor: pointer;padding: 8px;margin-right: 10px;border-radius: 8px;transition: all 0.2s ease;flex-shrink: 0;}.btn-sidebar-mobile:hover{background: rgba(31,111,139,0.1);}.sidebar-overlay{position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);z-index: 998;display: none;backdrop-filter: blur(2px);}.sidebar-overlay.active{display: block;}@media (max-width: 991px){.sidebar{left: -260px;z-index: 1000;transition: left 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow: 10px 0 30px rgba(0,0,0,0.1);}.sidebar.active{left: 0;}.dashboard-row{display: flex !important;flex-wrap: wrap !important;gap: 20px !important;align-items: stretch !important;}main{margin-left: 0 !important;padding: 0 10px 10px 10px !important;width: 100% !important;overflow-x: hidden;}.topbar{padding: 6px 10px;height: auto;min-height: 55px;}.btn-sidebar-mobile{display: block !important;}.school-motto{display: none !important;}.topbar-logo{height: 28px !important;width: auto;margin-right: 6px !important;}.topbar-sig-logo{height: 18px !important;width: auto;margin-right: 4px !important;}.card-header{padding: 12px 15px !important;}.card-header > div{flex-direction: column !important;align-items: flex-start !important;gap: 12px;}#realtime-clock{width: 100% !important;padding: 8px 12px !important;justify-content: flex-start !important;}#realtime-clock > div:first-child{width: 32px !important;height: 32px !important;font-size: 14px !important;}#clock-time{font-size: 14px !important;}#clock-date{font-size: 9px !important;}.page-title{font-size: 17px !important;}.page-info{font-size: 11px !important;line-height: 1.4 !important;}.stat-grid{grid-template-columns: 1fr !important;gap: 12px !important;}.table-responsive{margin: 0 -5px;width: calc(100% + 10px);overflow-x: auto;-webkit-overflow-scrolling: touch;}table{min-width: 100%;}.dashboard-charts-grid,.dashboard-row,.stat-grid.dashboard-charts{grid-template-columns: 1fr !important;display: flex !important;flex-direction: column !important;}.dashboard-row{gap: 15px !important;}.dashboard-row > .card{flex: none !important;width: 100% !important;max-width: none !important;}.table-footer{flex-direction: column !important;gap: 15px !important;align-items: center !important;padding: 20px 15px !important;text-align: center !important;}.table-info,.per-page-wrapper,.pagination-box{width: 100% !important;justify-content: center !important;margin: 0 !important;}.per-page-wrapper{border: 1px solid #e2e8f0;padding: 8px 15px;border-radius: 12px;background: #f8fafc;}.pagination{justify-content: center !important;}.search-form{flex-wrap: wrap !important;gap: 10px !important;}.search-input{min-width: 100% !important;order: -1;}.search-select{flex: none !important;width: 100% !important;}.kb-filter-bar{padding: 0 15px !important;width: 100% !important;}.form-filter-inline{flex-wrap: wrap !important;width: 100% !important;gap: 10px !important;}.kb-select,.kb-input{width: 100% !important;min-width: 100% !important;flex: 1 1 100% !important;}.form-filter-inline > div{width: 100% !important;flex: 1 1 100% !important;}}@media (max-width: 480px){.topbar-logo{height: 24px !important;}.topbar-sig-logo{height: 16px !important;}.page-title{font-size: 16px !important;}}@media (max-width: 768px){.table-responsive{border-radius: 12px;margin-bottom: 15px;-webkit-overflow-scrolling: touch;}.card{margin-bottom: 15px !important;border-radius: 12px !important;}.card-header{padding: 12px 15px !important;}.btn-premium,.btn-success-premium,.btn-danger-premium,.btn-outline-premium,.btn-add-bk{height: auto !important;min-height: 40px !important;padding: 8px 16px !important;font-size: 13px !important;white-space: nowrap !important;display: flex !important;align-items: center !important;justify-content: center !important;}.dashboard-row .card-body > div[style*="space-evenly"]{justify-content: flex-start !important;gap: 12px !important;}table td{max-width: 250px;word-wrap: break-word;}.sidebar-overlay{z-index: 999;}}