/*
  Kamran Oil Traders - shared design layer.
  Loaded on every page AFTER core.css/icon-font.min.css/style.css and
  BEFORE each page's own inline <style> block, so a page's own overrides
  still win where they exist, and everything else gets this look for free.

  Palette sampled directly from the real logo (the droplet mark): the
  vivid blue of the inner drop is --kt-primary, the near-black navy of
  the outer drop/wordmark is --kt-navy - so the UI's two accent colors
  are the same two colors as the brand mark, not a generic blue pick.
*/

:root {
  --kt-primary: #0045c6;
  --kt-primary-dark: #00369a;
  --kt-primary-light: #f0f4fc;
  --kt-navy: #00132e;
  --kt-surface: #ffffff;
  --kt-surface-alt: #f8fafc;
  --kt-border: #e2e8f0;
  --kt-text: #0f1c30;
  --kt-text-muted: #64748b;
  --kt-success: #16a34a;
  --kt-danger: #dc2626;
  --kt-warning: #d97706;
  --kt-radius: 10px;
  --kt-radius-sm: 6px;
  --kt-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --kt-shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
}

body {
  color: var(--kt-text);
  background: var(--kt-surface-alt);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--kt-radius-sm);
  font-weight: 600;
  letter-spacing: .2px;
}
.btn-primary {
  background: var(--kt-primary);
  border-color: var(--kt-primary);
  box-shadow: var(--kt-shadow-sm);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--kt-primary-dark);
  border-color: var(--kt-primary-dark);
}
.btn-outline-secondary {
  color: var(--kt-text-muted);
  border-color: var(--kt-border);
  background: var(--kt-surface);
}
.btn-outline-secondary:hover {
  background: var(--kt-surface-alt);
  color: var(--kt-text);
  border-color: var(--kt-border);
}
.btn-success { background: var(--kt-success); border-color: var(--kt-success); }
.btn-danger  { background: var(--kt-danger);  border-color: var(--kt-danger); }

/* ---------- Cards / panels ---------- */
.card-box, .card {
  background: var(--kt-surface);
  border: 1px solid var(--kt-border);
  border-radius: var(--kt-radius);
  box-shadow: var(--kt-shadow-sm);
}
.stat-card {
  border-radius: var(--kt-radius);
  box-shadow: var(--kt-shadow-sm);
  border: 1px solid var(--kt-border);
  transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover {
  box-shadow: var(--kt-shadow-md);
  transform: translateY(-2px);
}

/* ---------- Page header / breadcrumb ---------- */
.page-header .title,
.page-header h4 {
  font-weight: 700;
  color: var(--kt-text);
}
.breadcrumb {
  background: transparent;
  padding-left: 0;
}
.breadcrumb-item a { color: var(--kt-primary); text-decoration: none; }
.breadcrumb-item.active { color: var(--kt-text-muted); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: var(--kt-radius-sm);
  border-color: var(--kt-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--kt-primary);
  box-shadow: 0 0 0 3px var(--kt-primary-light);
}
.form-label { font-weight: 600; color: var(--kt-text); font-size: .875rem; }

/* ---------- Modals ---------- */
.modal-content {
  border: none;
  border-radius: var(--kt-radius);
  box-shadow: var(--kt-shadow-md);
}
.modal-header {
  border-bottom: 1px solid var(--kt-border);
}
.modal-footer {
  border-top: 1px solid var(--kt-border);
}

/* ---------- Tables / DataTables ---------- */
table.dataTable thead th {
  background: var(--kt-surface-alt) !important;
  color: var(--kt-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--kt-border) !important;
}
table.dataTable, table.dataTable th, table.dataTable td {
  border-color: var(--kt-border) !important;
}
table.dataTable tbody tr:hover {
  background: var(--kt-primary-light) !important;
}
.dt-buttons .btn, .dt-button {
  border-radius: var(--kt-radius-sm) !important;
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
  border: 1px solid var(--kt-border);
  border-radius: var(--kt-radius);
  box-shadow: var(--kt-shadow-md);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--kt-primary-light);
  color: var(--kt-primary-dark);
}

/* ---------- Top header / sidebar ---------- */
.header {
  background: var(--kt-surface);
  border-bottom: 1px solid var(--kt-border);
  box-shadow: none;
}
.left-side-bar {
  background: var(--kt-surface);
  border-right: 1px solid var(--kt-border);
}
.menu-block .dropdown-toggle {
  border-radius: var(--kt-radius-sm);
  margin: 2px 10px;
  color: var(--kt-text-muted);
}
.menu-block .dropdown-toggle:hover,
.menu-block li.dropdown.active > .dropdown-toggle,
.menu-block li.mm-active > .dropdown-toggle {
  background: var(--kt-primary-light);
  color: var(--kt-primary-dark);
}
.menu-block .micon { color: inherit; }

/* ---------- Loader ---------- */
.loader-spinner { border-top-color: var(--kt-primary) !important; }
.loader-text { color: var(--kt-primary) !important; }


/* Full-page preloader (_topheader.php, shown briefly on every page load) -
   the logo image has no size limit in the template's own CSS, so at the
   real logo's native resolution it fills the whole screen. Cap it here. */
.pre-loader .loader-logo img {
  width: 160px;
  height: auto;
}