/**
 * Club Diabetes Design System - Combined Import
 * Version: 1.0.0
 * Last Update: 2026-02-05
 *
 * This file imports all media kit CSS modules.
 * Include this single file to get the complete design system.
 *
 * Usage in PHP:
 *   <link rel="stylesheet" href="/assets/media-kit/css/media-kit.css">
 *
 * Or import individual modules:
 *   <link rel="stylesheet" href="/assets/media-kit/css/variables.css">
 *   <link rel="stylesheet" href="/assets/media-kit/css/typography.css">
 *   etc.
 */

/* CSS Variables (colors, typography tokens, spacing, etc.) */
@import url('variables.css');

/* Typography (headings, body text, font imports) */
@import url('typography.css');

/* Button components */
@import url('buttons.css');

/* Card components */
@import url('cards.css');

/* ============================================
 * UTILITY CLASSES
 * Common helpers for quick styling
 * ============================================ */

/* Display */
.mk-hidden { display: none !important; }
.mk-block { display: block; }
.mk-inline { display: inline; }
.mk-inline-block { display: inline-block; }
.mk-flex { display: flex; }
.mk-inline-flex { display: inline-flex; }
.mk-grid { display: grid; }

/* Flex utilities */
.mk-flex-row { flex-direction: row; }
.mk-flex-col { flex-direction: column; }
.mk-flex-wrap { flex-wrap: wrap; }
.mk-flex-nowrap { flex-wrap: nowrap; }
.mk-items-start { align-items: flex-start; }
.mk-items-center { align-items: center; }
.mk-items-end { align-items: flex-end; }
.mk-items-stretch { align-items: stretch; }
.mk-justify-start { justify-content: flex-start; }
.mk-justify-center { justify-content: center; }
.mk-justify-end { justify-content: flex-end; }
.mk-justify-between { justify-content: space-between; }
.mk-justify-around { justify-content: space-around; }
.mk-flex-1 { flex: 1; }
.mk-flex-shrink-0 { flex-shrink: 0; }
.mk-flex-grow { flex-grow: 1; }

/* Gap */
.mk-gap-1 { gap: var(--space-1); }
.mk-gap-2 { gap: var(--space-2); }
.mk-gap-3 { gap: var(--space-3); }
.mk-gap-4 { gap: var(--space-4); }
.mk-gap-5 { gap: var(--space-5); }
.mk-gap-6 { gap: var(--space-6); }
.mk-gap-8 { gap: var(--space-8); }

/* Margin */
.mk-m-0 { margin: 0; }
.mk-m-1 { margin: var(--space-1); }
.mk-m-2 { margin: var(--space-2); }
.mk-m-3 { margin: var(--space-3); }
.mk-m-4 { margin: var(--space-4); }
.mk-m-auto { margin: auto; }

.mk-mt-0 { margin-top: 0; }
.mk-mt-1 { margin-top: var(--space-1); }
.mk-mt-2 { margin-top: var(--space-2); }
.mk-mt-3 { margin-top: var(--space-3); }
.mk-mt-4 { margin-top: var(--space-4); }
.mk-mt-6 { margin-top: var(--space-6); }
.mk-mt-8 { margin-top: var(--space-8); }

.mk-mb-0 { margin-bottom: 0; }
.mk-mb-1 { margin-bottom: var(--space-1); }
.mk-mb-2 { margin-bottom: var(--space-2); }
.mk-mb-3 { margin-bottom: var(--space-3); }
.mk-mb-4 { margin-bottom: var(--space-4); }
.mk-mb-6 { margin-bottom: var(--space-6); }
.mk-mb-8 { margin-bottom: var(--space-8); }

.mk-ms-0 { margin-inline-start: 0; }
.mk-ms-2 { margin-inline-start: var(--space-2); }
.mk-ms-3 { margin-inline-start: var(--space-3); }
.mk-ms-4 { margin-inline-start: var(--space-4); }
.mk-ms-auto { margin-inline-start: auto; }

.mk-me-0 { margin-inline-end: 0; }
.mk-me-2 { margin-inline-end: var(--space-2); }
.mk-me-3 { margin-inline-end: var(--space-3); }
.mk-me-4 { margin-inline-end: var(--space-4); }
.mk-me-auto { margin-inline-end: auto; }

/* Padding */
.mk-p-0 { padding: 0; }
.mk-p-1 { padding: var(--space-1); }
.mk-p-2 { padding: var(--space-2); }
.mk-p-3 { padding: var(--space-3); }
.mk-p-4 { padding: var(--space-4); }
.mk-p-5 { padding: var(--space-5); }
.mk-p-6 { padding: var(--space-6); }

.mk-pt-0 { padding-top: 0; }
.mk-pt-2 { padding-top: var(--space-2); }
.mk-pt-4 { padding-top: var(--space-4); }
.mk-pt-6 { padding-top: var(--space-6); }

.mk-pb-0 { padding-bottom: 0; }
.mk-pb-2 { padding-bottom: var(--space-2); }
.mk-pb-4 { padding-bottom: var(--space-4); }
.mk-pb-6 { padding-bottom: var(--space-6); }

.mk-px-0 { padding-inline: 0; }
.mk-px-2 { padding-inline: var(--space-2); }
.mk-px-3 { padding-inline: var(--space-3); }
.mk-px-4 { padding-inline: var(--space-4); }
.mk-px-6 { padding-inline: var(--space-6); }

.mk-py-0 { padding-block: 0; }
.mk-py-2 { padding-block: var(--space-2); }
.mk-py-3 { padding-block: var(--space-3); }
.mk-py-4 { padding-block: var(--space-4); }
.mk-py-6 { padding-block: var(--space-6); }

/* Width */
.mk-w-full { width: 100%; }
.mk-w-auto { width: auto; }
.mk-w-fit { width: fit-content; }
.mk-max-w-sm { max-width: 24rem; }
.mk-max-w-md { max-width: 28rem; }
.mk-max-w-lg { max-width: 32rem; }
.mk-max-w-xl { max-width: 36rem; }
.mk-max-w-2xl { max-width: 42rem; }
.mk-max-w-full { max-width: 100%; }

/* Height */
.mk-h-full { height: 100%; }
.mk-h-auto { height: auto; }
.mk-h-screen { height: 100vh; }
.mk-min-h-screen { min-height: 100vh; }

/* Border Radius */
.mk-rounded-none { border-radius: var(--radius-none); }
.mk-rounded-sm { border-radius: var(--radius-sm); }
.mk-rounded-md { border-radius: var(--radius-md); }
.mk-rounded-lg { border-radius: var(--radius-lg); }
.mk-rounded-xl { border-radius: var(--radius-xl); }
.mk-rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.mk-shadow-none { box-shadow: var(--shadow-none); }
.mk-shadow-sm { box-shadow: var(--shadow-sm); }
.mk-shadow-md { box-shadow: var(--shadow-md); }
.mk-shadow-lg { box-shadow: var(--shadow-lg); }
.mk-shadow-xl { box-shadow: var(--shadow-xl); }

/* Background Colors */
.mk-bg-white { background-color: #FFFFFF; }
.mk-bg-gray-50 { background-color: var(--color-gray-50); }
.mk-bg-gray-100 { background-color: var(--color-gray-100); }
.mk-bg-gray-200 { background-color: var(--color-gray-200); }
.mk-bg-primary-50 { background-color: var(--color-primary-50); }
.mk-bg-primary-100 { background-color: var(--color-primary-100); }
.mk-bg-primary-700 { background-color: var(--color-primary-700); }
.mk-bg-secondary-50 { background-color: var(--color-secondary-50); }
.mk-bg-secondary-500 { background-color: var(--color-secondary-500); }

/* Borders */
.mk-border { border: 1px solid var(--color-gray-200); }
.mk-border-0 { border: 0; }
.mk-border-t { border-top: 1px solid var(--color-gray-200); }
.mk-border-b { border-bottom: 1px solid var(--color-gray-200); }
.mk-border-primary { border-color: var(--color-primary-700); }

/* Position */
.mk-relative { position: relative; }
.mk-absolute { position: absolute; }
.mk-fixed { position: fixed; }
.mk-sticky { position: sticky; }
.mk-inset-0 { inset: 0; }
.mk-top-0 { top: 0; }
.mk-bottom-0 { bottom: 0; }
.mk-start-0 { inset-inline-start: 0; }
.mk-end-0 { inset-inline-end: 0; }

/* Z-Index */
.mk-z-0 { z-index: 0; }
.mk-z-10 { z-index: 10; }
.mk-z-20 { z-index: 20; }
.mk-z-50 { z-index: 50; }
.mk-z-dropdown { z-index: var(--z-dropdown); }
.mk-z-modal { z-index: var(--z-modal); }

/* Overflow */
.mk-overflow-hidden { overflow: hidden; }
.mk-overflow-auto { overflow: auto; }
.mk-overflow-scroll { overflow: scroll; }
.mk-overflow-x-auto { overflow-x: auto; }
.mk-overflow-y-auto { overflow-y: auto; }

/* Cursor */
.mk-cursor-pointer { cursor: pointer; }
.mk-cursor-default { cursor: default; }
.mk-cursor-not-allowed { cursor: not-allowed; }

/* User Select */
.mk-select-none { user-select: none; }
.mk-select-text { user-select: text; }
.mk-select-all { user-select: all; }

/* Visibility */
.mk-invisible { visibility: hidden; }
.mk-visible { visibility: visible; }

/* Opacity */
.mk-opacity-0 { opacity: 0; }
.mk-opacity-50 { opacity: 0.5; }
.mk-opacity-75 { opacity: 0.75; }
.mk-opacity-100 { opacity: 1; }

/* Transitions */
.mk-transition { transition: var(--transition-all); }
.mk-transition-none { transition: none; }

/* Screen Reader Only */
.mk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
 * DIVIDERS
 * ============================================ */
.mk-divider {
  height: 1px;
  background-color: var(--color-gray-200);
  margin: var(--space-4) 0;
}

.mk-divider-vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  background-color: var(--color-gray-200);
  margin: 0 var(--space-4);
}

/* ============================================
 * CONTAINER
 * ============================================ */
.mk-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 576px) {
  .mk-container { max-width: 540px; }
}

@media (min-width: 768px) {
  .mk-container { max-width: 720px; }
}

@media (min-width: 992px) {
  .mk-container { max-width: 960px; }
}

@media (min-width: 1200px) {
  .mk-container { max-width: 1140px; }
}

@media (min-width: 1400px) {
  .mk-container { max-width: 1320px; }
}

.mk-container-fluid {
  width: 100%;
  padding-inline: var(--space-4);
}

/* ============================================
 * RESPONSIVE UTILITIES
 * ============================================ */
@media (max-width: 767px) {
  .mk-hidden-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .mk-hidden-desktop { display: none !important; }
}

/* ============================================
 * DARK MODE UTILITIES
 * ============================================ */
:root[data-theme="dark"] .mk-bg-white {
  background-color: var(--color-gray-0);
}

:root[data-theme="dark"] .mk-border,
:root[data-theme="dark"] .mk-border-t,
:root[data-theme="dark"] .mk-border-b {
  border-color: var(--color-gray-600);
}

:root[data-theme="dark"] .mk-divider,
:root[data-theme="dark"] .mk-divider-vertical {
  background-color: var(--color-gray-600);
}