/* =========================
   Skyppr Global CSS
   EMS / Skyppr Base + Mobile UX
   ========================= */

/* ---------- Variables ---------- */
:root {
  --ems-orange: #ff8049;
  --ems-orange-hover: #ff6f32;
  --ems-dark: #222;
  --ems-gray: #7d7d7d;
  --ems-bg: #f7f7f7;
  --ems-border: #e2e2e2;
}

/* ---------- Global ---------- */
body {
  background: var(--ems-bg);
  color: var(--ems-dark);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--ems-dark);
}

/* ---------- Panels / Cards ---------- */
.info-block,
.panel,
.panel-default {
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--ems-border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 6px;
  font-weight: 500;
}

.btn-primary {
  background: var(--ems-orange);
  border-color: var(--ems-orange);
  color: #fff;
}

.btn-primary:hover {
  background: var(--ems-orange-hover);
  border-color: var(--ems-orange-hover);
}

/* Secondary buttons */
.btn-default {
  background: #fff;
  border: 1px solid var(--ems-border);
}

/* ---------- Tables ---------- */
.table {
  background: #fff;
}

.table th {
  background: #fafafa;
  font-weight: 600;
  border-bottom: 2px solid var(--ems-border);
}

.table td {
  vertical-align: middle;
}

/* ---------- Forms ---------- */
.form-control {
  border-radius: 6px;
  border: 1px solid var(--ems-border);
}

.form-control:focus {
  border-color: var(--ems-orange);
  box-shadow: 0 0 0 2px rgba(255,128,73,0.15);
}

/* ---------- Alerts ---------- */
.alert {
  border-radius: 6px;
}

.alert-danger {
  border-left: 4px solid #d9534f;
}

.alert-warning {
  border-left: 4px solid #f0ad4e;
}

.alert-success {
  border-left: 4px solid #5cb85c;
}

/* ---------- Action Menu (Desktop baseline) ---------- */
a.btn .fa-edit {
  font-size: 16px;
}

/* =========================
   MOBILE UX OVERRIDES
   ========================= */
@media (max-width: 768px) {

  body {
    font-size: 13px;
  }

  /* Make action buttons thumb-friendly */
  .btn-xs {
    padding: 10px 12px !important;
  }

  /* ---------- EDIT (Pencil) = Primary Action ---------- */
  a.btn[title="Edit"] {
    background: var(--ems-orange) !important;
    border-color: var(--ems-orange) !important;
    color: #fff !important;

    min-width: 44px;
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  a.btn[title="Edit"] .fa-edit {
    font-size: 22px !important;
  }

  a.btn[title="Edit"]:hover,
  a.btn[title="Edit"]:focus {
    background: var(--ems-orange-hover) !important;
    border-color: var(--ems-orange-hover) !important;
    color: #fff !important;
  }

  /* ---------- Optional: soften other action buttons ---------- */
  a.btn:not([title="Edit"]) {
    opacity: 0.85;
  }

  /* Tables tighter on mobile */
  .table {
    font-size: 13px;
  }
}


/* =========================
   GLOBAL LINKS – Kill Blue
   ========================= */

/* Default links */
a,
a:visited {
  color: #ff8049;
  text-decoration: none;
}

/* Hover */
a:hover,
a:focus {
  color: #ff6f32;
  text-decoration: underline;
}

/* Muted / secondary links */
.text-muted a,
.help-block a {
  color: #7d7d7d;
}

.text-muted a:hover {
  color: #ff8049;
}

/* Tables & lists */
.table a,
.list-group a {
  color: #ff8049;
}

.table a:hover,
.list-group a:hover {
  color: #ff6f32;
}

/* Nav + breadcrumbs */
.nav a,
.breadcrumb a {
  color: #555;
}

.nav a:hover,
.breadcrumb a:hover {
  color: #ff8049;
}

/* Kill browser blue focus ring */
a:focus {
  outline: none;
  box-shadow: none;
}

/* Icons inside links */
a i {
  color: inherit !important;
}