/* ==========================================================================
   Yusen Logistics — brand override layer

   Loaded last in backend/layouts/app.blade.php and frontend/layouts/app.blade.php
   so it wins the cascade without editing any vendor stylesheet. Remove those
   two <link> tags to roll back.

   !important is used throughout because the stylesheets it overrides already
   use it on the same properties, and the app ships four Bootstrap majors plus
   Metronic and AdminLTE at once.

   Old blues (#336699, #084FA5, #0D47A1, #11ABE7 and drift variants) -> #06183D.
   Status and escalation colours encode meaning, not brand, and are left alone.
   ========================================================================== */

:root {
  --yl-navy:        #06183D;
  --yl-navy-2:      #122550;
  --yl-navy-hover:  #0E2650;
  --yl-orange:      #ED6B23;
  --yl-orange-dark: #D95F1D;
  --yl-orange-soft: #FDF0E7;
  --yl-row-alt:     #F4F6FA;
  --yl-line:        #DDE3EE;
  --yl-ink:         #1A1F2E;
  --yl-muted:       #5A6478;
}

/* ==========================================================================
   1. BACKEND — header band and logo strip
   ========================================================================== */

.page-header-top {
  background: #fff !important;
  border-bottom: 3px solid var(--yl-orange) !important;
}

.page-logo {
  padding-top: 6px;
}

.page-logo img.logo-default {
  max-height: 52px;
  width: auto;
}

/* Top-right icon row (home / profile / logout) */
.page-header-top .top-menu .navbar-nav > li > a,
.page-header-top .top-menu .navbar-nav > li > a i {
  color: var(--yl-navy) !important;
}

.page-header-top .top-menu .navbar-nav > li > a:hover,
.page-header-top .top-menu .navbar-nav > li > a:hover i {
  color: var(--yl-orange) !important;
}

/* ==========================================================================
   2. BACKEND — horizontal navigation bar
   Replaces Metronic #336699 with the brand navy, and the #11ABE7
   underline with the brand orange rule.
   ========================================================================== */

.page-header-menu {
  background: var(--yl-navy) !important;
  border-bottom: none !important;
}

.hor-menu .navbar-nav > li > a,
.hor-menu.hor-menu-light .navbar-nav > li > a {
  color: #fff !important;
  font-weight: 500;
}

.hor-menu .navbar-nav > li > a:hover,
.hor-menu .navbar-nav > li > a:focus,
.hor-menu.hor-menu-light .navbar-nav > li > a:hover,
.hor-menu.hor-menu-light .navbar-nav > li.open > a,
.hor-menu .navbar-nav > li:hover > a {
  background: var(--yl-navy-hover) !important;
  color: #fff !important;
}

/* Active section gets the orange marker, not a colour flood */
.hor-menu .navbar-nav > li.active > a,
.hor-menu.hor-menu-light .navbar-nav > li.active > a,
.hor-menu .navbar-nav > li.active:hover > a {
  background: var(--yl-navy-hover) !important;
  color: #fff !important;
  box-shadow: inset 0 -3px 0 var(--yl-orange);
}

/* Dropdown panels */
.hor-menu .dropdown-menu {
  border: 1px solid var(--yl-line) !important;
  border-top: 3px solid var(--yl-orange) !important;
  box-shadow: 0 4px 14px rgba(6, 24, 61, .16) !important;
  padding: 4px 0;
}

.hor-menu .dropdown-menu > li > a,
.hor-menu .dropdown-menu li .nav-link {
  color: var(--yl-ink) !important;
}

.hor-menu .dropdown-menu > li > a:hover,
.hor-menu .dropdown-menu > li.active > a,
.hor-menu .dropdown-menu li .nav-link:hover {
  background: var(--yl-orange-soft) !important;
  color: var(--yl-navy) !important;
}

.menu-toggler {
  background-color: var(--yl-navy) !important;
}

/* ==========================================================================
   3. BACKEND — headings and page furniture
   Old heading blue #084FA5 -> navy.
   ========================================================================== */

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-title,
.content-header h1,
.box-title {
  color: var(--yl-navy) !important;
}

/* Invert headings on navy surfaces — must come after the rule above */
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary .box-title,
.bg-primary b,
.bg-primary span,
.box-primary > .box-header h1,
.box-primary > .box-header h2,
.box-primary > .box-header h3,
.box-primary > .box-header h4,
.box-primary > .box-header .box-title,
.panel-primary > .panel-heading h1,
.panel-primary > .panel-heading h2,
.panel-primary > .panel-heading h3,
.panel-primary > .panel-heading h4,
.panel-primary > .panel-heading .panel-title,
.title-panel h1,
.title-panel h2,
.title-panel h3,
.title-panel h4,
.title-panel .box-title,
/* Quotation-type badge: the h3 itself carries the navy fill */
.inner-heading-4 h1,
.inner-heading-4 h2,
.inner-heading-4 h3,
.inner-heading-4 h4 {
  color: #fff !important;
}

.page-content h1,
.page-content h3 {
  letter-spacing: -.01em;
}

.box {
  border-top-color: var(--yl-navy) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--yl-navy) !important;
  border-top: 2px solid var(--yl-orange) !important;
}

/* ==========================================================================
   4. BACKEND — tables
   Navy headers, matching the approved quotation document designs.
   ========================================================================== */

.table > thead > tr > th,
table.dataTable thead th,
table.dataTable thead td,
.table-bordered > thead > tr > th {
  background: var(--yl-navy) !important;
  color: #fff !important;
  border-color: var(--yl-navy-2) !important;
  font-weight: 600;
}

/* Sort arrows need to read on navy */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  color: #fff !important;
}

.table > tbody > tr:nth-of-type(even) > td {
  background: var(--yl-row-alt);
}

.table > tbody > tr > td {
  border-color: var(--yl-line) !important;
}

.table-hover > tbody > tr:hover > td {
  background: var(--yl-orange-soft) !important;
}

/* ==========================================================================
   5. BUTTONS
   The app recolours .btn-success as its primary action (see style.css),
   so both are mapped to navy with an orange hover.
   ========================================================================== */

.btn-primary,
.btn-success {
  background-color: var(--yl-navy) !important;
  border-color: var(--yl-navy) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .btn-primary.dropdown-toggle {
  background-color: var(--yl-orange) !important;
  border-color: var(--yl-orange-dark) !important;
  color: #fff !important;
}

.btn-primary:focus,
.btn-success:focus,
.btn:focus,
a:focus {
  outline: 2px solid var(--yl-orange) !important;
  outline-offset: 2px;
}

/* ==========================================================================
   5b. BOOTSTRAP CONTEXTUAL CLASSES
   The app leans on Bootstrap's stock .bg-primary (#337AB7) for section
   header bars — 37 blades — and .btn-info (#5BC0DE) for secondary actions
   in 52 blades. Both are vendor defaults that were never themed.
   ========================================================================== */

.bg-primary,
.title-panel.bg-primary,
.box.box-primary > .box-header,
.panel-primary > .panel-heading {
  background-color: var(--yl-navy) !important;
  color: #fff !important;
  border-color: var(--yl-navy-2) !important;
}

.box.box-primary {
  border-top-color: var(--yl-orange) !important;
}

.label-primary {
  background-color: var(--yl-navy) !important;
}

/* Secondary action buttons — navy outline rather than vendor cyan */
.btn-info {
  background-color: #fff !important;
  border-color: var(--yl-navy) !important;
  color: var(--yl-navy) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
  background-color: var(--yl-navy) !important;
  border-color: var(--yl-navy) !important;
  color: #fff !important;
}

/* ==========================================================================
   6. FORMS
   ========================================================================== */

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--yl-navy) !important;
  box-shadow: 0 0 0 2px rgba(237, 107, 35, .18) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--yl-navy) !important;
}

/* ==========================================================================
   7. PAGINATION
   ========================================================================== */

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span,
.dataTables_paginate .paginate_button.current {
  background: var(--yl-navy) !important;
  border-color: var(--yl-navy) !important;
  color: #fff !important;
}

.pagination > li > a {
  color: var(--yl-navy);
}

/* ==========================================================================
   8. FRONTEND — login, password reset, error pages
   Replaces the #01a6e5 -> #075bae gradient banner with flat brand navy,
   and the #0D47A1 login button with navy.
   ========================================================================== */

.box_login .panel-heading h2 {
  background: var(--yl-navy) !important;
  border-bottom: 3px solid var(--yl-orange);
  color: #fff !important;
  letter-spacing: .06em;
}

.box_login .logo {
  max-width: 250px;
  max-height: 90px;
}

.box_login .panel {
  border-top: 3px solid var(--yl-navy) !important;
}

.form_box a,
.form_box a:hover,
.box_login .pwd-forgot a:active,
.box_login .pwd-forgot a:hover {
  color: var(--yl-navy) !important;
}

.main-header {
  background: var(--yl-navy) !important;
}

/* Login ground. #app-layout is the frontend body id only, so the
   backend keeps its white ground. */
body#app-layout {
  background: #EDEFF3 !important;
}

.box_login {
  color: var(--yl-ink);
}

/* "Forgot Password?" was #b3b3b3 on near-white — unreadable */
.box_login .pwd-forgot a,
.box_login .pwd-forgot a:visited {
  color: var(--yl-muted) !important;
}

.box_login .pwd-forgot a:hover,
.box_login .pwd-forgot a:focus {
  color: var(--yl-navy) !important;
  text-decoration: underline;
}

/* ==========================================================================
   8b. QUOTATION VIEW — brand band
   ========================================================================== */

.qv-band {
  /* Flat navy under the motif, so the band survives a missing image */
  background-color: var(--yl-navy);
  background-image: url("../images/quote-band-waves.png");
  background-repeat: no-repeat;
  background-position: right center;
  /* Unscaled on purpose — keeps the same density as the PDF motif */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
}

.qv-band-logo {
  height: 75px;
  width: auto;
  display: block;
}

.qv-band-title {
  text-align: right;
  color: #fff;
}

.qv-t1 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 2.5px;
  line-height: 1.1;
}

.qv-t2 {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--yl-orange);
  margin-top: 3px;
}

.qv-band-rule {
  height: 3px;
  background: var(--yl-orange);
  margin-bottom: 4px;
}

.qv-meta {
  border: 1px solid var(--yl-line);
  border-left: 4px solid var(--yl-orange);
  background: #FBFCFE;
  padding: 10px 14px;
  line-height: 1.75;
  font-size: 12.5px;
}

.qv-meta b {
  color: var(--yl-navy);
}

/* Addressee line — client and Kind Attn on one line, per the design */
.qv-addressee {
  color: var(--yl-navy);
  font-weight: 700;
  font-size: 13px;
}

.qv-addressee .qv-sep {
  color: var(--yl-muted);
  font-weight: 400;
  margin: 0 10px;
}

/* Section titles on the quotation view: orange bar + navy label,
   matching the PDF and the design mockups. */
.sec-title-v {
  border-collapse: collapse;
  margin: 18px 0 6px;
  width: auto;
}

.sec-title-v td.sec-bar-v {
  background: var(--yl-orange);
  width: 5px;
  padding: 0;
  border: 0;
  font-size: 0;
}

.sec-title-v td.sec-txt-v {
  padding: 0 0 0 9px;
  border: 0;
  background: transparent;
  color: var(--yl-navy);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .9px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .qv-band {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .qv-band-title { text-align: center; }
}

/* ==========================================================================
   8c. QUOTATION DOCUMENT — typography
   Scoped to .quotation-doc so the admin keeps Montserrat.
   ========================================================================== */

.quotation-doc,
.quotation-doc p,
.quotation-doc div,
.quotation-doc span,
.quotation-doc td,
.quotation-doc th,
.quotation-doc b {
  font-family: Arial, Helvetica, sans-serif;
}

.quotation-doc {
  font-size: 12.5px;
  color: var(--yl-ink);
  line-height: 1.6;
  /* -15px cancels the parent .container padding so the 36px is
     measured from the card edge rather than stacking on it. */
  margin: 0 -15px;
  padding: 0 36px 30px;
}

.quotation-doc .container {
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.quotation-doc .row {
  margin-left: 0;
  margin-right: 0;
}

/* Band breaks out of that padding to stay full-bleed */
.qv-band,
.qv-band-rule {
  margin-left: -36px;
  margin-right: -36px;
}

/* Header band — design: t1 21px/700/3px, t2 11px/600/2px */
.qv-t1 { font-size: 21px; font-weight: 700; letter-spacing: 3px; }
.qv-t2 { font-size: 11px; font-weight: 600; letter-spacing: 2px; }

/* Company block — design: name 13.5px/700/.3px navy, body 12.5px/1.6 */
.quotation-doc .inner-paragraph { font-size: 12.5px; line-height: 1.6; }

.quotation-doc .inner-paragraph p.fw-bold,
.quotation-doc .inner-paragraph .fw-bold {
  color: var(--yl-navy);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .3px;
  margin-bottom: 3px;
}

/* Meta box — design: 12.5px / 1.7 / padding 12px 16px */
.qv-meta { font-size: 12.5px; line-height: 1.7; padding: 12px 16px; }

/* Section titles — design: 13px / 700 / 1px */
.sec-title-v td.sec-txt-v { font-size: 13px; font-weight: 700; letter-spacing: 1px; }

/* Tables — design: th 11.5px/600/.3px, padding 9px 8px;
                    td padding 8px 10px */
.quotation-doc .trh1,
.quotation-doc tr.trh1 > td,
.quotation-doc td.trh1 {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
  padding: 9px 8px !important;
  text-align: center;
}

.quotation-doc .tbody-td,
.quotation-doc table.tableborder tr td {
  font-size: 12px;
  padding: 8px 10px !important;
  vertical-align: middle;
}

/* Table borders and striping.
   `trh1` and `tbody-td` sit on the <tr> in some tables and the <td> in
   others, so every rule below is doubled up to catch both. */

/* Data tables only — layout tables stay borderless */
.quotation-doc table.tableborder td,
.quotation-doc table.tableborder th,
.quotation-doc table.tableborder thead tr td,
.quotation-doc table.tableborder thead tr th,
.quotation-doc table.tableborder tbody tr td,
.quotation-doc table.tableborder tfoot tr td,
.quotation-doc table:not(.sec-title-v) tr.trh1 > td,
.quotation-doc table:not(.sec-title-v) tr.tbody-td > td,
.quotation-doc table:not(.sec-title-v) td.trh1,
.quotation-doc table:not(.sec-title-v) td.tbody-td {
  border: 1px solid var(--yl-line) !important;
}

/* Anything used purely for layout keeps no border */
.quotation-doc table.nopad td,
.quotation-doc table.nopad th {
  border: 0 !important;
}

/* Section titles take no box */
.quotation-doc table.sec-title-v,
.quotation-doc table.sec-title-v td {
  border: 0 !important;
  background: transparent !important;
}

.quotation-doc table.sec-title-v td.sec-bar-v {
  background: var(--yl-orange) !important;
}

/* Body cells default white */
.quotation-doc table td.tbody-td,
.quotation-doc table tr.tbody-td > td {
  background: #ffffff;
}

/* Alternate rows */
.quotation-doc table tr:nth-of-type(even) > td.tbody-td,
.quotation-doc table tr.tbody-td:nth-of-type(even) > td {
  background: var(--yl-row-alt);
}

/* Navy cells last so they win */
.quotation-doc table tr.trh1 > td,
.quotation-doc table tr.trh1 > th,
.quotation-doc table td.trh1,
.quotation-doc table th.trh1,
.quotation-doc table thead tr.trh1 > td,
.quotation-doc table thead tr td.trh1,
.quotation-doc table tbody tr.trh1 > td,
.quotation-doc table tbody tr td.trh1 {
  background: var(--yl-navy) !important;
  color: #ffffff !important;
  border: 1px solid var(--yl-navy-2) !important;
}

/* Greeting and intro — design: greeting 700 navy, intro 1.55 */
.quotation-doc .inner-paragraph p.mb-0 b,
.quotation-doc .inner-paragraph b {
  color: var(--yl-navy);
}

/* Terms block — design: 12.5px / 1.7 */
.quotation-doc .tc-head { font-size: 13px; font-weight: 700; color: var(--yl-navy); }
.quotation-doc .fsz-11 { font-size: 12.5px !important; line-height: 1.7; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.page-footer,
.footer {
  border-top: 2px solid var(--yl-orange);
  color: var(--yl-muted);
}

/* ==========================================================================
   10. PRINT
   ========================================================================== */

@media print {
  .page-header-menu,
  .table > thead > tr > th,
  table.dataTable thead th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Special Information box */
.quotation-doc .si-wrap-v {
  background: #FBFCFE;
  border: 1px solid var(--yl-line);
  border-left: 4px solid var(--yl-navy);
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 6px;
}

/* Grand Total header is orange, per the design */
.quotation-doc table.grand-tbl-v tr.trh1 > td,
.quotation-doc table.grand-tbl-v tr.trh1 > th,
.quotation-doc table.grand-tbl-v thead tr.trh1 > td {
  background: var(--yl-orange) !important;
  color: #ffffff !important;
  border-color: var(--yl-orange) !important;
}

/* float-end shrinks the table to its content — force full width */
.quotation-doc table.grand-tbl-v {
  width: 100% !important;
  float: none !important;
}

/* quotation.css puts a 2px white border on the row; in a collapsed table
   it beats the cell border. Let the cells govern. */
.quotation-doc table tr,
.quotation-doc table tr.trh1,
.quotation-doc table tr.tbody-td,
.quotation-doc table thead tr,
.quotation-doc table tbody tr {
  border: 0 !important;
}