/* 316 Capture: Three Sixteen look for WebODM.
   Loaded before WebODM's theme CSS, so some rules need !important.
   Brand colours come from threesixteen.co.za. */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --t16-navy: #00035D;
  --t16-navy-2: #0A1580;
  --t16-mint: #82FFB9;
  --t16-teal: #0B6E6E;
  --t16-text: #333333;
  --t16-line: #E3E6EF;
  --t16-tint: #F4F6FB;
  --t16-gradient: linear-gradient(180deg, #82FFB9 -45%, #00035D 80%);
  --t16-gradient-x: linear-gradient(90deg, #00035D 0%, #0B6E6E 55%, #82FFB9 100%);
  --t16-radius: 10px;
}

/* ---------- Type ---------- */
body { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; color: var(--t16-text); }
h1, h2, h3, h4, h5, .page-header, .panel-heading, .modal-title,
.navbar, #side-menu, .btn, .nav-tabs, label.control-label, .project-name, .name {
  font-family: 'Dosis', 'Inter', sans-serif !important;
  letter-spacing: .02em;
}
h1, h2, h3, h3 .name { color: var(--t16-navy); font-weight: 600; }
a { color: var(--t16-teal); }
a:hover, a:focus { color: var(--t16-navy); }

/* ---------- Header: white bar, full logo, gradient rule ---------- */
#navbar-top.navbar {
  background: #fff !important;
  border: 0 !important;
  min-height: 64px;
  box-shadow: 0 1px 0 var(--t16-line);
  position: relative;
}
#navbar-top.navbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--t16-gradient-x); z-index: 5;
}
/* WebODM positions these absolutely; lay them out as a simple row instead:
   [logo] | CAPTURE ............................ [account menu] [menu toggle] */
#navbar-top .navbar-header { height: 64px; display: flex; align-items: center; float: none; width: 100%; }
#navbar-top .navbar-brand {
  position: static !important; order: 1; float: none;
  height: 64px; padding: 10px 4px 10px 18px; display: flex; align-items: center;
}
#navbar-top .navbar-brand img {
  content: url('/plugins/threesixteen/316-logo.png');
  height: 42px; width: auto; max-width: none; margin: 0;
}
#navbar-top .navbar-link { order: 2; position: static !important; }
#navbar-top .navbar-top-links { order: 3; margin: 0 8px 0 auto !important; float: none !important; position: static !important; }
#navbar-top .navbar-toggle { order: 4; float: none; margin: 0 14px 0 0; }
#navbar-top .navbar-text {
  position: static !important; float: none;
  margin: 0 0 0 12px; padding-left: 14px; border-left: 1px solid var(--t16-line);
  color: var(--t16-teal) !important;
  font-family: 'Dosis', sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: .32em; text-transform: uppercase; line-height: 34px;
}
#navbar-top .navbar-link:hover .navbar-text { color: var(--t16-navy) !important; }
#navbar-top .navbar-top-links > li > a,
#navbar-top .navbar-top-links .fa { color: var(--t16-navy) !important; }
.navbar-default .navbar-toggle { border-color: var(--t16-line); }
.navbar-default .navbar-toggle .icon-bar { background: var(--t16-navy) !important; }

/* ---------- Sidebar: navy panel ---------- */
@media (min-width: 768px) {
  .navbar-default.sidebar {
    background: var(--t16-navy) !important;
    margin-top: 67px !important; border-right: 0;   /* 64px header + 3px gradient rule */
    top: 0; min-height: calc(100vh - 67px);
  }
  #page-wrapper { border-left: 0 !important; }
}
#side-menu > li { border-bottom: 1px solid rgba(255,255,255,.07) !important; }
#side-menu li a {
  color: rgba(255,255,255,.82) !important;
  font-weight: 500; font-size: 15px; letter-spacing: .04em;
  padding: 12px 18px; border-left: 3px solid transparent;
}
#side-menu li a .fa, #side-menu li a .fas, #side-menu li a .far { color: rgba(130,255,185,.75) !important; width: 22px; }
#side-menu li a:hover, #side-menu li a:focus { background: rgba(255,255,255,.06) !important; color: #fff !important; }
#side-menu li a.active, #side-menu li.active > a {
  background: rgba(130,255,185,.10) !important;
  color: var(--t16-mint) !important;
  border-left-color: var(--t16-mint);
}
#side-menu .nav-second-level { background: rgba(0,0,0,.18) !important; }
#side-menu .nav-second-level li a { padding-left: 46px; font-size: 14px; }
#side-menu .arrow { color: rgba(255,255,255,.5); }
@media (max-width: 767px) {
  .sidebar-nav.navbar-collapse { background: var(--t16-navy); }
}

/* ---------- Page ---------- */
#page-wrapper { background: var(--t16-tint) !important; padding-top: 18px; }
.page-header { border-bottom: 0; color: var(--t16-navy); }

/* ---------- Buttons: pills ---------- */
.btn { border-radius: 999px !important; font-weight: 600; letter-spacing: .05em; padding-left: 16px; padding-right: 16px; }
.btn-sm { padding-left: 13px; padding-right: 13px; }
.btn-xs { padding-left: 9px; padding-right: 9px; }
.btn-primary, .btn-primary:focus {
  background: var(--t16-gradient) !important;
  border: 0 !important; color: #fff !important;
  box-shadow: 0 2px 6px rgba(0,3,93,.22);
}
.btn-primary:hover, .btn-primary:active {
  background: var(--t16-navy) !important; color: var(--t16-mint) !important;
}
.btn-default, .btn-default:focus {
  background: #fff !important; color: var(--t16-navy) !important;
  border: 1px solid #C9CEE0 !important;
}
.btn-default:hover, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
  background: var(--t16-navy) !important; color: #fff !important; border-color: var(--t16-navy) !important;
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0 !important; }
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* ---------- Project / task cards ---------- */
.project-list-item.list-group-item {
  background: #fff !important; border: 1px solid var(--t16-line) !important;
  border-radius: var(--t16-radius) !important; margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0,3,93,.05);
}
.project-list-item .project-name, .project-list-item .name { color: var(--t16-navy); font-weight: 600; font-size: 18px; }
.task-list, .task-list-item, .table-responsive { border-color: var(--t16-line) !important; }
.task-list-item:hover { background: var(--t16-tint) !important; }
.progress-bar { background: var(--t16-gradient-x) !important; }
.panel, .modal-content, .dropdown-menu, .well { border-radius: var(--t16-radius) !important; border-color: var(--t16-line) !important; }
.modal-header { border-bottom: 3px solid transparent; border-image: var(--t16-gradient-x) 1; }
.modal-title { color: var(--t16-navy); font-weight: 600; }
.form-control { border-radius: 8px !important; border-color: #C9CEE0; }
.form-control:focus { border-color: var(--t16-teal); box-shadow: 0 0 0 3px rgba(11,110,110,.15); }
.nav-tabs > li.active > a { color: var(--t16-navy) !important; border-top: 3px solid var(--t16-teal) !important; }

/* ---------- Login / registration ---------- */
body.t16-auth { background: var(--t16-navy) !important; }
body.t16-auth::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 85% 110%, rgba(130,255,185,.28), transparent 60%),
    radial-gradient(700px 420px at 0% -10%, rgba(11,110,110,.45), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 22px, transparent 22px 60px);
}
body.t16-auth #wrapper { position: relative; z-index: 1; }
body.t16-auth #navbar-top { display: none !important; }
body.t16-auth section.main .content { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px 90px; }
body.t16-auth section.main .content > .col-sm-12 {
  float: none; margin: 0 !important; width: 100%; max-width: 440px;
  background: #fff; border-radius: 18px; padding: 34px 34px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.t16-auth-head { text-align: center; margin-bottom: 22px; }
.t16-auth-head img { width: 230px; max-width: 80%; height: auto; }
.t16-auth-head .t16-product {
  margin-top: 16px; font-family: 'Dosis', sans-serif; font-weight: 600;
  letter-spacing: .38em; text-transform: uppercase; color: var(--t16-teal); font-size: 14px;
}
.t16-auth-head .t16-tagline { margin-top: 4px; color: #6B7280; font-size: 13px; }
body.t16-auth .control-label { text-align: left !important; width: 100% !important; color: var(--t16-navy); font-weight: 600; }
body.t16-auth .form-group > div[class*="col-sm"] { width: 100% !important; margin-left: 0 !important; float: none; }
body.t16-auth [class*="col-sm-offset"], body.t16-auth [class*="col-md-offset"] { margin-left: 0 !important; }
body.t16-auth .form-group { margin-left: 0; margin-right: 0; }
body.t16-auth .form-group a { display: block; text-align: center; }
body.t16-auth .btn-primary { width: 100%; padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
body.t16-auth footer { color: rgba(255,255,255,.7) !important; background: transparent !important; border: 0 !important; }
body.t16-auth footer a { color: var(--t16-mint) !important; }
body.t16-auth footer .t16-disclaimer { color: #fff !important; }

/* ---------- Footer ---------- */
footer {
  font-size: 12px; color: #5B6170; padding: 12px 18px; text-align: center;
  border-top: 1px solid var(--t16-line); background: #fff;
  height: auto !important; line-height: 1.7; position: relative; z-index: 2;
}
@media (max-width: 767px) {
  footer .t16-disclaimer { display: block; }
  footer .t16-disclaimer + .t16-sep { display: none; }
}
footer .t16-disclaimer { color: var(--t16-navy); font-weight: 600; }
footer .t16-sep { margin: 0 8px; opacity: .5; }
footer a { color: var(--t16-teal); }