*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100vh;width:100%;font-family:Arial,sans-serif}h1,h2,h3,h4,h5,h6{margin:0;padding:0}:root{--wpcs-blue: #2e3355;--wpcs-red: #990000;--main-bg: #f8f4f0;--page-padding-y: 20px;--card-radius: 16px;--card-shadow: 0 10px 25px rgba(0, 0, 0, .25);--card-padding-x: 32px;--card-padding-y: 18px;--content-padding-x: 16px;--content-padding-bottom: 10px;--header-padding-y: 14px;--header-padding-x: 18px;--header-gap: 8px;--header-btn-height: 34px}.App{min-height:100vh;width:100%;display:flex;justify-content:center;align-items:flex-start;padding:var(--page-padding-y) 0;background-image:url(/login_bg.jpg);background-size:cover;background-position:center center;background-attachment:fixed;background-color:var(--main-bg)}.main-app{width:90%;max-width:1200px;margin:0 auto;padding:var(--card-padding-y) var(--card-padding-x);background-color:#fff;border-radius:var(--card-radius);box-shadow:var(--card-shadow)}.admin-content-wrapper,.user-content-wrapper{padding:0 var(--content-padding-x) var(--content-padding-bottom);width:100%;overflow-x:hidden;overflow-y:visible}.login-container{width:100%;max-width:450px;min-width:300px;margin:0 auto;padding:0;background-color:#ffffffe6;border-radius:8px;box-shadow:0 4px 12px #0000004d;display:flex;flex-direction:column;align-items:center}.school-logo{width:100px;height:auto;margin:30px 0 10px}.login-content{padding:40px;text-align:center;width:100%}.login-content h2,.login-content p{color:#333}.login-button{margin-top:20px;padding:12px 24px;border-radius:4px;border:none;background-color:var(--wpcs-red);color:#fff;font-size:16px;cursor:pointer;transition:background-color .3s ease}.login-button:hover{background-color:#7d0000}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--header-padding-y) var(--header-padding-x)!important;margin-bottom:20px;background:linear-gradient(135deg,var(--wpcs-blue),#181c3a);color:#fff;border-radius:var(--card-radius);box-shadow:var(--card-shadow);gap:8px}.header-left{display:flex;flex-direction:column;gap:2px;font-size:.9rem;line-height:1.3}.header-app-name{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.9}.header-user-line{font-size:.88rem;font-weight:500}.header-action-group,.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.header-btn,.submit-toggle-button,.filter-toggle-button,.sign-out-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--header-btn-height);padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:#ffffff14;color:#fff;font-size:.85rem;font-weight:500;white-space:nowrap;box-shadow:0 2px 6px #00000040;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,transform .08s ease,box-shadow .18s ease}.header-btn span,.submit-toggle-button span,.filter-toggle-button span{display:inline-flex;align-items:center;gap:6px}.header-btn,.submit-toggle-button,.filter-toggle-button{background:#fff;color:var(--wpcs-blue);border-color:#fff}.header-btn:hover,.submit-toggle-button:hover,.filter-toggle-button:hover{background:#d1e4ff;border-color:#d1e4ff}.header-btn-active{background:#fff!important;color:var(--wpcs-blue)!important;border-color:#fff!important}.sign-out-button{background:linear-gradient(135deg,var(--wpcs-red),#c20000);border-color:#00000026;box-shadow:0 3px 10px #9009;color:#fff!important}.sign-out-button:hover{background:linear-gradient(135deg,#f44,#b80000)}.filter-toggle-button{color:var(--wpcs-blue)!important}@media(max-width:768px){.header{flex-direction:column;align-items:flex-start;gap:10px!important;padding:16px 14px!important;border-radius:0 0 var(--card-radius) var(--card-radius)}.header-action-group,.header-actions{width:100%;flex-direction:column;align-items:center;gap:10px}.header-btn,.submit-toggle-button,.filter-toggle-button,.sign-out-button{width:100%;max-width:260px;height:44px;padding:0 16px;border-radius:999px;font-size:.9rem}.sign-out-button{width:100%}}.ticket-list-wrapper{width:100%;max-width:1000px;margin:0 auto}.table-scroll-container{width:100%;overflow-x:auto;overflow-y:visible}.ticket-table{width:100%;border-collapse:collapse;margin-top:16px;margin-bottom:8px;font-size:14px}.ticket-table th,.ticket-table td{border:1px solid #ddd;padding:12px;text-align:left;vertical-align:middle}.ticket-table th{background-color:#f9f9f9;font-weight:700}.student-sn-cell{display:flex;flex-direction:column;gap:2px;line-height:1.2;max-width:220px;word-break:break-all}.student-sn-name{font-weight:500}.student-sn-serial{font-size:.8rem;color:#666}.ticket-last-update{padding:12px!important;vertical-align:middle!important}.ticket-last-update-inner{font-size:11px;line-height:1.3;cursor:help;max-height:3.9em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-clamp:3;word-break:break-word;white-space:normal}.status{padding:5px 10px;border-radius:12px;font-weight:700;color:#fff;text-transform:uppercase;font-size:12px;white-space:nowrap}.status-open{background-color:#d9534f}.status-needs-more-info{background-color:#0275d8}.status-in-progress{background-color:#f0ad4e}.status-closed{background-color:#28a745}.status-waiting-on-user{background-color:#f0ad4e}.status-rma{background-color:#7c3aed}.status-closed-by-user{background-color:#6b7280}td.ticket-actions{text-align:right;vertical-align:middle;padding:12px;position:relative}.action-menu-wrapper{position:relative;display:inline-block}.menu-toggle-button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid #ccc;border-radius:4px;font-size:1.2rem;line-height:1;cursor:pointer}.action-dropdown{position:absolute;top:100%;right:0;min-width:200px;background-color:#fff;border-radius:4px;border:1px solid #ddd;box-shadow:0 4px 8px #0003;margin-top:6px;overflow:hidden;z-index:5000}.action-dropdown .menu-item{width:100%;display:block;padding:8px 12px;border:none;background:none;text-align:left;font-size:.9rem;cursor:pointer;transition:background-color .15s ease}.action-dropdown .menu-item:hover{background-color:var(--main-bg)}.action-dropdown .menu-delete-btn{color:var(--wpcs-red)}@media(min-width:769px){.admin-content-wrapper,.main-app{overflow:visible}td.ticket-actions .action-dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:6px}}.ticket-cards.mobile-only{display:none}@media(max-width:768px){.table-scroll-container.desktop-only{display:none!important}.ticket-cards.mobile-only{display:flex!important;flex-direction:column;gap:8px;margin-top:12px}.ticket-card{border:1px solid #ddd;border-radius:6px;padding:8px 10px;background-color:#fff}.ticket-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:.82rem;font-weight:600}.ticket-card-date{color:#555;font-size:.8rem}.ticket-card-meta{font-size:.78rem;color:#444;margin-bottom:4px}.ticket-card-row{margin-bottom:2px}.ticket-card-label{font-weight:600;font-size:.78rem}.ticket-card-lastupdate{margin-top:3px;font-size:.78rem;line-height:1.25}.ticket-card-actions{margin-top:6px;display:flex;justify-content:flex-end}.ticket-card .menu-toggle-button{width:32px;height:32px;font-size:1rem;padding:0}.ticket-card-body{max-height:0;overflow:hidden;transition:max-height .22s ease}.ticket-card-body.open{max-height:500px}.ticket-card-toggle-row{margin-top:6px;width:100%;display:flex;align-items:center;justify-content:space-between;border:none;background:transparent;padding:4px 0 0;font-size:.8rem;color:var(--wpcs-blue);cursor:pointer}.ticket-card-toggle-row:focus-visible{outline:2px solid var(--wpcs-blue);outline-offset:2px}.ticket-card-chevron{display:inline-block;transition:transform .18s ease}.ticket-card-chevron.open{transform:rotate(180deg)}.ticket-card-actions .action-menu-wrapper{position:relative;display:inline-block}.ticket-card-actions .action-dropdown{inset:100% auto auto 50%;transform:translate(-50%);margin-top:6px;min-width:160px;max-width:80vw}.ticket-card-actions .action-dropdown .menu-item{font-size:.85rem;padding:8px 10px}}.ticket-card-student-sn .student-sn-name{font-weight:500}.ticket-card-student-sn .student-sn-serial{font-size:.85rem;color:#666}.ticket-form{display:flex;flex-direction:column;width:100%;max-width:600px;margin:20px auto 30px;padding-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px}.form-group label{font-weight:700;margin-bottom:5px;color:#444;text-align:left;white-space:normal}.form-group input,.form-group select,.form-group textarea{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:16px;font-family:Arial,sans-serif;resize:vertical}.submit-button{background-color:#28a745;color:#fff;border:none;padding:12px 24px;border-radius:4px;font-size:16px;cursor:pointer;transition:background-color .3s ease}.submit-button:hover{background-color:#218838}.submit-button:disabled{background-color:#aaa;cursor:not-allowed}.modal-backdrop{position:fixed;inset:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;padding:24px;border-radius:8px;box-shadow:0 5px 15px #0000004d;width:90%;max-width:600px;z-index:1001}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding-bottom:16px;margin-bottom:16px}.modal-header h3{margin:0;font-size:1.5rem}.close-button{background:none;border:none;font-size:2.5rem;font-weight:300;color:#aaa;cursor:pointer;line-height:1}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding-top:20px;border-top:1px solid #eee;margin-top:16px}.button-secondary{background-color:#f4f7f6;color:#555;border:1px solid #ccc;padding:10px 18px;border-radius:4px;font-size:16px;cursor:pointer;transition:background-color .3s ease}.comment-history-list{max-height:200px;overflow-y:auto;border:1px solid #eee;border-radius:4px;margin-top:10px;background-color:#fcfcfc}.comment-item{padding:10px 15px;border-bottom:1px solid #eee}.comment-item:last-child{border-bottom:none}.comment-meta{font-size:.85rem;color:#555;margin:0}.comment-text{margin:5px 0 0;font-size:1rem;white-space:pre-wrap}body.modal-open{overflow:hidden}.login-report-container{max-height:400px;overflow-y:auto;padding-right:15px;color:#333!important}.login-report-container .filter-toggle-button{background-color:var(--wpcs-blue)!important;color:#fff!important;border-color:var(--wpcs-blue)!important}.login-report-container .filter-toggle-button:hover{background-color:#21253d!important}.admin-dashboard-title{text-align:center;padding-top:0;padding-bottom:10px;margin-top:0}.ticket-attachments{margin-top:4px;display:flex;flex-direction:column;gap:2px}.ticket-attachment-link{font-size:.78rem;text-decoration:none;color:var(--wpcs-blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ticket-attachment-link:hover{text-decoration:underline}@media(max-width:768px){.ticket-attachments--mobile .ticket-attachment-link{font-size:.75rem}}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000a6;display:flex;justify-content:center;align-items:center;z-index:999}.modal-content{background:#fff;padding:15px;border-radius:10px;width:90%;max-width:600px;max-height:85vh;overflow:auto;position:relative}.modal-close{position:absolute;right:12px;top:10px;border:none;background:transparent;font-size:20px;cursor:pointer}.modal-overlay{position:fixed;inset:0;background:#000000a6;display:flex;justify-content:center;align-items:center;z-index:9999}.modal-content{background:#fff;padding:16px 20px;border-radius:10px;width:90%;max-width:650px;max-height:85vh;overflow:auto;position:relative;box-shadow:0 10px 30px #00000059}.modal-close{position:absolute;right:14px;top:10px;border:none;background:transparent;font-size:20px;cursor:pointer}.modal-image{width:100%;border-radius:8px;margin-top:10px}.modal-iframe{width:100%;height:70vh;border:none;margin-top:10px}.ticket-attachment-link{display:inline-flex;align-items:center;gap:4px;margin-right:8px;margin-top:4px;padding:0;border:none;background:none;color:#06c;text-decoration:underline;cursor:pointer;font-size:.85rem}.ticket-last-update{white-space:normal!important;word-break:break-word;max-width:250px}.ticket-attachments{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px;max-width:240px}.ticket-attachment-link{background:transparent;border:none;padding:0;margin:0;cursor:pointer;color:#06c;text-decoration:underline;font-size:.82rem;white-space:normal;word-break:break-all}.admin-search-bar{display:flex;justify-content:flex-end;margin-bottom:12px}.admin-search-input{min-width:260px;max-width:320px;padding:6px 10px;border-radius:4px;border:1px solid #ccc;font-size:.9rem}@media(max-width:768px){.admin-search-bar{justify-content:center}.admin-search-input{width:100%;max-width:none}}.admin-search-input{width:100%;max-width:420px;padding:10px 14px;font-size:1rem;border-radius:8px;border:1px solid #ccc}.my-tickets{display:flex;flex-direction:column;gap:16px}.user-ticket-card{background:#fff;border-radius:10px;border:1px solid #ddd;padding:16px 18px;margin-bottom:12px;box-shadow:0 1px 3px #0000000f}.ticket-card-closed{opacity:.9;background:#f8f9fb}.ticket-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.ticket-card-title{font-size:1.05rem;font-weight:600;margin-bottom:4px}.ticket-room-label{font-weight:400;font-size:.95rem;color:#555}.ticket-created-line{font-size:.85rem;color:#777}.ticket-status-wrapper{display:flex;align-items:center}.status-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:600;color:#fff;white-space:nowrap}.status-open{background:#0b874b}.status-in-progress{background:#0072c6}.status-needs-info{background:#e39b0f}.status-closed,.status-user-closed{background:#555}.status-user-closed{background:#6b4caf}.ticket-card-body{border-top:1px solid #eee;padding-top:10px;margin-top:4px}.ticket-description,.ticket-serial{margin:4px 0 8px}.section-title{font-weight:600;margin:8px 0 4px}.ticket-comments{margin-top:4px;margin-bottom:8px;max-height:260px;overflow-y:auto;padding-right:4px}.comment-item{background:#f7f8fa;border-radius:6px;padding:6px 8px;margin-bottom:6px}.comment-meta{display:flex;justify-content:space-between;font-size:.8rem;color:#555;margin-bottom:3px}.comment-text{font-size:.9rem}.ticket-add-comment textarea{width:100%;resize:vertical;min-height:60px;margin-top:4px;margin-bottom:6px;padding:6px 8px;border-radius:6px;border:1px solid #ccc;font-family:inherit}.ticket-add-comment .btn-primary{padding:6px 12px;border-radius:6px;border:none;background:#0072c6;color:#fff;font-size:.9rem;cursor:pointer}.ticket-add-comment .btn-primary:hover{background:#005a9c}.ticket-close{margin-top:8px}.ticket-close .btn-secondary{padding:6px 12px;border-radius:6px;border:1px solid #888;background:#f5f5f5;color:#333;font-size:.9rem;cursor:pointer}.ticket-close .btn-secondary:hover{background:#e9e9e9}.my-tickets-filters{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-bottom:10px;margin-top:4px}.my-tickets-filters .filter-label{font-size:.9rem;color:#555;margin-right:4px}.filter-chip{border-radius:999px;border:1px solid #ccc;background:#f5f5f5;padding:4px 10px;font-size:.85rem;cursor:pointer;transition:background .15s ease,border-color .15s ease}.filter-chip:hover{background:#e8e8e8}.filter-chip-active{background:#0072c6;border-color:#0072c6;color:#fff}.expand-toggle{background:none;border:none;color:#0b5fff;cursor:pointer;font-size:.8rem;margin-left:4px;padding:0}.clamped-text{position:relative;max-width:280px;margin-top:2px}.clamped-text .clamped-inner{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-height:2.8em;line-height:1.4em;transition:max-height .2s ease}.clamped-text.expanded .clamped-inner{-webkit-line-clamp:unset;line-clamp:unset;max-height:none}.ticket-last-update,.ticket-card-lastupdate{white-space:normal;word-break:break-word}.tooltip-wrapper{position:relative;display:inline-block;overflow:visible}.clamped-text{position:relative;display:inline-block;overflow:visible;max-width:280px}.clamped-text .clamped-inner{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-height:2.8em;line-height:1.4em}.expand-toggle{background:none;border:none;color:#0b5fff;cursor:pointer;font-size:.75rem;padding:0;margin-top:2px}.expand-toggle:hover{text-decoration:underline}.tooltip-bubble{position:absolute;top:100%;left:50%;transform:translate(-50%);z-index:9999;background:#333;color:#fff;padding:8px 10px;border-radius:6px;margin-top:6px;font-size:.8rem;white-space:normal;word-break:break-word;width:260px;max-width:260px;box-shadow:0 2px 8px #00000040}.tooltip-bubble:after{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);border-width:6px;border-style:solid;border-color:transparent transparent #333 transparent}@media(max-width:768px){.ticket-card .clamped-text{max-width:100%}.ticket-card .tooltip-bubble{position:static;transform:none;margin-top:4px;width:100%;max-width:100%;box-sizing:border-box}.ticket-card .tooltip-bubble:after{display:none}}@media(max-width:768px){.ticket-card .clamped-text{max-width:100%}.ticket-card .tooltip-bubble{position:static;transform:none;margin-top:6px;background:#fff;color:#333;padding:10px 12px;border-radius:8px;width:100%;max-width:100%;box-sizing:border-box;border:1px solid rgba(0,0,0,.12);box-shadow:0 1px 4px #00000026;font-size:.85rem;line-height:1.25rem;white-space:normal;word-break:break-word}.ticket-card .tooltip-bubble:after{display:none}}.comment-item-internal{border-left:4px solid #ffd666;background:#fffaf0}.comment-item-internal .comment-meta{font-style:italic}