/* TrakRI theme: the legacy trak_next look (Inter headings, Roboto body, navy #1d4c7e / lime #aed136),
   applied on top of the family's Bootstrap overrides. Self-hosted fonts live in ./fonts. */

@font-face { font-family: 'Roboto'; font-weight: 300; src: url("/assets/fonts/Roboto-Light-cf8257a1.ttf") format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 400; src: url("/assets/fonts/Roboto-Regular-78ba33c2.ttf") format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 500; src: url("/assets/fonts/Roboto-Medium-697651ea.ttf") format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 700; src: url("/assets/fonts/Roboto-Bold-0998e8f0.ttf") format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 400; src: url("/assets/fonts/Inter-Regular-72e1c279.ttf") format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 500; src: url("/assets/fonts/Inter-Medium-2c96f893.ttf") format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 700; src: url("/assets/fonts/Inter-Bold-1fb65b81.ttf") format('truetype'); }

:root {
  --kr-navy: #1d4c7e;
  --kr-lime: #aed136;
  --kr-dark: #3c3c3c;
  --kr-gray: #666666;
  --kr-light-grey: #d9d9d9;
  --kr-grey-blue: #637480;
  --kr-border: #e5e8eb;
  --kr-table-header: #f4f6f8;
  --kr-red-button: #eb5757;
  --kr-gray-button: #828282;
  --kr-progress-green: #6fcf97;
  --kr-progress-gray: #9898a5;
  --kr-status-pending: #ff6d77;
  --kr-status-in-progress: #f9c401;
  --kr-status-complete: #6fcf97;
  --kr-box-pending: #ff5b62;
  --kr-box-in-progress: #f9c401;
  --kr-box-complete: #6cc33d;
}

body.body-overrides {
  font-family: 'Roboto', Arial, sans-serif;
}

h1, h2 {
  font-family: 'Inter', 'Roboto', Arial, sans-serif;
  font-weight: 700;
}

/* White card used across the app (legacy Container component). */
.kr-card {
  background: #fff;
  border: 1px solid var(--kr-light-grey);
  box-shadow: 0 4px 12px 3px rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  padding: 24px 30px;
}

.kr-subtitle {
  font-weight: 700;
  font-size: 16px;
  color: var(--kr-dark);
  border-bottom: 1px solid var(--kr-border);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* Page banner: "<Client> - <Project>" with the action buttons on the right (legacy DetailsBanner). */
.kr-details-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 30px;
  margin-bottom: 20px;
}

.kr-details-banner h1 {
  font-size: 27px;
  color: #333;
  margin: 0;
}

.kr-details-banner .kr-banner-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kr-back-button {
  color: var(--kr-navy);
  text-decoration: none;
  font-weight: 700;
  margin-right: 12px;
}

.kr-back-button:hover {
  text-decoration: underline;
}