/* ============================================================
   style.css — WUSL Document Tracker
   Follows FIS Design System (DESIGN_SYSTEM.md)
   ============================================================ */

/* 1. CSS Variables */
:root {
  --brand-dark:    #0d2137;
  --brand-mid:     #1a3a5c;
  --brand-hover:   #254f7a;
  --page-bg:       #0f2744;
  --accent-blue:   #5eb8ff;
  --muted:         #6c757d;
  --light-ash:     #e9ecef;
  --border-ash:    #ced4da;
  --error-orange:  #e67e22;
  --error-red:     #c0392b;
}

/* ── 2. Auth / Landing page ─────────────────────────────────── */
body.auth-page {
  background: var(--page-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login-box {
  display: flex;
  max-width: 860px;
  width: 95%;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  overflow: hidden;
}

.login-brand {
  flex: 1;
  background: linear-gradient(180deg, #1a3a5c, #0d2137);
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.login-brand img { max-width: 180px; height: auto; margin-bottom: 1.5rem; border:10px solid #fff;border-radius: 15px; }
.login-brand h2  { font-weight: 700; font-size: 1.5rem; color: #fff; margin-bottom: .5rem; }
.login-brand p   { color: rgba(255,255,255,.55); font-size: .875rem; }

.login-content {
  flex: 1;
  background: #fff;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 600px) {
  .login-box { flex-direction: column; }
  .login-brand { padding: 2rem 1.5rem; }
  .login-content { padding: 2rem 1.5rem; }
}

/* Google sign-in button */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: #fff;
  border: 2px solid var(--border-ash);
  border-radius: 8px;
  padding: .75rem 1.5rem;
  font-weight: 600;
  color: #444;
  font-size: .95rem;
  text-decoration: none;
  transition: all .2s;
  width: 100%;
}
.btn-google:hover { border-color: var(--brand-mid); background: #f8f9fa; color: var(--brand-mid); }

/* Auth page footer */
.auth-footer { color: rgba(255,255,255,.35); font-size: .78rem; margin-top: 2rem; text-align: center; }

/* ── 3. App body ─────────────────────────────────────────────── */
/* Sidebar colour (220 px) extends behind the footer via a body gradient. */
body.app-page {
  background: linear-gradient(to right, var(--brand-dark) 220px, #fff 220px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-content { flex: 1; padding: 1.5rem; }

/* ── 4. Navbar ───────────────────────────────────────────────── */
.app-navbar {
  height: 64px;
  background: linear-gradient(90deg, #0f2744, #1a3a5c);
  padding: 0 1.5rem 0 0;
  flex-shrink: 0;
  border-bottom: 2px solid #1a3a5c;
}
.navbar-logo-block {
  background: #fff;
  padding: 0 1.1rem;
  height: 64px;
  display: flex;
  align-items: center;
}
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 50px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.22);
  padding: .3rem .75rem;
}
.user-pill .user-name { font-size: .82rem; color: rgba(255,255,255,.92); }
.user-pill img { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); object-fit: cover; }
.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  padding: .4rem .9rem;
  text-decoration: none;
  transition: background .2s;
}
.btn-logout:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ── 5. Buttons ──────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--brand-mid) !important;
  border-color: var(--brand-mid) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}
.btn { border-radius: 8px; font-weight: 600; }

/* ── 6. Form inputs ──────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: 8px !important;
  padding: .65rem 1rem;
  border-color: #dee2e6;
  font-size: .9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-mid) !important;
  box-shadow: 0 0 0 .2rem rgba(26,58,92,.15) !important;
}
.form-label { font-weight: 600; font-size: .82rem; color: #495057; }

/* ── 7. Cards ────────────────────────────────────────────────── */
.stat-card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.2); }
.doc-card  { border-radius: 10px; border: 1px solid #e9ecef; transition: box-shadow .15s; }
.doc-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* ── 8. Document status badges ───────────────────────────────── */
.badge-status { font-size: .78rem; padding: .35em .65em; border-radius: 6px; }
.bg-status-received   { background-color: #198754 !important; }
.bg-status-in_process { background-color: #fd7e14 !important; }
.bg-status-sent       { background-color: #6c757d !important; }
.badge-confidential   { background-color: var(--error-red) !important; }
.badge-normal         { background-color: var(--brand-mid) !important; }

/* ── 9. Typography ───────────────────────────────────────────── */
h4.panel-heading { font-weight: 700; color: var(--brand-mid); }
.text-brand      { color: var(--brand-mid) !important; }
.page-subtitle   { color: var(--muted); font-size: .875rem; }

/* ── 10. Footer ──────────────────────────────────────────────── */
.app-footer {
  font-size: .78rem;
  color: #616364;
  text-align: center;
  padding: .9rem 1rem;
  margin-top: auto;
  /* Transparent so the body gradient (sidebar dark colour) shows
     through on the left, making the sidebar fill the full height. */
  background: transparent;
}

/* ── 11. Document timeline ───────────────────────────────────── */
.timeline { list-style: none; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0;
                    width: 2px; background: #e9ecef; }
.timeline-item { display: flex; gap: 1rem; padding: .75rem 0; position: relative; }
.timeline-icon { width: 40px; height: 40px; border-radius: 50%; display: flex;
                 align-items: center; justify-content: center; flex-shrink: 0;
                 font-size: 1rem; z-index: 1; }
.timeline-body { flex: 1; padding: .4rem .75rem; border-radius: 8px; background: #f8f9fa; }

/* ── 12. Alerts & toasts ─────────────────────────────────────── */
.flash-message { border-radius: 10px; font-size: .9rem; }

/* ── 13. Table tweaks ────────────────────────────────────────── */
.table th { font-size: .82rem; text-transform: uppercase;
            letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.table td { font-size: .9rem; vertical-align: middle; }
/* First column left padding — prevents content touching the card edge */
.table th:first-child,
.table td:first-child { padding-left: 1.25rem !important; }
/* Last column right padding — symmetrical */
.table th:last-child,
.table td:last-child  { padding-right: 1.25rem !important; }

/* ── 14. Sidebar ─────────────────────────────────────────────── */
.sidebar { background: var(--brand-dark); min-height: calc(100vh - 64px); width: 220px;
           flex-shrink: 0; padding: 1rem 0; overflow: hidden; }
.sidebar .nav-link { color: rgba(255,255,255,.7); font-size: .88rem; padding: .55rem 1.25rem;
                     border-radius: 0; display: flex; align-items: center; gap: .6rem;
                     white-space: nowrap; }
.sidebar .nav-link:hover, .sidebar .nav-link.active
  { background: rgba(255,255,255,.1); color: #fff; }
.sidebar .nav-link i { font-size: 1rem; flex-shrink: 0; }
.sidebar-section-title { padding: .75rem 1.25rem .5rem; font-size: .68rem;
                         text-transform: uppercase; letter-spacing: .1em;
                         color: rgba(255,255,255,.35); font-weight: 700; }
.sidebar-version { padding: .75rem 1rem; font-size: .72rem;
                   color: rgba(255,255,255,.3); }

/* ── 15. Navbar: app name + user dropdown button ──────────────── */
.navbar-app-name { color: #1a3a5c; font-size: .92rem; font-weight: 600;
                   letter-spacing: .01em; line-height: 1.2;
                   text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.navbar-toggle-btn { background: none; border: none; color: rgba(255,255,255,.75);
                     font-size: 1.45rem; line-height: 1; padding: .3rem .45rem;
                     border-radius: 6px; cursor: pointer;
                     transition: color .15s, background .15s; }
.navbar-toggle-btn:hover { color: #fff; background: rgba(255,255,255,.12); }

.navbar-user-btn { display: inline-flex; align-items: center; gap: .45rem;
                   background: rgba(255,255,255,.11);
                   border: 1px solid rgba(255,255,255,.22); border-radius: 50px;
                   padding: .28rem .75rem .28rem .35rem;
                   color: rgba(255,255,255,.92); font-size: .82rem; cursor: pointer;
                   transition: background .15s; }
.navbar-user-btn:hover,
.navbar-user-btn:focus  { background: rgba(255,255,255,.2); color: #fff; outline: none; }
.navbar-user-btn::after { display: none; }  /* hide Bootstrap caret */
.navbar-user-btn img    { width: 30px; height: 30px; border-radius: 50%;
                          border: 1.5px solid rgba(255,255,255,.4); object-fit: cover; }

/* Sign-out dropdown item — ensure red colour survives Bootstrap's hover override */
.dropdown-item.text-danger       { color: #2b5ec0 !important;
                                   font-weight: 600 !important;
                                   font-size: .82rem !important; }
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus { background-color: #f0f4fe !important;
                                   color: #c0392b !important; }

/* ── 17. Mobile block ────────────────────────────────────────
   A tiny inline <script> in <head> adds 'is-mobile' to <html>
   synchronously before first paint when innerWidth < 992px.
   CSS then hides ALL app content and shows only the notice.
   The login page (auth-page) is already responsive — unaffected. */

/* Hidden by default on all screen sizes */
.mobile-block { display: none; }

/* ── On mobile: hide every app-page child except the notice ── */
html.is-mobile body.app-page {
  background: var(--page-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  box-sizing: border-box;
}

html.is-mobile body.app-page > *:not(.mobile-block) {
  display: none !important;
}

html.is-mobile body.app-page .mobile-block {
  display: flex;
}

/* ── Notice card ─────────────────────────────────────────────── */
.mobile-block {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mobile-block-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 2rem 2rem 1.5rem;
  max-width: 340px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.mobile-block-logo {
  max-width: 80px;
  height: auto;
  border-radius: 12px;
  border: 5px solid #fff;
  margin-bottom: 1.25rem;
}

.mobile-block-card h5 {
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: .65rem;
}

.mobile-block-card p {
  color: rgba(255,255,255,.65);
  font-size: .88rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.mobile-block-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .72rem;
  color: rgba(255,255,255,.3);
  width: 100%;
}