/* assets/css/tnr-theme.css
   Centralized TNR theme (primary orange #F15A29)
*/

:root{
  --tnr-primary: #F15A29;
  --tnr-primary-dark: #d24d23;
  --tnr-accent: #111827;
  --tnr-bg: #fafafa;
  --card-bg: #ffffff;
  --muted: #6b7280;
  --soft-border: #e6e6e6;
}

/* Reset basics */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: "Segoe UI", Roboto, Arial, sans-serif;background:var(--tnr-bg);color:var(--tnr-accent);}

/* ===== Login box ===== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(241,241,241,0.9), rgba(250,250,250,0.9));
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

.login-box {
  width: 420px;
  max-width: 94%;
  background: rgba(255,255,255,0.98);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(18,18,18,0.08);
  padding: 36px 32px;
  text-align: center;
  position: relative;
}

/* logo */
.login-logo img{ max-width: 220px; height: auto; display:block; margin:0 auto 14px; }

/* title */
.login-title{ font-size:1.4rem; font-weight:700; margin-bottom: 18px; color:var(--tnr-accent); }

/* inputs */
.form-group{ margin-bottom:18px; position:relative; }
.form-control{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--soft-border);
  outline: none;
  font-size:0.98rem;
  background: #fff;
  transition: box-shadow .15s, border-color .15s;
}
.form-control:focus{ border-color: var(--tnr-primary); box-shadow: 0 6px 18px rgba(241,90,41,0.12); }

/* buttons */
.btn-tnr{
  display:inline-block;
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:none;
  color:#fff;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  background: linear-gradient(90deg, var(--tnr-primary) 0%, var(--tnr-primary-dark) 100%);
  box-shadow: 0 8px 22px rgba(241,90,41,0.18);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.btn-tnr:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(241,90,41,0.22); opacity:0.98; }

/* remember */
.remember-me{ display:flex; align-items:center; gap:8px; font-size:0.95rem; color:var(--muted); justify-content:flex-start; }

/* alerts */
.alert{ border-radius:10px; padding:10px 12px; margin-bottom:14px; font-weight:600; display:flex; align-items:center; gap:10px;}
.alert svg{width:18px;height:18px;flex-shrink:0;}
.alert-error{ background:#fff5f5; color:#7f1d1d; border:1px solid #ffd7d7; }
.alert-success{ background:#f0fdf4; color:#14532d; border:1px solid #bbf7d0; }
.alert-info{ background:#eff6ff; color:#1e3a8a; border:1px solid #bfdbfe; }
.alert-warning{ background:#fffbeb; color:#92400e; border:1px solid #fde68a; }

/* ===== App layout (sidebar + content) ===== */
.app-wrapper{ display:flex; min-height:100vh; }

/* sidebar */
.sidebar{
  width:240px;
  background: linear-gradient(180deg, var(--tnr-primary), var(--tnr-primary-dark));
  color: #fff;
  display:flex;
  flex-direction:column;
  padding:22px 18px;
  gap:12px;
}

/* logo in sidebar */
.sidebar-header img{ max-width:160px; height:auto; display:block; margin:6px auto 12px; }

/* nav */
.sidebar-nav{ list-style:none; margin:0; padding:6px 0; display:flex; flex-direction:column; gap:6px; }
.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  color:rgba(255,255,255,0.95);
  text-decoration:none;
  font-weight:600;
  transition: background .12s, transform .12s;
}
.sidebar-nav a:hover{ background: rgba(255,255,255,0.06); transform: translateX(3px); }
.sidebar-nav .active a{ background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.03); }

/* main content */
.main-content{ flex:1; display:flex; flex-direction:column; }
.topbar{ background: #fff; padding:14px 22px; box-shadow:0 1px 6px rgba(18,18,18,0.04); }
.topbar h2{ margin:0; font-size:1.15rem; color:var(--tnr-accent); }

/* content area */
.content-area{ padding:26px; }

/* cards */
.cardx{
  background:var(--card-bg);
  border-radius:12px;
  padding:18px;
  box-shadow:0 6px 20px rgba(18,18,18,0.05);
  margin-bottom:18px;
}

/* table styling */
table{ width:100%; border-collapse:collapse; border-radius:8px; overflow:hidden; border:1px solid var(--soft-border); background:var(--card-bg);}
th,td{ padding:12px 14px; font-size:0.95rem; text-align:left; border-bottom:1px solid var(--soft-border); }
th{ background: linear-gradient(90deg, rgba(241,90,41,0.95), rgba(210,77,35,0.95)); color:#fff; font-weight:700; }
tr:nth-child(even) td{ background:#fbfbfb; }

/* buttons used in admin */
.btn { padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:600; display:inline-block; color:#fff; }
.btn-role{ background: linear-gradient(90deg, var(--tnr-primary), var(--tnr-primary-dark)); border: none; cursor:pointer; }
.btn-role:hover{ opacity:0.95; }
.btn-danger{ background:#dc2626; }

/* small helpers */
.label-muted{ color:var(--muted); font-size:0.9rem; }

/* responsive */
@media (max-width:800px){
  .sidebar{ display:none; }
  .login-box{ width:94%; }
  .app-wrapper{ flex-direction:column; }
}