/* src/styles.scss */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 12px var(--accent-glow);
  }
  50% {
    box-shadow: 0 0 20px var(--accent-glow-strong);
  }
}
.form-group {
  margin-bottom: var(--space-5);
}
.form-group label {
  color: var(--text-color);
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.form-control {
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-color);
  font-size: 0.95rem;
  box-sizing: border-box;
  line-height: var(--control-line-height);
  min-height: var(--control-height);
  padding: var(--control-padding-y) var(--control-padding-x);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}
.form-control:focus {
  outline: none;
  border-color: var(--link-color);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-control:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
select.form-control {
  cursor: pointer;
}
select.form-control option {
  background-color: var(--input-bg);
  color: var(--text-color);
}
.form-help {
  color: var(--muted-text);
  display: block;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: var(--space-2);
}
.p-0 {
  padding: var(--space-0) !important;
}
.pt-0 {
  padding-top: var(--space-0) !important;
}
.pr-0 {
  padding-right: var(--space-0) !important;
}
.pb-0 {
  padding-bottom: var(--space-0) !important;
}
.pl-0 {
  padding-left: var(--space-0) !important;
}
.px-0 {
  padding-left: var(--space-0) !important;
  padding-right: var(--space-0) !important;
}
.py-0 {
  padding-bottom: var(--space-0) !important;
  padding-top: var(--space-0) !important;
}
.m-0 {
  margin: var(--space-0) !important;
}
.mt-0 {
  margin-top: var(--space-0) !important;
}
.mr-0 {
  margin-right: var(--space-0) !important;
}
.mb-0 {
  margin-bottom: var(--space-0) !important;
}
.ml-0 {
  margin-left: var(--space-0) !important;
}
.mx-0 {
  margin-left: var(--space-0) !important;
  margin-right: var(--space-0) !important;
}
.my-0 {
  margin-bottom: var(--space-0) !important;
  margin-top: var(--space-0) !important;
}
.gap-0 {
  gap: var(--space-0) !important;
}
.p-1 {
  padding: var(--space-1) !important;
}
.pt-1 {
  padding-top: var(--space-1) !important;
}
.pr-1 {
  padding-right: var(--space-1) !important;
}
.pb-1 {
  padding-bottom: var(--space-1) !important;
}
.pl-1 {
  padding-left: var(--space-1) !important;
}
.px-1 {
  padding-left: var(--space-1) !important;
  padding-right: var(--space-1) !important;
}
.py-1 {
  padding-bottom: var(--space-1) !important;
  padding-top: var(--space-1) !important;
}
.m-1 {
  margin: var(--space-1) !important;
}
.mt-1 {
  margin-top: var(--space-1) !important;
}
.mr-1 {
  margin-right: var(--space-1) !important;
}
.mb-1 {
  margin-bottom: var(--space-1) !important;
}
.ml-1 {
  margin-left: var(--space-1) !important;
}
.mx-1 {
  margin-left: var(--space-1) !important;
  margin-right: var(--space-1) !important;
}
.my-1 {
  margin-bottom: var(--space-1) !important;
  margin-top: var(--space-1) !important;
}
.gap-1 {
  gap: var(--space-1) !important;
}
.p-2 {
  padding: var(--space-2) !important;
}
.pt-2 {
  padding-top: var(--space-2) !important;
}
.pr-2 {
  padding-right: var(--space-2) !important;
}
.pb-2 {
  padding-bottom: var(--space-2) !important;
}
.pl-2 {
  padding-left: var(--space-2) !important;
}
.px-2 {
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}
.py-2 {
  padding-bottom: var(--space-2) !important;
  padding-top: var(--space-2) !important;
}
.m-2 {
  margin: var(--space-2) !important;
}
.mt-2 {
  margin-top: var(--space-2) !important;
}
.mr-2 {
  margin-right: var(--space-2) !important;
}
.mb-2 {
  margin-bottom: var(--space-2) !important;
}
.ml-2 {
  margin-left: var(--space-2) !important;
}
.mx-2 {
  margin-left: var(--space-2) !important;
  margin-right: var(--space-2) !important;
}
.my-2 {
  margin-bottom: var(--space-2) !important;
  margin-top: var(--space-2) !important;
}
.gap-2 {
  gap: var(--space-2) !important;
}
.p-3 {
  padding: var(--space-3) !important;
}
.pt-3 {
  padding-top: var(--space-3) !important;
}
.pr-3 {
  padding-right: var(--space-3) !important;
}
.pb-3 {
  padding-bottom: var(--space-3) !important;
}
.pl-3 {
  padding-left: var(--space-3) !important;
}
.px-3 {
  padding-left: var(--space-3) !important;
  padding-right: var(--space-3) !important;
}
.py-3 {
  padding-bottom: var(--space-3) !important;
  padding-top: var(--space-3) !important;
}
.m-3 {
  margin: var(--space-3) !important;
}
.mt-3 {
  margin-top: var(--space-3) !important;
}
.mr-3 {
  margin-right: var(--space-3) !important;
}
.mb-3 {
  margin-bottom: var(--space-3) !important;
}
.ml-3 {
  margin-left: var(--space-3) !important;
}
.mx-3 {
  margin-left: var(--space-3) !important;
  margin-right: var(--space-3) !important;
}
.my-3 {
  margin-bottom: var(--space-3) !important;
  margin-top: var(--space-3) !important;
}
.gap-3 {
  gap: var(--space-3) !important;
}
.p-4 {
  padding: var(--space-4) !important;
}
.pt-4 {
  padding-top: var(--space-4) !important;
}
.pr-4 {
  padding-right: var(--space-4) !important;
}
.pb-4 {
  padding-bottom: var(--space-4) !important;
}
.pl-4 {
  padding-left: var(--space-4) !important;
}
.px-4 {
  padding-left: var(--space-4) !important;
  padding-right: var(--space-4) !important;
}
.py-4 {
  padding-bottom: var(--space-4) !important;
  padding-top: var(--space-4) !important;
}
.m-4 {
  margin: var(--space-4) !important;
}
.mt-4 {
  margin-top: var(--space-4) !important;
}
.mr-4 {
  margin-right: var(--space-4) !important;
}
.mb-4 {
  margin-bottom: var(--space-4) !important;
}
.ml-4 {
  margin-left: var(--space-4) !important;
}
.mx-4 {
  margin-left: var(--space-4) !important;
  margin-right: var(--space-4) !important;
}
.my-4 {
  margin-bottom: var(--space-4) !important;
  margin-top: var(--space-4) !important;
}
.gap-4 {
  gap: var(--space-4) !important;
}
.p-5 {
  padding: var(--space-5) !important;
}
.pt-5 {
  padding-top: var(--space-5) !important;
}
.pr-5 {
  padding-right: var(--space-5) !important;
}
.pb-5 {
  padding-bottom: var(--space-5) !important;
}
.pl-5 {
  padding-left: var(--space-5) !important;
}
.px-5 {
  padding-left: var(--space-5) !important;
  padding-right: var(--space-5) !important;
}
.py-5 {
  padding-bottom: var(--space-5) !important;
  padding-top: var(--space-5) !important;
}
.m-5 {
  margin: var(--space-5) !important;
}
.mt-5 {
  margin-top: var(--space-5) !important;
}
.mr-5 {
  margin-right: var(--space-5) !important;
}
.mb-5 {
  margin-bottom: var(--space-5) !important;
}
.ml-5 {
  margin-left: var(--space-5) !important;
}
.mx-5 {
  margin-left: var(--space-5) !important;
  margin-right: var(--space-5) !important;
}
.my-5 {
  margin-bottom: var(--space-5) !important;
  margin-top: var(--space-5) !important;
}
.gap-5 {
  gap: var(--space-5) !important;
}
.p-6 {
  padding: var(--space-6) !important;
}
.pt-6 {
  padding-top: var(--space-6) !important;
}
.pr-6 {
  padding-right: var(--space-6) !important;
}
.pb-6 {
  padding-bottom: var(--space-6) !important;
}
.pl-6 {
  padding-left: var(--space-6) !important;
}
.px-6 {
  padding-left: var(--space-6) !important;
  padding-right: var(--space-6) !important;
}
.py-6 {
  padding-bottom: var(--space-6) !important;
  padding-top: var(--space-6) !important;
}
.m-6 {
  margin: var(--space-6) !important;
}
.mt-6 {
  margin-top: var(--space-6) !important;
}
.mr-6 {
  margin-right: var(--space-6) !important;
}
.mb-6 {
  margin-bottom: var(--space-6) !important;
}
.ml-6 {
  margin-left: var(--space-6) !important;
}
.mx-6 {
  margin-left: var(--space-6) !important;
  margin-right: var(--space-6) !important;
}
.my-6 {
  margin-bottom: var(--space-6) !important;
  margin-top: var(--space-6) !important;
}
.gap-6 {
  gap: var(--space-6) !important;
}
.p-7 {
  padding: var(--space-7) !important;
}
.pt-7 {
  padding-top: var(--space-7) !important;
}
.pr-7 {
  padding-right: var(--space-7) !important;
}
.pb-7 {
  padding-bottom: var(--space-7) !important;
}
.pl-7 {
  padding-left: var(--space-7) !important;
}
.px-7 {
  padding-left: var(--space-7) !important;
  padding-right: var(--space-7) !important;
}
.py-7 {
  padding-bottom: var(--space-7) !important;
  padding-top: var(--space-7) !important;
}
.m-7 {
  margin: var(--space-7) !important;
}
.mt-7 {
  margin-top: var(--space-7) !important;
}
.mr-7 {
  margin-right: var(--space-7) !important;
}
.mb-7 {
  margin-bottom: var(--space-7) !important;
}
.ml-7 {
  margin-left: var(--space-7) !important;
}
.mx-7 {
  margin-left: var(--space-7) !important;
  margin-right: var(--space-7) !important;
}
.my-7 {
  margin-bottom: var(--space-7) !important;
  margin-top: var(--space-7) !important;
}
.gap-7 {
  gap: var(--space-7) !important;
}
.p-8 {
  padding: var(--space-8) !important;
}
.pt-8 {
  padding-top: var(--space-8) !important;
}
.pr-8 {
  padding-right: var(--space-8) !important;
}
.pb-8 {
  padding-bottom: var(--space-8) !important;
}
.pl-8 {
  padding-left: var(--space-8) !important;
}
.px-8 {
  padding-left: var(--space-8) !important;
  padding-right: var(--space-8) !important;
}
.py-8 {
  padding-bottom: var(--space-8) !important;
  padding-top: var(--space-8) !important;
}
.m-8 {
  margin: var(--space-8) !important;
}
.mt-8 {
  margin-top: var(--space-8) !important;
}
.mr-8 {
  margin-right: var(--space-8) !important;
}
.mb-8 {
  margin-bottom: var(--space-8) !important;
}
.ml-8 {
  margin-left: var(--space-8) !important;
}
.mx-8 {
  margin-left: var(--space-8) !important;
  margin-right: var(--space-8) !important;
}
.my-8 {
  margin-bottom: var(--space-8) !important;
  margin-top: var(--space-8) !important;
}
.gap-8 {
  gap: var(--space-8) !important;
}
.container-page {
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0 auto;
  max-width: 1200px;
  min-height: 100vh;
  padding: var(--space-5);
}
.page-header {
  align-items: center;
  border-bottom: 2px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
}
.page-header h1,
.page-header h2,
.page-header h3 {
  color: var(--text-color);
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0;
}
.page-actions {
  display: flex;
  gap: var(--space-3);
}
.d-flex {
  display: flex !important;
}
.d-grid {
  display: grid !important;
}
.align-center {
  align-items: center !important;
}
.justify-between {
  justify-content: space-between !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.text-muted {
  color: var(--muted-text) !important;
}
.text-right {
  text-align: right !important;
}
.font-mono {
  font-family: var(--font-mono) !important;
}
.fw-semibold {
  font-weight: 600 !important;
}
.no-data {
  background-color: var(--card-bg);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--muted-text);
  padding: var(--space-8) var(--space-5);
  text-align: center;
}
.no-data p {
  font-size: 1rem;
  margin: 0;
}
@media (max-width: 768px) {
  .container-page {
    padding: var(--space-4);
  }
  .page-header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-4);
  }
  .page-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}
markdown a.ui-link {
  color: var(--link-color);
  cursor: pointer;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
markdown a.ui-link:hover,
markdown a.ui-link:focus-visible {
  color: var(--link-color);
  outline: none;
  text-decoration-color: currentColor;
}
:root {
  --white-hsl:
    0,
    0%,
    100%;
  --black-hsl:
    0,
    0%,
    0%;
  --accent-hsl:
    202.25,
    100%,
    17.45%;
  --accent-secondary-hsl:
    76.18,
    70.08%,
    49.8%;
  --accent-tertiary-hsl:
    270,
    8%,
    90.2%;
  --accent-dark-hsl:
    200,
    100%,
    25.88%;
  --gray-light-hsl:
    210,
    16%,
    98%;
  --gray-medium-hsl:
    210,
    14%,
    90%;
  --gray-medium-light-hsl:
    210,
    15%,
    94%;
  --gray-hsl:
    210,
    11%,
    50%;
  --gray-dark-hsl:
    210,
    9%,
    31%;
  --error-hsl:
    354,
    70%,
    54%;
  --success-hsl:
    134,
    61%,
    41%;
  --warning-hsl:
    45,
    100%,
    51%;
  --info-hsl:
    188,
    78%,
    41%;
  --danger-hsl:
    0,
    100%,
    50%;
  --white-color: hsl(var(--white-hsl));
  --black-color: hsl(var(--black-hsl));
  --accent-color: hsl(var(--accent-hsl));
  --accent-secondary-color: hsl(var(--accent-secondary-hsl));
  --accent-tertiary-color: hsl(var(--accent-tertiary-hsl));
  --accent-dark-color: hsl(var(--accent-dark-hsl));
  --bg-color: hsl(var(--gray-light-hsl));
  --bg-secondary-color: hsl(var(--gray-medium-hsl));
  --bg-tertiary-color: hsl(var(--gray-medium-light-hsl));
  --accent-responsive-color: hsl(var(--accent-hsl));
  --text-color: hsl(var(--gray-dark-hsl));
  --text-secondary-color: hsl(var(--gray-light-hsl));
  --nav-bg:
    linear-gradient(
      
      135deg,
      hsl(var(--accent-hsl)) 0%,
      hsl(var(--accent-dark-hsl)) 100% );
  --nav-text: hsl(var(--white-hsl));
  --card-bg: hsl(var(--white-hsl));
  --link-color: hsl(var(--accent-hsl));
  --border-color: hsl(var(--gray-medium-hsl));
  --hover-bg: hsl(var(--gray-medium-hsl));
  --muted-text: hsl(var(--gray-hsl));
  --error-color: hsl(var(--error-hsl));
  --success-color: hsl(var(--success-hsl));
  --warning-color: hsl(var(--warning-hsl));
  --danger-color: hsl(var(--danger-hsl));
  --info-color: hsl(var(--info-hsl));
  --input-bg: hsl(var(--white-hsl));
  --input-border: hsl(var(--gray-hsl));
  --table-header-bg: hsl(var(--gray-light-hsl));
  --table-row-hover: hsl(var(--gray-medium-hsl));
  --shadow-light: hsla(var(--black-hsl), 0.1);
  --shadow-medium: hsla(var(--black-hsl), 0.15);
  --badge-bg: hsl(var(--gray-medium-hsl));
  --badge-text: hsl(var(--gray-dark-hsl));
  --button-secondary-bg: hsl(var(--gray-hsl));
  --button-secondary-hover: hsl(var(--gray-dark-hsl));
  --success-hover: hsl(134, 61%, 35%);
  --success-hover-border: hsl(134, 61%, 33%);
  --focus-ring: hsla(var(--accent-hsl), 0.1);
  --interactive-border-hover: var(--link-color);
  --interactive-shadow: hsla(var(--accent-hsl), 0.2);
  --accent-glow: hsla(var(--accent-hsl), 0.6);
  --accent-glow-strong: hsla(var(--accent-hsl), 0.9);
  --error-surface: hsla(var(--error-hsl), 0.1);
  --success-surface: hsla(var(--success-hsl), 0.15);
  --error-badge-surface: hsla(var(--error-hsl), 0.15);
  --warning-surface: hsla(var(--warning-hsl), 0.15);
  --overlay-bg: hsla(var(--black-hsl), 0.3);
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 15px;
  --space-5: 20px;
  --space-6: 25px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 60px;
  --control-height: 42px;
  --control-line-height: 20px;
  --control-padding-x: 12px;
  --control-padding-y: 10px;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --font-mono: "Courier New", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --gray-light-hsl:
      210,
      10%,
      98%;
    --gray-medium-light-hsl:
      210,
      10%,
      20%;
    --gray-medium-hsl:
      210,
      10%,
      10%;
    --gray-hsl:
      210,
      9%,
      60%;
    --gray-dark-hsl:
      210,
      16%,
      5%;
    --bg-color: hsl(var(--gray-dark-hsl));
    --bg-secondary-color: hsl(var(--gray-medium-hsl));
    --bg-tertiary-color: hsl(var(--gray-medium-light-hsl));
    --accent-responsive-color: hsl(var(--accent-secondary-hsl));
    --text-color: hsl(var(--gray-light-hsl));
    --text-secondary-color: hsl(var(--gray-light-hsl));
    --nav-bg:
      linear-gradient(
        
        135deg,
        hsl(210, 10%, 8%) 0%,
        hsl(210, 10%, 5%) 100% );
    --nav-text: hsl(var(--gray-light-hsl));
    --card-bg: hsl(var(--gray-medium-hsl));
    --link-color: hsl(202, 100%, 70%);
    --border-color: hsl(210, 9%, 31%);
    --hover-bg: hsl(210, 10%, 20%);
    --muted-text: hsl(var(--gray-hsl));
    --error-color: hsl(354, 90%, 50%);
    --success-color: hsl(134, 61%, 50%);
    --warning-color: hsl(45, 100%, 60%);
    --info-color: hsl(188, 78%, 55%);
    --input-bg: hsl(210, 10%, 18%);
    --input-border: hsl(210, 9%, 31%);
    --table-header-bg: hsl(210, 10%, 18%);
    --table-row-hover: hsl(210, 10%, 25%);
    --shadow-light: hsla(var(--black-hsl), 0.3);
    --shadow-medium: hsla(var(--black-hsl), 0.4);
    --badge-bg: hsl(210, 9%, 31%);
    --badge-text: hsl(var(--gray-light-hsl));
    --button-secondary-bg: hsl(210, 9%, 31%);
    --button-secondary-hover: hsl(var(--gray-hsl));
    --focus-ring: hsla(var(--accent-hsl), 0.18);
  }
}
* {
  box-sizing: border-box;
}
h5 {
  margin: 0;
}
html {
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  overflow-x: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}
input,
select,
textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  border: 1px solid var(--input-border);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--link-color);
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.form-container,
.asset-form,
.ticket-form,
.device-form,
.invoice-form {
  background-color: var(--card-bg);
  color: var(--text-color);
}
.form-header,
.header h2 {
  color: var(--text-color);
}
.form-error,
.error {
  color: var(--error-color);
  background-color: var(--card-bg);
  border: 1px solid var(--error-color);
}
.form-section h3 {
  color: var(--link-color);
  border-bottom-color: var(--border-color);
}
.form-control {
  background-color: var(--input-bg);
  color: var(--text-color);
  border-color: var(--input-border);
}
.form-control:focus {
  border-color: var(--link-color);
}
.form-control.invalid {
  border-color: var(--error-color);
}
.error-message {
  color: var(--error-color);
}
.form-actions {
  border-top-color: var(--border-color);
}
.btn-primary {
  background-color: var(--link-color);
}
.btn-secondary {
  background-color: var(--button-secondary-bg);
}
.btn-secondary:hover {
  background-color: var(--button-secondary-hover);
}
.create-edit-asset .header h2,
.create-edit-device .header h2,
.create-edit-invoice .header h2,
.create-edit-ticket .header h2 {
  color: var(--text-color) !important;
}
.create-edit-asset .asset-form,
.create-edit-device .device-form,
.create-edit-invoice .invoice-form,
.create-edit-ticket .ticket-form {
  background: var(--card-bg) !important;
  color: var(--text-color) !important;
  box-shadow: 0 2px 10px var(--shadow-light) !important;
}
.create-edit-asset .form-section h3,
.create-edit-device .form-section h3,
.create-edit-invoice .form-section h3,
.create-edit-ticket .form-section h3 {
  color: var(--link-color) !important;
  border-bottom-color: var(--border-color) !important;
}
.create-edit-asset .form-control,
.create-edit-device .form-control,
.create-edit-invoice .form-control,
.create-edit-ticket .form-control {
  background-color: var(--input-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--input-border) !important;
}
.create-edit-asset .form-control:focus,
.create-edit-device .form-control:focus,
.create-edit-invoice .form-control:focus,
.create-edit-ticket .form-control:focus {
  border-color: var(--link-color) !important;
}
.create-edit-asset .error-message,
.create-edit-device .error-message,
.create-edit-invoice .error-message,
.create-edit-ticket .error-message {
  color: var(--error-color) !important;
}
.create-edit-asset .form-actions,
.create-edit-device .form-actions,
.create-edit-invoice .form-actions,
.create-edit-ticket .form-actions {
  border-top-color: var(--border-color) !important;
}
.create-edit-asset .btn-primary,
.create-edit-device .btn-primary,
.create-edit-invoice .btn-primary,
.create-edit-ticket .btn-primary {
  background-color: var(--link-color) !important;
}
.create-edit-asset .btn-secondary,
.create-edit-device .btn-secondary,
.create-edit-invoice .btn-secondary,
.create-edit-ticket .btn-secondary {
  background-color: var(--button-secondary-bg) !important;
}
.create-edit-asset .form-group label,
.create-edit-device .form-group label,
.create-edit-invoice .form-group label,
.create-edit-ticket .form-group label {
  color: var(--text-color) !important;
}
.plan-card {
  background: var(--card-bg);
  border-color: var(--border-color);
  box-shadow: 0 2px 4px var(--shadow-light);
}
.plan-header h3 {
  color: var(--text-color);
}
.support-level {
  background-color: var(--badge-bg);
  color: var(--link-color);
}
.plan-details p,
.feature {
  color: var(--muted-text);
}
.feature.enabled {
  color: var(--success-color);
}
.container {
  max-width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .container {
    padding: 0 10px;
    max-width: 100%;
  }
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
.responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.responsive-table table {
  min-width: 600px;
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.devices-table,
.contacts-table,
.assets-table,
.invoices-table,
.companies-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .table-container,
  .data-table,
  [class*=-table] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-container table,
  .data-table table,
  [class*=-table] table {
    min-width: 100%;
  }
}
@media (max-width: 768px) {
  .responsive-table {
    border: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .responsive-table table {
    min-width: 800px;
    display: table;
  }
  .devices-table,
  .contacts-table,
  .assets-table,
  .invoices-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color);
    border-radius: 8px;
  }
  .devices-table table,
  .contacts-table table,
  .assets-table table,
  .invoices-table table {
    min-width: 800px;
    display: table;
  }
  .devices-table th,
  .contacts-table th,
  .assets-table th,
  .invoices-table th {
    position: sticky;
    top: 0;
    background: var(--table-header-bg);
    z-index: 10;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 14px;
  }
  .devices-table td,
  .contacts-table td,
  .assets-table td,
  .invoices-table td {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 14px;
  }
  .devices-table .btn-sm,
  .contacts-table .btn-sm,
  .assets-table .btn-sm,
  .invoices-table .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
    margin-right: 4px;
  }
  .devices-table:not(.table-responsive),
  .contacts-table:not(.table-responsive),
  .assets-table:not(.table-responsive),
  .invoices-table:not(.table-responsive) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .devices-table:not(.table-responsive) table,
  .contacts-table:not(.table-responsive) table,
  .assets-table:not(.table-responsive) table,
  .invoices-table:not(.table-responsive) table {
    display: table;
    min-width: 800px;
  }
  table:not([data-mobile-cards]) {
    display: table !important;
    min-width: 800px;
  }
  .devices-table:not([data-mobile-cards]),
  .contacts-table:not([data-mobile-cards]),
  .assets-table:not([data-mobile-cards]),
  .invoices-table:not([data-mobile-cards]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 768px) {
  .form-row {
    flex-direction: column !important;
  }
  .form-group {
    margin-bottom: 1rem;
  }
  .form-control {
    font-size: 16px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
  }
  .btn {
    width: 100%;
    margin-bottom: 10px;
    padding: 14px;
  }
  .btn + .btn {
    margin-left: 0;
  }
  .form-container,
  .create-edit-form,
  .ticket-form,
  .asset-form,
  .device-form,
  .invoice-form {
    max-width: 100%;
    overflow-x: hidden;
    padding: 15px;
    box-sizing: border-box;
  }
  .form-grid,
  .form-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  select.form-control,
  textarea.form-control {
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .multi-select-container {
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 768px) {
  .filters-section {
    flex-direction: column !important;
    gap: 15px !important;
    align-items: stretch !important;
  }
  .filter-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
  }
  .filter-select {
    min-width: auto !important;
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  .header {
    flex-direction: column !important;
    gap: 15px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .header h1,
  .header h2 {
    font-size: 1.5rem !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }
  .actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  .companies-grid,
  .devices-grid,
  .assets-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .card {
    margin-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
  }
  .card:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 768px) {
  .mobile-hidden {
    display: none !important;
  }
}
.mobile-only {
  display: none !important;
}
@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
}
@media (max-width: 768px) {
  .mobile-full-width {
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  .mobile-text-center {
    text-align: center !important;
  }
}
@media (max-width: 768px) {
  .mobile-margin-bottom {
    margin-bottom: 1rem !important;
  }
}
@media (max-width: 768px) {
  .mobile-padding {
    padding: 1rem !important;
  }
}
@media (max-width: 768px) {
  .mobile-no-padding {
    padding: 0 !important;
  }
}
@media (max-width: 768px) {
  .mobile-stack {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}
@media (max-width: 768px) {
  .mobile-scroll-x {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
@media (max-width: 768px) {
  .mobile-wrap {
    flex-wrap: wrap !important;
  }
}
@media (max-width: 768px) {
  .mobile-text-small {
    font-size: 0.875rem !important;
  }
}
@media (max-width: 768px) {
  .mobile-gap-small {
    gap: 0.5rem !important;
  }
}
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 44px;
    padding: 12px 16px;
  }
  .form-control {
    min-height: 44px;
    padding: 12px;
  }
  .clickable-row {
    min-height: 60px;
  }
}
.scroll-container {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}
.container,
.main-content,
.content,
.page-content {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.form-container,
.create-edit-form,
.detail-container {
  overflow-x: hidden;
}
.card,
.info-card,
.detail-card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .modal-dialog {
    margin: 10px !important;
    max-width: calc(100% - 20px) !important;
  }
  .modal-content {
    border-radius: 0 !important;
  }
}
@media (max-width: 768px) {
  .container,
  .main-content,
  .content,
  .page-content,
  .app-container,
  .wrapper,
  [class*=-container],
  [class*=-content] {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding-left: 4px;
    padding-right: 4px;
  }
  .row,
  .flex-row,
  [class*=row] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  .card,
  .section,
  .panel,
  [class*=-card],
  [class*=-section],
  [class*=-panel] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .table-container,
  .grid-container,
  [class*=-table],
  [class*=-grid] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  [class*=-grid],
  .grid,
  .features-grid,
  .plans-grid,
  .companies-grid,
  .devices-grid,
  .assets-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  [class*=-grid] > *,
  .grid > *,
  .features-grid > *,
  .plans-grid > *,
  .companies-grid > *,
  .devices-grid > *,
  .assets-grid > * {
    margin-bottom: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  [class*=-grid] > *:last-child,
  .grid > *:last-child,
  .features-grid > *:last-child,
  .plans-grid > *:last-child,
  .companies-grid > *:last-child,
  .devices-grid > *:last-child,
  .assets-grid > *:last-child {
    margin-bottom: 0 !important;
  }
  form,
  .form,
  [class*=-form] {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  nav,
  .nav,
  .navbar,
  .header,
  .footer,
  [class*=-nav],
  [class*=-header],
  [class*=-footer] {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */