/* === RSJ.APP GLOBAL CSS HACKER THEME v2.0 === */

/* BODY & BACKGROUND */
body {
  background: radial-gradient(ellipse at 60% 15%, #151c22 60%, #030912 100%);
  min-height:100vh;
  font-family:'Fira Mono', Consolas, monospace;
  color:#c7f9fb;
  overflow-x: hidden;
}

/* Matrix Effect, Scanline, Grid, Glow */
#matrix-bg {position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0.17;}
.scanline, .diag-glow, .grid {position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:1;pointer-events:none;}
.scanline {background:repeating-linear-gradient(180deg,#00fff911 0 1px,transparent 1px 3px);mix-blend-mode:lighten;opacity:0.09;animation:scanmove 8s linear infinite;}
@keyframes scanmove {0%{background-position-y:0;}100%{background-position-y:40px;}}
.diag-glow {background:linear-gradient(110deg,transparent 60%,#00fff911 100%);}
.grid {background:repeating-linear-gradient(90deg,#00fff905 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,#00fff905 0 1px,transparent 1px 48px);opacity:0.06;}

/* === SIDEBAR === */
.sidebar {
  min-width: 220px;
  background: linear-gradient(135deg,#151c22 80%,#00fff921 100%);
  border-right:2px solid #00fff933;
  box-shadow:2px 0 20px #00fff933;
  display:flex;flex-direction:column;align-items:center;z-index:10;position:relative;
}
.sidebar-logo {
  margin:28px 0 22px 0;width:68px;height:68px;background:none;
  border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:2.2em;color:#00fff9;font-weight:bold;letter-spacing:2px;
  box-shadow:0 0 15px #00fff955;transition:box-shadow .2s;
  filter:drop-shadow(0 0 18px #00fff9aa);
}
.sidebar-logo svg {width:56px;height:56px;display:block;margin:0 auto;
  filter:drop-shadow(0 0 22px #00fff9cc) drop-shadow(0 0 7px #05ff3299);
  transition:filter .22s;
}
.sidebar-logo svg:hover {filter:drop-shadow(0 0 42px #00fff9) drop-shadow(0 0 18px #05ff32);}
.sidebar-menu {width:100%;display:flex;flex-direction:column;gap:7px;}
.menu-link {
  width:100%;padding:13px 0 13px 36px;font-size:1.07em;color:#00fff9;
  background:none;border:none;text-align:left;transition:background .13s,color .13s,padding .13s;
  cursor:pointer;position:relative;font-weight:600;letter-spacing:1px;outline:none;border-left:3.7px solid transparent;
  display:flex;align-items:center;gap:9px;
}
.menu-link svg, .menu-link .mi {font-size:1.2em;vertical-align:middle;}
.menu-link:hover,.menu-link.active {
  background:linear-gradient(90deg,#00fff933 60%,transparent 100%);
  color:#05ff32;border-left:3.7px solid #05ff32;padding-left:42px;
}
.sidebar-footer {
  margin-top:auto;margin-bottom:26px;color:#ff00a7;font-size:1em;text-align:center;width:100%;opacity:0.75;
}

/* === MAIN CONTENT LAYOUT === */
.layout {display: flex;min-height: 100vh;z-index:5;}
.center-box {
  margin: 48px auto 0 auto;
  background: #111822;
  border-radius: 18px;
  border: 2px solid #00fff922;
  box-shadow: 0 0 42px 8px #00fff933;
  max-width: 940px;
  padding: 33px 25px 24px 25px;
  position: relative;
  z-index: 5;
  overflow: hidden;
  flex: 1 1 0%;
}
.dashboard-container {
  position:relative; z-index:5; flex:1 1 0%; 
  max-width: 1200px;
  margin:36px auto 30px auto; 
  padding:36px 22px;
  background:rgba(15,22,31,0.98); border-radius:26px; border:2px solid #00fff922; box-shadow:0 0 60px #00fff933;
  min-width:0;
}

/* === GLITCH TITLE === */
.glitch-title {
  text-align:center;font-size:1.32em;font-weight:bold;letter-spacing:2px;color:#00fff9;margin-bottom:16px;text-shadow:0 0 14px #00fff9cc,0 0 1px #fff;position:relative;
}
.glitch-title::before,.glitch-title::after {content:attr(data-text);position:absolute;left:0;width:100%;top:0;opacity:.74;color:#05ff32;z-index:2;pointer-events:none;text-shadow:0 0 5px #05ff3299;}
.glitch-title::before {animation:glitchTop 1.7s infinite linear alternate-reverse;top:-1.2px;left:1.6px;}
.glitch-title::after {animation:glitchBot 1.8s infinite linear alternate-reverse;top:1.8px;left:-1.4px;color:#ff00a7;text-shadow:0 0 5px #ff00a799;}
@keyframes glitchTop {0%{transform:translate(0,0);}20%{transform:translate(-2px,-2px);}40%{transform:translate(-1px,2px);}60%{transform:translate(2px,1px);}80%{transform:translate(1px,-1px);}100%{transform:translate(0,0);}}
@keyframes glitchBot {0%{transform:translate(0,0);}25%{transform:translate(2px,1.5px);}45%{transform:translate(-2px,1.2px);}65%{transform:translate(-1.3px,-1.4px);}90%{transform:translate(1.7px,-1.7px);}100%{transform:translate(0,0);}}

/* === TERMINAL / CARD / NOTIF / MSG === */
.terminal {background:rgba(0,0,0,0.82);color:#00fff9;font-size:1em;border-radius:10px;border:1.5px solid #00fff9bb;min-height:38px;margin-bottom:14px;padding:10px 15px 7px 15px;box-shadow:0 0 13px #00fff933;overflow-x:auto;word-break:break-word;font-family: 'Fira Mono', Consolas, monospace;line-height: 1.3;min-width: 90%;}
.msg-term {margin-bottom:13px;font-weight:700;text-align:center;font-size:1.05em;}
.msg-term.success {color:#05ff32;}
.msg-term.error {color:#ff4361;}

/* === NEON BUTTONS === */
.neon-btn, .upload-btn, .download-btn, .edu-sell-btn, .edit-btn, .del-btn, .save-btn {
  background:linear-gradient(90deg,#05ff32 7%,#00fff9 93%);
  color:#111;font-size:1.03em;font-weight:bold;
  box-shadow:0 0 12px #00fff955;
  text-transform:uppercase;letter-spacing:1.2px;cursor:pointer;
  border:none;transition:background .17s,transform .09s;
  border-radius:8px;
  animation:flicker-btn 1.2s infinite alternate-reverse;
  padding:10px 15px;
  margin-bottom:4px;
}
@keyframes flicker-btn {0%{box-shadow:0 0 13px #00fff966,0 0 11px #05ff3266;}16%{box-shadow:0 0 20px #05ff3299;}33%{box-shadow:0 0 12px #00fff988;}66%{box-shadow:0 0 25px #00fff955;}100%{box-shadow:0 0 17px #05ff3266;}}
.neon-btn:hover, .upload-btn:hover, .download-btn:hover, .edu-sell-btn:hover, .edit-btn:hover, .save-btn:hover {background:linear-gradient(90deg,#00fff9 10%,#05ff32 90%);transform:scale(1.04);}
.del-btn {background:linear-gradient(90deg,#ff4361 10%,#ff8fa0 90%);color:#fff;}
.del-btn:hover {background:linear-gradient(90deg,#ff8fa0 10%,#ff4361 90%);}
.back-link {display:block;text-align:center;margin-top:16px;font-size:1.01em;color:#00fff9;text-decoration:none;letter-spacing:0.5px;}
.back-link:hover {color:#05ff32;}

/* === FORMS / INPUT / TEXTAREA === */
input[type="file"], input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select, .edit-ket-box, .searchbox {
  width:100%;padding:10px 12px;margin-bottom:14px;border-radius:8px;border:1.3px solid #00fff955;
  background:rgba(0,7,15,0.97);color:#00fff9;font-size:1em;font-family:inherit;outline:none;transition:.14s;
}
input[type="file"] {background:none;color:#00fff9;}
input:focus, textarea:focus, select:focus, .searchbox:focus, .edit-ket-box:focus {border-color:#05ff32;box-shadow:0 0 8px #05ff3233;}
.edit-ket-box {font-size:0.96em;}
.searchbox {margin-bottom:13px;}
label { color:#00fff9;font-weight:700;font-size:1em;margin-bottom:8px;display:block;}

/* === TABLE STYLE === */
.download-table, .data-table {
  width:100%; border-spacing:0; margin-bottom: 20px;
  border-radius: 9px; overflow: hidden;
  background:rgba(0,20,25,0.90);
  box-shadow:0 0 13px #00fff977;
}
.download-table th,.download-table td, .data-table th, .data-table td {
  padding:10px 8px; text-align:left; font-family:inherit;
  border-bottom:1.1px solid #00fff93a;
  color:#00fff9;
}
.download-table th, .data-table th {
  background: #07161c; color:#05ff32; font-weight: 700; letter-spacing:0.09em; font-size:1.02em;
}
.download-table td, .data-table td {
  font-size:0.98em; background: rgba(0,15,20,0.82);
}
.download-table tr:last-child td, .data-table tr:last-child td { border-bottom:none;}
.download-table tr:hover, .data-table tr:hover {background:rgba(0,30,40,0.5);}
.no-data {color: #ff4361; font-size:1.1em; text-align:center; padding:18px 0;}

/* === CARD/WIDGET STYLE === */
.widgets-row {display:flex;gap:19px;flex-wrap:wrap;justify-content:left;margin-bottom:16px;margin-top:7px;}
.widget {
  background:rgba(8,14,24,0.93);border:1.2px solid #00fff955;
  border-radius:15px;box-shadow:0 0 18px #00fff933;
  padding:18px 18px;min-width:220px;min-height:110px;flex:1 1 250px;margin-bottom:10px;
  position:relative;overflow:hidden;transition:box-shadow .18s, border .18s;
}
.widget-title {color:#05ff32;font-weight:700;margin-bottom:8px;letter-spacing:1px;font-size:1.09em;}
.widget-value {font-size:1.5em;color:#fff;font-weight:800;letter-spacing:1px;text-shadow:0 0 10px #00fff955;margin-bottom:5px;}
.widget-desc {color:#8cfde3;font-size:1em;margin-top:4px;}
.user-info {display:flex;align-items:center;gap:13px;margin-bottom:6px;}
.avatar {
  width:42px;height:42px;border-radius:50%;background:#00fff922;
  display:inline-block;border:2px solid #00fff9bb;
  box-shadow:0 0 9px #00fff933;
  font-size:1.5em;text-align:center;line-height:42px;color:#111;font-weight:900;
}

/* === PROGRESSBAR === */
.progressbar-bg {width:97%;height:10px;border-radius:5px;background:#00261c;margin:8px 0 8px 0;overflow:hidden;border:1px solid #05ff32;box-shadow:0 0 6px #05ff3255;}
.progressbar {height:100%;background:linear-gradient(90deg,#05ff32 40%,#00fff9 100%);border-radius:4px;transition:width .7s;box-shadow:0 0 8px #05ff3266;}

/* === ACTION ICONS === */
.action-icon, .mi {
  font-size:1.15em;
  display:inline-block;
  vertical-align:middle;
  margin-right:4px;
  filter:drop-shadow(0 0 5px #00fff9cc);
  transition:filter .14s;
}
.action-icon:hover {filter:drop-shadow(0 0 14px #05ff32);}

/* === DYNAMIC & UTILITY EFFECTS === */
.glitch-title.is-glitching {
  animation: glitchBot 0.34s 4 linear;
}
.element-flicker {
  animation: flicker-random 0.2s 1 linear;
}
@keyframes flicker-random {
  0% { opacity: 1; }
  50% { opacity: 0.6; border-color: #ff4361; }
  100% { opacity: 1; }
}
.typing-cursor {
  color: #05ff32;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  from, to { color: transparent; }
  50% { color: #05ff32; }
}

/* === MODAL & TOAST === */
.rsj-toast {
  position:fixed;right:24px;bottom:38px;z-index:99999;
  background:#101e2b;color:#fff;padding:11px 21px;
  border-radius:9px;box-shadow:0 2px 13px #00fff955;font-size:1.07em;
  opacity:0;transform:translateY(28px) scale(0.96);transition:.27s;
  pointer-events:none;min-width:140px;text-align:center;
}
.rsj-toast.show {opacity:1;transform:translateY(0) scale(1);}
.rsj-toast-success {background:linear-gradient(90deg,#05ff32,#00fff9);}
.rsj-toast-error {background:linear-gradient(90deg,#ff4361,#ff8fa0);}
.rsj-toast-info {background:linear-gradient(90deg,#00fff9,#05ff32);}
.rsj-modal {position:fixed;z-index:99999;left:0;top:0;width:100vw;height:100vh;}
.rsj-modal-bg {position:absolute;top:0;left:0;width:100vw;height:100vh;background:rgba(10,20,40,0.77);}
.rsj-modal-content {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#121b23;padding:27px 33px;border-radius:17px;box-shadow:0 0 44px #00fff933;color:#fff;text-align:center;min-width:250px;}
.rsj-modal-actions{margin-top:19px;display:flex;gap:20px;justify-content:center;}

/* === HEADER STYLE === */
.header {
  background: linear-gradient(135deg, #151c22 80%, #00fff921 100%);
  border-bottom: 2px solid #00fff933;
  box-shadow: 0 2px 20px #00fff933;
  padding: 20px;
  position: relative;
  z-index: 10;
}
.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header h1 {
  font-size: 1.5em;
  color: #00fff9;
  text-shadow: 0 0 14px #00fff9cc;
  letter-spacing: 2px;
  margin: 0;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}
.user-info span {
  color: #00fff9;
  font-size: 0.95em;
}
.logout-btn {
  background: linear-gradient(90deg, #ff4361 10%, #ff8fa0 90%);
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.9em;
  transition: transform 0.2s;
  cursor: pointer;
}
.logout-btn:hover {
  transform: scale(1.05);
}

/* === STATUS BADGE === */
.status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}
.status-pending {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border: 1px solid #ffc107;
}
.status-active {
  background: rgba(5, 255, 50, 0.2);
  color: #05ff32;
  border: 1px solid #05ff32;
}
.status-inactive {
  background: rgba(255, 67, 97, 0.2);
  color: #ff4361;
  border: 1px solid #ff4361;
}

/* === FORM ROW === */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.form-group {
  margin-bottom: 20px;
}

/* === TOTAL BOX === */
.total-box {
  background: rgba(0, 20, 25, 0.9);
  padding: 20px;
  border-radius: 5px;
  margin-top: 20px;
  border: 2px solid #00fff9;
  box-shadow: 0 0 15px #00fff933;
}
.total-box h3 {
  color: #00fff9;
  margin-bottom: 10px;
  font-size: 1.1em;
}
.total-amount {
  font-size: 32px;
  font-weight: bold;
  color: #05ff32;
  text-shadow: 0 0 10px #05ff3299;
}

/* === RESPONSIVE === */
@media (max-width:1100px){
  .center-box{padding:12px 2vw 10px 2vw;}
}
@media (max-width:900px){
  .layout{flex-direction:column;}
  .sidebar{flex-direction:row;min-width:unset;width:100vw;height:auto;overflow-x:auto;border-right:none;border-bottom:2px solid #00fff933;box-shadow:0 2px 20px #00fff933;}
  .sidebar-logo{margin:12px;width:45px;height:45px;font-size:1.3em;}
  .sidebar-menu{flex-direction:row;gap:2px;}
  .menu-link{padding:7px 12px 7px 15px;font-size:0.99em;}
  .sidebar-footer{display:none;}
  .center-box{margin:10px 0;}
}
@media (max-width:650px){
  .widget, .center-box, .dashboard-container {padding:12px 2vw 10px 2vw;min-width:unset;}
  .widgets-row{flex-direction:column;gap:12px;}
  .widget{min-width:unset;}
  .sidebar-logo{width:38px;height:38px;}
  .form-row{grid-template-columns: 1fr;}
}

/* === MOBILE RESPONSIVE FOR LOGIN/REGISTER === */
@media (max-width: 768px) {
  .center-box {
    margin: 20px auto !important;
    padding: 20px 15px !important;
    max-width: 95% !important;
    border-radius: 12px;
  }
  
  .glitch-title {
    font-size: 1.1em !important;
    letter-spacing: 1px !important;
    margin-bottom: 20px;
  }
  
  .form-group {
    margin-bottom: 18px;
  }
  
  label {
    font-size: 0.9em !important;
    margin-bottom: 6px;
  }
  
  input[type="email"],
  input[type="password"],
  input[type="text"],
  input[type="number"],
  select {
    padding: 12px 10px !important;
    font-size: 0.95em !important;
    margin-bottom: 12px;
  }
  
  .neon-btn {
    padding: 12px 20px !important;
    font-size: 0.95em !important;
    letter-spacing: 0.8px !important;
  }
  
  .terminal {
    font-size: 0.9em !important;
    padding: 10px 12px !important;
    margin-bottom: 15px;
  }
  
  .back-link {
    font-size: 0.9em !important;
    margin-top: 15px;
    padding: 0 10px;
  }
  
  .header {
    padding: 15px 10px !important;
  }
  
  .header h1 {
    font-size: 1.1em !important;
    letter-spacing: 1px !important;
  }
  
  .user-info {
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
  }
  
  .user-info span {
    font-size: 0.85em !important;
  }
  
  .logout-btn {
    padding: 6px 12px !important;
    font-size: 0.85em !important;
  }
}

@media (max-width: 480px) {
  .center-box {
    margin: 15px auto !important;
    padding: 18px 12px !important;
    max-width: 98% !important;
  }
  
  .glitch-title {
    font-size: 1em !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 15px;
  }
  
  .glitch-title::before,
  .glitch-title::after {
    font-size: 1em !important;
  }
  
  input[type="email"],
  input[type="password"],
  input[type="text"],
  input[type="number"],
  select {
    padding: 10px 8px !important;
    font-size: 0.9em !important;
  }
  
  .neon-btn {
    padding: 10px 15px !important;
    font-size: 0.9em !important;
  }
  
  .terminal {
    font-size: 0.85em !important;
    padding: 8px 10px !important;
  }
  
  .back-link {
    font-size: 0.85em !important;
    word-break: break-word;
    text-align: center;
  }
  
  .header-content {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .header h1 {
    font-size: 1em !important;
  }
  
  .user-info {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}