/* ============================================================
   ATN Service Portal - NAREN Brand Theme
   Primary Color: #FE2A2B (Logo Red)
   ============================================================ */

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #f8f6f7 !important;
}

/* ---- Brand Color Variables ---- */
:root {
  --brand-primary: #FE2A2B;
  --brand-primary-dark: #D41F20;
  --brand-primary-light: #FF6B6B;
  --brand-light-bg: #FFF5F5;
  --brand-light-border: #FFD6D6;
  --brand-gradient: linear-gradient(135deg, #FE2A2B 0%, #D41F20 100%);
  --brand-shadow: rgba(254, 42, 43, 0.25);
}

/* ---- Navbar Override (already inline) ---- */
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255,255,255,0.9) !important;
  transition: opacity 0.2s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #fff !important;
  opacity: 1;
}
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff !important;
  font-weight: 600;
}

/* ---- Card Accent (NAREN themed) ---- */
.card-accent {
  border: 1px solid var(--brand-light-border);
  border-radius: 0.5rem;
  background: var(--brand-light-bg);
}
.card-accent .card-header {
  border-bottom: 1px solid var(--brand-light-border);
  background: #fff;
}

/* ---- Primary Button (NAREN Red) ---- */
.btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary-dark) !important;
  position: relative;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 4px var(--brand-shadow);
  background-image: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
  transition: transform .05s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary:after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 48%;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events: none;
}
.btn-primary:hover {
  background-color: var(--brand-primary-dark) !important;
  border-color: #B81A1B !important;
  filter: brightness(1.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 6px var(--brand-shadow);
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.08);
}
.btn-primary.disabled, .btn-primary:disabled {
  filter: grayscale(.2) brightness(.98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---- Outline Primary ---- */
.btn-outline-primary {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  background-image: linear-gradient(to bottom, rgba(254,42,43,.08), rgba(254,42,43,0));
}
.btn-outline-primary:hover {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary-dark) !important;
  color: #fff !important;
}

/* ---- Links ---- */
a {
  color: var(--brand-primary);
}
a:hover {
  color: var(--brand-primary-dark);
}

/* ---- Text Primary ---- */
.text-primary {
  color: var(--brand-primary) !important;
}

/* ---- Form Focus ---- */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary-light);
  box-shadow: 0 0 0 0.25rem var(--brand-shadow);
}

/* ---- Form Check Input ---- */
.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.form-check-input:focus {
  border-color: var(--brand-primary-light);
  box-shadow: 0 0 0 0.25rem var(--brand-shadow);
}

/* ---- Pagination Active ---- */
.page-item.active .page-link {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* ---- Progress Bar ---- */
.progress-bar {
  background-color: var(--brand-primary);
}

/* ---- Dropdown Links Active ---- */
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--brand-primary);
}

/* ---- Card Hover (existing) ---- */
.card-hover {
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

/* ---- Textarea default height ---- */
textarea {
  min-height: 120px;
}

/* ---- Table Small ---- */
.table-sm td, .table-sm th {
  padding: .4rem .5rem;
}

/* ---- Logo Text ---- */
.logo-text {
  letter-spacing: .5px;
  font-weight: 600;
}

/* ---- Report Images ---- */
.report-images img {
  max-width: 180px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: .25rem;
}

/* ---- Quotation Total Row ---- */
.quotation-total-row th {
  background: #f8f9fa;
}

/* ---- Form Help ---- */
.form-help {
  font-size: .75rem;
  color: #6c757d;
}

/* ---- Report layout helpers ---- */
.report-section-title {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: .5rem;
  border-bottom: 2px solid var(--brand-light-border);
  padding-bottom: .35rem;
  color: var(--brand-primary-dark);
}
.report-subsection-title {
  font-weight: 600;
  font-size: .98rem;
  margin: .5rem 0 .4rem;
  color: var(--brand-primary);
  border-left: 3px solid var(--brand-primary);
  background: var(--brand-light-bg);
  border-radius: .25rem;
  padding: .25rem .5rem;
}
.report-kv .kv-label {
  color: #6c757d;
  font-size: .84rem;
}
.report-kv .kv-value {
  font-weight: 500;
}

/* ---- Image Grid ---- */
.img-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 576px) {
  .img-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.img-box {
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: .5rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  overflow: hidden;
}
.img-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---- Signature Row ---- */
.sig-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.25rem;
}
.sig-cell {
  flex: 1;
}
.sig-line {
  border-bottom: 1px dashed #999;
  height: 38px;
  margin-bottom: .35rem;
}

/* ---- Badge Warranty ---- */
.badge-warranty {
  background: #198754;
}
.badge-no-warranty {
  background: var(--brand-primary);
}

/* ---- Report Center ---- */
.report-center-60 {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .report-center-60 {
    width: 60%;
  }
}

/* ---- A4 Page ---- */
.a4-page {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 2rem;
  background: #fff;
  padding: 12mm;
  box-shadow: 0 0 0 1px #e9ecef, 0 .75rem 1.5rem rgba(0,0,0,.07);
  border-radius: 6px;
}
@media (max-width: 768px) {
  .a4-page {
    width: 100%;
    min-height: auto;
    padding: 1rem;
    border-radius: 4px;
  }
}

/* ---- Glossy Buttons (global style) ---- */
.btn {
  position: relative;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 4px rgba(0,0,0,.06);
  background-image: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
  transition: transform .05s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 48%;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events: none;
}
.btn:hover {
  filter: brightness(1.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 6px rgba(0,0,0,.08);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.08);
}
.btn.disabled, .btn:disabled {
  filter: grayscale(.2) brightness(.98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---- Bootstrap Variant Colors (glossy) ---- */
.btn-success {
  background-color: #198754;
  border-color: #157347;
}
.btn-danger {
  background-color: #dc3545;
  border-color: #c12f3c;
}
.btn-warning {
  background-color: #ffc107;
  border-color: #e0a800;
  color: #000;
}
.btn-info {
  background-color: #0dcaf0;
  border-color: #0bb8d9;
  color: #000;
}
.btn-secondary {
  background-color: #6c757d;
  border-color: #5c636a;
}
.btn-light {
  background-color: #f8f9fa;
  border-color: #e9ecef;
  color: #000;
}
.btn-dark {
  background-color: #212529;
  border-color: #1a1e21;
}

/* ---- Outline Variants ---- */
.btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning,
.btn-outline-info, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark {
  background-image: linear-gradient(to bottom, rgba(254,42,43,.08), rgba(254,42,43,0));
}
.btn-outline-primary:hover { background-color: rgba(254,42,43,.08); }
.btn-outline-success:hover { background-color: rgba(25,135,84,.08); }
.btn-outline-danger:hover { background-color: rgba(220,53,69,.08); }
.btn-outline-warning:hover { background-color: rgba(255,193,7,.12); }
.btn-outline-info:hover { background-color: rgba(13,202,240,.12); }
.btn-outline-secondary:hover { background-color: rgba(108,117,125,.08); }
.btn-outline-light:hover { background-color: rgba(248,249,250,.6); }
.btn-outline-dark:hover { background-color: rgba(33,37,41,.08); }

/* ---- Small Buttons ---- */
.btn-sm {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.05);
}

/* ---- Image Corner Number Badge ---- */
.img-wrapper {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
}
.img-wrapper img {
  display: block;
}
.img-number {
  position: absolute;
  top: .35rem;
  left: .35rem;
  background: var(--brand-primary);
  color: #fff;
  padding: .25rem .5rem;
  border-radius: .5rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px var(--brand-shadow);
  border: 1px solid rgba(255,255,255,.12);
  min-width: 28px;
  text-align: center;
}
.img-number.top-right {
  left: auto;
  right: .35rem;
}

/* ---- Alert Danger (NAREN-tinted) ---- */
.alert-danger {
  --bs-alert-color: #B81A1B;
  --bs-alert-bg: #FFF0F0;
  --bs-alert-border-color: #FFD6D6;
}

/* ---- Nav Tabs ---- */
.nav-tabs .nav-link.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  font-weight: 600;
}
.nav-tabs .nav-link:hover {
  border-color: transparent;
  color: var(--brand-primary);
}

/* ---- List Group ---- */
.list-group-item.active {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* ---- Spinner ---- */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--brand-primary) !important;
}

/* ---- Report Center 80% ---- */
.report-center-80 {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .report-center-80 {
    width: 80%;
  }
}

/* ---- Custom Scrollbar for tables ---- */
.table-responsive::-webkit-scrollbar {
  height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* ---- Login Card Logo ---- */
.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.login-logo img {
  max-height: 64px;
  width: auto;
}

/* ---- Dashboard Welcome ---- */
.dashboard-welcome h4 {
  color: var(--brand-primary);
  font-weight: 600;
}

/* ---- Badge Notification ---- */
.badge.bg-primary {
  background-color: var(--brand-primary) !important;
}

/* ---- Focus Ring on Buttons ---- */
.btn:focus-visible {
  outline: 2px solid var(--brand-primary-light);
  outline-offset: 2px;
}

/* ---- Table Hover Active Row ---- */
.table-hover > tbody > tr:hover > * {
  background-color: var(--brand-light-bg);
}