:root{
  --blue: #203a7a;
  --blue-hover: #2a4a9a;
  --green: #2f8f4e;
  --green-hover: #39a25b;
  --brown: #6d4a2f;
  --brown-hover: #855a38;
  --bg: #0b0e14;
  --panel: #12151c;
  --muted: #1a1f26;
  --text: #e6e7ea;
  --subtext: #a9b1bb;
  --accent: #5cc8ff;
  --danger: #ff5c7a;
  --ok: #61d095;
  --warn: #ffb85c;
  --border: #232933;
  --btn: #171b22;
  --btn-hover: #1f2530;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin:0 auto;padding:18px}
.app-title{display:flex;align-items:center;justify-content:space-between;margin:6px 0 16px 0}
.logo{font-weight:700;letter-spacing:.3px}
.badge{background:var(--muted);padding:4px 8px;border-radius:999px;color:var(--subtext)}

.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 2px 24px rgba(0,0,0,.35)}
.pad{padding:16px}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.toolbar .btn,
.btn{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--btn);color:var(--text);cursor:pointer}
.toolbar .btn:hover,
.btn:hover{background:var(--btn-hover)}
.toolbar .btn:disabled{opacity:.4;cursor:not-allowed}

.right{margin-left:auto}
.input, .login input{background:#0f1116;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px 10px}

.breadcrumbs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0 10px 0}
.crumb{background:var(--muted);padding:4px 8px;border-radius:8px}
.crumb a{color:var(--text)}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px 8px;vertical-align:middle}
.table tr:hover td{background:#12151b}
.namecell{display:flex;align-items:center;gap:8px}

.tag{font-size:12px;color:var(--subtext)}
.actions{display:flex;gap:6px;justify-content:flex-end}
.action-btn{background:var(--btn);border:1px solid var(--border);border-radius:8px;padding:6px 8px;cursor:pointer}
.action-btn:hover{background:var(--btn-hover)}

.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.small{font-size:12px;color:var(--subtext)}
.lang-toggle{cursor:pointer;background:var(--muted);border:1px solid var(--border);padding:6px 10px;border-radius:999px}

.login{max-width:380px;margin:18vh auto 0;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px}
.login h1{font-size:18px;margin:0 0 14px 0}
.login .row{gap:8px}
.login button{width:100%;padding:10px;border-radius:10px;background:var(--accent);border:0;color:black;font-weight:600;cursor:pointer}
.login .error{color:var(--danger);margin:8px 0 0 0}
.footer{margin-top:18px;color:var(--subtext);text-align:center;font-size:12px}

.hidden{display:none !important}
.bad{color:var(--danger)}
.good{color:var(--ok)}
.warn{color:var(--warn)}
.checkbox{width:18px;height:18px}
.icon{font-family:monospace;opacity:.7}

.topline{display:flex;align-items:center;gap:10px;justify-content:space-between}
.topline .left{display:flex;align-items:center;gap:8px}

/* Custom button colors */
#btnCopy, #btnPaste, #btnMove { background:#0a2a5c; border-color:#0a2a5c; }
#btnCopy:hover, #btnPaste:hover, #btnMove:hover { background:#133b7a; }

#btnNewFolder { background:#1e7d2b; border-color:#1e7d2b; color:#fff; }
#btnNewFolder:hover { background:#27963a; }

#btnDownload { background:#7a4b00; border-color:#7a4b00; color:#fff; }
#btnDownload:hover { background:#9c6308; }

#btnLogout { background:var(--btn); border:1px solid var(--border); border-radius:10px; color:var(--text); }
#btnLogout:hover { background:var(--btn-hover); }


/* Specific toolbar button colors */
#btnCopy, #btnPaste, #btnMove { background: var(--blue); }
#btnCopy:hover, #btnPaste:hover, #btnMove:hover { background: var(--blue-hover); }

#btnNewFolder { background: var(--green); }
#btnNewFolder:hover { background: var(--green-hover); }

#btnDownload { background: var(--brown); }
#btnDownload:hover { background: var(--brown-hover); }

/* Logout should look like other .btn (no accent overrides) */
#btnLogout.btn { background: var(--btn); }
#btnLogout.btn:hover { background: var(--btn-hover); }


/* ENFORCED specific colors */
#btnCopy, #btnPaste, #btnMove { background: var(--blue) !important; }
#btnCopy:hover, #btnPaste:hover, #btnMove:hover { background: var(--blue-hover) !important; }
#btnCopy:disabled, #btnPaste:disabled, #btnMove:disabled { background: var(--blue) !important; opacity: .6; }

#btnNewFolder { background: var(--green) !important; }
#btnNewFolder:hover { background: var(--green-hover) !important; }

#btnDownload { background: var(--brown) !important; }
#btnDownload:hover { background: var(--brown-hover) !important; }

/* Logout identical to other buttons */
#btnLogout { border:1px solid var(--border) !important; border-radius:10px !important; background: var(--btn) !important; color: var(--text) !important; padding:8px 10px !important; cursor:pointer !important; }
#btnLogout:hover { background: var(--btn-hover) !important; }

/* Login button to match button design */
#btnLogin { border:1px solid var(--border) !important; border-radius:10px !important; background: var(--btn) !important; color: var(--text) !important; padding:10px !important; font-weight:600; width:100%; cursor:pointer; }
#btnLogin:hover { background: var(--btn-hover) !important; }


/* alignment fix for header controls */
.app-title .row { align-items: center; gap: 8px; }
#btnLogout { vertical-align: middle; }

/* small spacing below password input and before login button */
#loginPass { margin-bottom: 8px; }
#btnLogin { margin-top: 6px; }


/* Uniform row height for file/folder list */
#fileBody tr { height: 44px; }

/* Delete button in red */
#btnDelete { background: #832132 !important; }
#btnDelete:hover { background: #832132 !important; }

/* Rename button background */
#btnRename { background: #2A1216 !important; }
#btnRename:hover { background: #2A1216 !important; }

/* Upload buttons background */
label.btn[for="fileUpload"],
label.btn[for="folderUpload"] { background: #342513 !important; }
label.btn[for="fileUpload"]:hover,
label.btn[for="folderUpload"]:hover { background: #342513 !important; }


/* Match Actions column buttons to toolbar colors */
.actions .action-btn:nth-child(1){ background: #832132 !important; }          /* Delete */
.actions .action-btn:nth-child(1):hover{ background: #832132 !important; }
.actions .action-btn:nth-child(2){ background: #2A1216 !important; }      /* Rename */
.actions .action-btn:nth-child(2):hover{ background: #2A1216 !important; }
.actions .action-btn:nth-child(3){ background: var(--brown) !important; } /* Download */
.actions .action-btn:nth-child(3):hover{ background: var(--brown) !important; }

/* Continuous row separators for files/folders list */
.table tbody tr{ border-bottom:1px solid var(--border); }
.table tbody td{ border-bottom:none; }