/* ============================================================
   CRD - Central Record Directory - by NYUC team
   Dark navy theme (Milord-Web palette), Arial text, mono ids
   ============================================================ */

* { box-sizing: border-box; }

:root {
  --navy: #0d1526;
  --panel: #14213d;
  --panel-2: #182a4d;
  --red: #e63946;
  --red-dark: #c1121f;
  --gold: #c9973a;
  --pale: #a9cbe5;
  --pale-2: #cfe1f0;
  --line: #2c3f63;
  --text: #eef2f8;
  --muted: #93a3c2;
  --radius: 14px;
}

body {
  margin: 0;
  background: radial-gradient(circle at top, #16203a 0%, var(--navy) 65%);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  font-size: 14px;
  padding: 26px 16px 60px;
  min-height: 100vh;
}

.mono { font-family: "Lucida Console", Monaco, monospace; }

/* ---------------- LOGIN ---------------- */
.login-wrap { min-height: 90vh; display: flex; align-items: center; justify-content: center; }
.login-box {
  background: var(--panel); border-radius: var(--radius); width: 400px; max-width: 100%;
  padding: 34px 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  border: 1px solid var(--line);
}
.login-logo { width: 74px; height: 74px; object-fit: contain; }
.logo-text-fallback {
  width: 74px; height: 74px; margin: 0 auto; border-radius: 12px;
  background: linear-gradient(135deg, var(--red-dark), var(--red));
  color: #fff; font-weight: bold; font-size: 21px; line-height: 74px;
}
.login-box h1 { font-size: 17px; letter-spacing: 2px; color: var(--pale); margin: 16px 0 14px; }
.warn {
  background: rgba(230,57,70,0.12); border-left: 4px solid var(--red); color: #ffb3b8;
  font-size: 12px; padding: 11px 13px; text-align: left; margin-bottom: 16px; line-height: 1.5; border-radius: 0 8px 8px 0;
}
.login-label { font-size: 11px; color: var(--muted); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 1px; }
.login-code {
  font-size: 30px; letter-spacing: 8px; background: rgba(0,0,0,0.25); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; color: var(--pale-2); font-weight: bold;
}
.remember { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin: 16px 0; text-align: left; }
.tip { font-size: 12px; color: var(--pale-2); background: rgba(169,203,229,0.1); padding: 9px 11px; border-radius: 8px; text-align: left; }
.login-status { font-size: 12px; color: var(--muted); margin-top: 14px; }
.denied-box {
  background: rgba(230,57,70,0.16); border: 1px solid var(--red); color: #ff8a92; font-weight: bold;
  letter-spacing: 2px; padding: 16px; border-radius: 10px; margin-top: 10px; font-size: 15px;
}

/* ---------------- APP SHELL ---------------- */
.sheet {
  background: var(--panel); border-radius: var(--radius); max-width: 1050px; margin: 0 auto;
  padding: 30px 34px 34px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); border: 1px solid var(--line);
}

.sheet-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.brand { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.brand-logo { height: 26px; width: 26px; object-fit: contain; border-radius: 6px; }
.brand-name { font-size: 24px; font-weight: bold; letter-spacing: -0.5px; color: #fff; }
.brand-sub { font-size: 12px; color: var(--muted); font-weight: bold; }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.search-input {
  width: 220px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; font-family: Arial; background: rgba(0,0,0,0.25); color: var(--text);
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { outline: none; border-color: var(--pale); box-shadow: 0 0 0 3px rgba(169,203,229,0.15); }

/* nav */
.nav { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.nav a {
  padding: 7px 14px; font-size: 12px; border-radius: 8px; color: var(--muted);
  text-decoration: none; cursor: pointer; background: rgba(255,255,255,0.04); font-weight: bold;
}
.nav a:hover { background: var(--red); color: #fff; }
.nav a.on { background: var(--pale); color: var(--navy); }

/* sub tabs */
.subtabs { display: flex; gap: 6px; margin: 4px 0 16px; }
.subtabs .sub {
  padding: 6px 14px; font-size: 12px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted); cursor: pointer; font-weight: bold;
}
.subtabs .sub.on { background: var(--pale); color: var(--navy); border-color: var(--pale); }

/* buttons */
button.blue, button.black {
  background: var(--pale); color: var(--navy); border: none; padding: 9px 16px; border-radius: 8px;
  font-size: 13px; font-weight: bold; cursor: pointer; font-family: Arial;
}
button.blue:hover, button.black:hover { background: #c7ddf0; }
button.ghost {
  background: transparent; color: var(--text); border: 1px solid var(--line); padding: 8px 14px;
  border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer; font-family: Arial;
}
button.ghost:hover { background: rgba(255,255,255,0.06); }
button.danger { background: var(--red); color: #fff; border: none; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer; }
button.danger:hover { background: var(--red-dark); }
button.gold { background: var(--gold); color: #241a05; border: none; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer; }
button.gold:hover { background: #e0ae4e; }

/* headings */
h2.page-title { font-size: 22px; margin: 0 0 4px; color: #fff; }
p.page-sub { font-size: 13px; color: var(--muted); margin: 0 0 20px; }
h3.sec { font-size: 17px; margin: 26px 0 10px; color: #fff; }

/* banners */
.banner {
  border-left: 4px solid var(--red); background: rgba(230,57,70,0.1); padding: 12px 16px;
  font-size: 12px; font-weight: bold; letter-spacing: 0.4px; color: #ffb3b8; margin-bottom: 20px; border-radius: 0 8px 8px 0;
}
.banner-info { border-left-color: var(--pale); background: rgba(169,203,229,0.1); color: var(--pale-2); text-transform: none; }
.banner a, .banner .lnk { color: var(--pale); text-decoration: none; }

/* home tiles */
.tiles { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 20px; }
.tile {
  width: 210px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 26px 10px 20px; text-align: center; cursor: pointer; transition: background .12s, transform .1s;
}
.tile:hover { background: var(--red); transform: translateY(-2px); }
.tile:hover .tile-label, .tile:hover .tile-count { color: #fff; }
.tile-ic { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.tile-label { color: var(--pale-2); font-weight: bold; font-size: 15px; letter-spacing: .3px; }
.tile-count { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* profile / case detail */
.profile-top { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.pp { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: rgba(255,255,255,0.05); }
.pp-text {
  width: 70px; height: 70px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red-dark), var(--red));
  color: #fff; font-weight: bold; font-size: 24px; text-align: center; line-height: 70px;
}
.profile-name { font-size: 26px; font-weight: bold; margin: 0; color: #fff; }
.lnk { color: var(--pale); font-weight: bold; text-decoration: none; cursor: pointer; }
.lnk:hover { text-decoration: underline; }

.field { font-size: 14px; margin: 7px 0; color: var(--text); }
.field b { font-weight: bold; color: var(--pale-2); }

.pill { display:inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: bold; }
.pill-green { background:rgba(34,197,94,0.18); color:#4ade80; }
.pill-red { background:rgba(230,57,70,0.18); color:#ff8a92; }
.pill-yellow { background:rgba(201,151,58,0.2); color:var(--gold); }
.pill-grey { background:rgba(255,255,255,0.08); color:var(--muted); }
.pill-blue { background:rgba(169,203,229,0.18); color:var(--pale-2); }

/* rows / lists */
.case-row {
  border:1px solid var(--line); background: rgba(255,255,255,0.02); border-radius:10px; padding:11px 14px; margin-bottom:7px;
  cursor:pointer; font-size:13px; display:flex; align-items:center; gap:12px;
}
.case-row:hover { background: rgba(255,255,255,0.06); }
.case-num { font-weight:bold; color:var(--pale); }

/* forms */
input[type=text], textarea, select {
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font-size:13px; font-family:Arial; margin-bottom:9px; background: rgba(0,0,0,0.2); color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { height:70px; resize:vertical; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--pale); box-shadow:0 0 0 3px rgba(169,203,229,0.15); }
.row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }
.row > * { flex:1; min-width:170px; }
select option { background: var(--panel); color: var(--text); }

.edit-panel { background: rgba(0,0,0,0.2); border:1px solid var(--line); border-radius:10px; padding:18px; margin-top:18px; }
.box { border:1px solid var(--line); background: rgba(255,255,255,0.02); border-radius:10px; padding:18px; margin-top:14px; }

.actions { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px; }
.small { font-size:12px; color: var(--muted); }
.msg-ok { color:#4ade80; font-weight:bold; font-size:13px; margin-top:10px; }
.msg-err { color:#ff8a92; font-weight:bold; font-size:13px; margin-top:10px; }
.audit-row { border-bottom:1px solid var(--line); padding:9px 4px; font-size:12px; color: var(--text); }
.footer { text-align:center; font-size:11px; color: var(--muted); margin-top:34px; }

@media (max-width:640px){
  body { padding:12px 8px 40px; }
  .sheet { padding:20px 18px; }
  .search-input { width:140px; }
  .profile-name { font-size:22px; }
  .tiles { flex-direction:column; align-items: center; }
  .tile { width: 100%; max-width: 280px; }
}

@media (hover: none) and (pointer: coarse) {
  body, .sheet, .nav, .banner, .profile-name, .field, .case-row, .tile, .pill, button, .lnk, .brand {
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    -webkit-touch-callout: none;
  }
  input, textarea, select, .mono, .case-num { -webkit-user-select: text; user-select: text; }
  a, button, .case-row, .tile, .nav a { -webkit-tap-highlight-color: transparent; }
}