@media screen {
  /* --- Reset Styles --- */
  * {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100%;
    width: 100%;
  }

  body {
    background-color: lightblue;
    color: #333;
    font-family: Sans-Serif;
    line-height: 18px;
  }

  .error {
    color: red;
  }

  .success {
    color: rgb(32, 212, 32);
  }

  .wrapper {
    background: #fff;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    margin: 16px auto;
    max-width: 960px;
    padding: 2.25%;
    width: 85%;
  }

  h1 {
    font-size: 36px;
    line-height: 54px;
  }

  h2 {
    border-bottom: 2px solid #ccc;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 16px;
  }

  h3 {
    font-size: 18px;
    line-height: 36px;
  }

  p {
    margin-bottom: 18px;
  }

  .main {
    overflow: hidden;
  }

  .content {
    float: left;
    width: 60%;
  }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

  .sidebar {
    background: #eee;
    border: 1px solid #ccc;
    float: right;
    padding: 2.08333333333%;
    width: 30%;
  }

  .sidebar ul {
    font-size: 14px;
  }

  .branding {
    clear: both;
  }

  footer.branding {
    border-top: 2px solid #ccc;
    margin-top: 20px;
    padding-top: 20px;
  }

  /* --- MyLinkLine Color System --- */
  :root {
    /* Primary (brand green) */
    --ml-primary: #409a0a;
    --ml-primary-dark: #336e08;
    --ml-primary-light: #e5f6dc;

    /* Secondary (steel blue) */
    --ml-secondary: #2d6a8a;
    --ml-secondary-light: #e0eff6;

    /* Semantic (status & feedback) */
    --ml-success: #2e7d32;
    --ml-danger: #c62828;
    --ml-warning: #e65100;

    /* Neutrals */
    --ml-dark: #263238;
    --ml-medium: #78909c;
    --ml-light: #eceff1;

    /* Accent (video/streaming only) */
    --ml-accent: #6a1b9a;

    /* Legacy compat — used in register.erb & heartbeats.html.erb */
    --my-green: #409a0a;
    --my-green-dark: #336e08;
    --my-burnt-orange: #cc5500;
  }

  /* --- Legacy utility classes (still used in a few views) --- */
  .my-green        { background-color: var(--my-green); color: white; }
  .my-burnt-orange { background-color: var(--my-burnt-orange); color: white; }

  /* --- Buttons --- */
  .ml-btn-primary,
  .ml-btn-secondary,
  .ml-btn-danger,
  .ml-btn-neutral {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    text-decoration: none;
    text-align: center;
  }

  .ml-btn-primary {
    background-color: var(--ml-primary) !important;
    color: white !important;
  }
  .ml-btn-primary:hover {
    background-color: var(--ml-primary-dark) !important;
  }

  .ml-btn-secondary {
    background-color: var(--ml-secondary) !important;
    color: white !important;
  }
  .ml-btn-secondary:hover {
    background-color: #245a75 !important;
  }

  .ml-btn-danger {
    background-color: var(--ml-danger) !important;
    color: white !important;
  }
  .ml-btn-danger:hover {
    background-color: #a12020 !important;
  }

  .ml-btn-neutral {
    background-color: var(--ml-light) !important;
    color: #333 !important;
    border: 1px solid #b0bec5 !important;
  }
  .ml-btn-neutral:hover {
    background-color: #cfd8dc !important;
  }

  /* --- Dashboard Stat Cards --- */
  .ml-card-stat {
    background: white !important;
    border-left: 4px solid var(--ml-secondary) !important;
    border-top: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    color: var(--ml-dark) !important;
    padding: 8px 16px !important;
  }
  .ml-card-stat h3, .ml-card-stat h4 {
    color: var(--ml-dark) !important;
  }
  .ml-card-stat .ml-stat-number {
    color: var(--ml-secondary) !important;
    font-weight: 700;
    font-size: 2em !important;
  }
  .ml-card-stat .ml-stat-icon {
    color: var(--ml-medium) !important;
  }
  .ml-card-stat.ml-card-financial {
    border-left-color: var(--ml-primary) !important;
  }
  .ml-card-stat.ml-card-financial .ml-stat-number {
    color: var(--ml-primary) !important;
  }
  .ml-card-stat.ml-card-danger {
    border-left-color: var(--ml-danger) !important;
  }
  .ml-card-stat.ml-card-danger .ml-stat-number {
    color: var(--ml-danger) !important;
  }

  /* --- Tags / Badges --- */
  .ml-tag-success {
    background-color: var(--ml-success) !important;
    color: white !important;
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.85em;
  }
  .ml-tag-danger {
    background-color: var(--ml-danger) !important;
    color: white !important;
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.85em;
  }
  .ml-tag-warning {
    background-color: var(--ml-warning) !important;
    color: white !important;
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.85em;
  }
  .ml-tag-info {
    background-color: var(--ml-medium) !important;
    color: white !important;
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.85em;
  }

  /* --- Carrier Tags --- */
  span.w3-tag.ml-carrier-tag {
    display: inline-block !important;
    padding: 0px 5px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 5px;
    letter-spacing: 0.3px;
    line-height: 1.5 !important;
    transition: opacity 0.2s;
  }
  span.w3-tag.ml-carrier-tag:hover {
    opacity: 0.75;
  }
  span.w3-tag.ml-carrier-tag.ml-carrier-tag-att {
    background-color: #00A8E0 !important;
    color: white !important;
  }
  span.w3-tag.ml-carrier-tag.ml-carrier-tag-firstnet {
    background-color: #003a63 !important;
    color: white !important;
  }
  span.w3-tag.ml-carrier-tag.ml-carrier-tag-verizon {
    background-color: #cd040b !important;
    color: white !important;
  }
  span.w3-tag.ml-carrier-tag.ml-carrier-tag-tmobile {
    background-color: #e20074 !important;
    color: white !important;
  }
  span.w3-tag.ml-carrier-tag.ml-carrier-tag-unknown {
    background-color: var(--ml-medium) !important;
    color: white !important;
  }
  span.w3-tag.ml-carrier-tag.ml-carrier-tag-mismatch {
    outline: 2px solid var(--ml-warning);
    outline-offset: 1px;
  }
  span.w3-tag.ml-carrier-tag.ml-carrier-tag-inactive {
    opacity: 0.5;
  }

  .ml-sim-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
  }
  .ml-sim-status-dot.active { background-color: var(--ml-success); }
  .ml-sim-status-dot.inactive { background-color: var(--ml-danger); }
  .ml-sim-status-dot.mismatch { background-color: var(--ml-warning); }

  /* --- Navigation --- */
  .ml-topbar {
    background-color: var(--ml-dark) !important;
  }
  .ml-nav-active {
    background-color: var(--ml-primary-light) !important;
    border-left: 3px solid var(--ml-primary) !important;
  }

  /* --- Modal Headers --- */
  .ml-modal-header {
    background-color: var(--ml-secondary) !important;
    color: white !important;
  }

  /* --- Modal Body Padding --- */
  .w3-modal-content > .w3-container:last-of-type {
    padding-bottom: 24px !important;
  }

  /* --- Flash Messages --- */
  .ml-flash-success {
    background-color: var(--ml-success) !important;
    color: white !important;
  }
  .ml-flash-error {
    background-color: var(--ml-danger) !important;
    color: white !important;
  }

  /* --- Table Headers --- */
  .w3-table th,
  .w3-table-all th {
    background-color: #cfd8dc !important;
    color: var(--ml-dark) !important;
    font-weight: 600;
    border-bottom: 2px solid #b0bec5 !important;
  }

  /* --- Utility text colors --- */
  .ml-text-primary   { color: var(--ml-primary) !important; }
  .ml-text-secondary { color: var(--ml-secondary) !important; }
  .ml-text-success   { color: var(--ml-success) !important; }
  .ml-text-danger    { color: var(--ml-danger) !important; }
  .ml-text-warning   { color: var(--ml-warning) !important; }
  .ml-text-medium    { color: var(--ml-medium) !important; }
  .ml-text-accent    { color: var(--ml-accent) !important; }

  /* --- Form Cards --- */
  .ml-form-card {
    background: white;
    border-left: 4px solid var(--ml-secondary);
    border-top: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 24px;
  }

  /* --- Pagination (will_paginate) --- */
  .pagination {
    padding: 4px 0;
  }
  .pagination a,
  .pagination span,
  .pagination em {
    display: inline-block;
    padding: 6px 12px;
    margin: 2px 1px;
    text-decoration: none;
    color: #333;
    font-style: normal;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
  }
  .pagination a:hover {
    background-color: var(--ml-light);
  }
  .pagination em.current {
    background-color: var(--ml-secondary);
    color: #fff;
    border-color: var(--ml-secondary);
    font-weight: 600;
    cursor: default;
  }
  .pagination .disabled,
  .pagination span.gap {
    color: #aaa;
    border-color: #eee;
    background-color: #fafafa;
    cursor: default;
  }

  .honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

}

@media screen and (max-width: 600px) {
  .wrapper {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: auto;
  }

  .content, .sidebar {
    float: none;
    width: 100%;
  }

  .sidebar {
    background: transparent;
    border: none;
    border-top: 2px solid #ccc;
    padding: 0;
  }

  h1 {
    font-size: 24px;
    line-height: 36px;
  }

  h2 {
    font-size: 18px;
    line-height: 24px;
  }
}