/**
 * QuoteMaster Frontend Shortcodes CSS
 * Styling för shortcodes som visas på frontend
 * 
 * @package QuoteMaster
 * @version 1.0.0
 */

/* ============================================================================
   CSS VARIABLER - Synkade med admin.css palett
   ========================================================================= */

:root {
   /* Primära färger - Premium lila palett */
   --qm-primary: #6e62e5;
   --qm-primary-hover: #5547e3;
   --qm-primary-light: #e8e5fc;
   --qm-primary-dark: #4a3fc7;

   /* Sekundära färger - Teal */
   --qm-secondary: #5fe2d1;
   --qm-secondary-hover: #21b7a4;
   --qm-secondary-light: #dff7f3;

   /* System färger */
   --qm-success: #10b981;
   --qm-success-light: #dcfce7;
   --qm-success-dark: #065f46;
   --qm-warning: #f59e0b;
   --qm-warning-light: #fef3c7;
   --qm-warning-dark: #92400e;
   --qm-danger: #ef4444;
   --qm-danger-light: #fee2e2;

   /* Text */
   --qm-text-dark: #1d2327;
   --qm-text-gray: #6b7280;
   --qm-text-light: #9ca3af;

   /* Bakgrund/Border */
   --qm-border: #e5e7eb;
   --qm-bg-light: #f9fafb;
   --qm-bg-gray: #f6f7f7;

   /* Utilities */
   --qm-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   --qm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   --qm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   --qm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --qm-radius: 8px;
}

/* ============================================================================
   DASHBOARD CONTAINER
   ========================================================================= */

.qm-dashboard {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
}

/* ============================================================================
   STATISTIK GRID
   ========================================================================= */

.qm-stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 20px;
   margin: 20px 0;
}

.qm-stat-box {
   background: #fff;
   border: 1px solid var(--qm-border);
   border-radius: var(--qm-radius);
   padding: 24px;
   text-align: center;
   transition: var(--qm-transition);
}

.qm-stat-box:hover {
   box-shadow: var(--qm-shadow-lg);
   transform: translateY(-4px);
}

.qm-stat-value {
   font-size: 32px;
   font-weight: 700;
   color: var(--qm-text-dark);
   margin-bottom: 8px;
   line-height: 1;
}

.qm-stat-label {
   font-size: 14px;
   color: var(--qm-text-gray);
   font-weight: 500;
}

/* Statistik-varianter */
.qm-stat-success .qm-stat-value {
   color: var(--qm-success);
}

.qm-stat-warning .qm-stat-value {
   color: var(--qm-warning);
}

.qm-stat-info .qm-stat-value {
   color: var(--qm-primary);
}

/* ============================================================================
   CARDS
   ========================================================================= */

.qm-card {
   background: #fff;
   border: 1px solid var(--qm-border);
   border-radius: var(--qm-radius);
   padding: 25px;
   box-shadow: var(--qm-shadow);
   margin-bottom: 20px;
}

.qm-card h2 {
   font-size: 18px;
   font-weight: 700;
   color: var(--qm-primary);
   margin: 0 0 20px 0;
}

/* ============================================================================
   QUICKLINKS GRID
   ========================================================================= */

.qm-quicklinks-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 15px;
}

/* Vertikal layout för sidebar */
.qm-quicklinks-vertical {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.qm-quicklinks-vertical .qm-quicklink-item {
   flex-direction: row;
   justify-content: flex-start;
   padding: 14px 18px;
   text-align: left;
}

.qm-quicklink-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 24px 16px;
   background: var(--qm-bg-light);
   border: 1px solid var(--qm-border);
   border-radius: var(--qm-radius);
   text-decoration: none;
   color: var(--qm-text-dark);
   font-weight: 600;
   font-size: 14px;
   transition: var(--qm-transition);
   text-align: center;
}

.qm-quicklink-item:hover {
   background: var(--qm-primary-light);
   border-color: var(--qm-primary);
   color: var(--qm-primary);
   transform: translateY(-2px);
   box-shadow: var(--qm-shadow-md);
}

.qm-quicklink-item svg {
   width: 28px;
   height: 28px;
   fill: currentColor;
}

.qm-quicklink-item.qm-quicklink-primary {
   background: var(--qm-primary-light);
   border-color: var(--qm-primary);
   color: var(--qm-primary);
}

.qm-quicklink-item.qm-quicklink-primary:hover {
   background: var(--qm-primary);
   color: #fff;
}

/* ============================================================================
   AKTIVITETSLISTA
   ========================================================================= */

.qm-activity-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.qm-activity-list-item {
   padding: 16px;
   border-bottom: 1px solid var(--qm-border);
   transition: var(--qm-transition);
}

.qm-activity-list-item:last-child {
   border-bottom: none;
}

.qm-activity-list-item:hover {
   background: var(--qm-bg-light);
}

.qm-activity-list-item strong {
   color: var(--qm-text-dark);
   font-weight: 600;
}

.qm-activity-list-item .qm-activity-description {
   color: var(--qm-text-gray);
   margin-top: 4px;
}

.qm-activity-list-item .qm-activity-time {
   font-size: 12px;
   color: var(--qm-text-light);
   margin-top: 8px;
   display: flex;
   align-items: center;
   gap: 6px;
}

.qm-activity-list-item .qm-activity-time svg {
   width: 12px;
   height: 12px;
   fill: currentColor;
}

/* ============================================================================
   LISTA OFFERTER
   ========================================================================= */

.qm-shortcode-list {
   display: grid;
   gap: 20px;
   margin: 20px 0;
}

.qm-quote-item {
   background: #fff;
   border: 1px solid var(--qm-border);
   border-radius: var(--qm-radius);
   padding: 20px;
   transition: var(--qm-transition);
}

.qm-quote-item:hover {
   box-shadow: var(--qm-shadow-lg);
   transform: translateY(-4px);
   border-color: var(--qm-primary);
}

/* Quote Header */
.qm-quote-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 15px;
   gap: 15px;
}

.qm-quote-info h3 {
   font-size: 18px;
   font-weight: 700;
   color: var(--qm-text-dark);
   margin: 0 0 8px 0;
   line-height: 1.3;
}

.qm-quote-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   font-size: 13px;
   color: var(--qm-text-gray);
}

.qm-quote-meta span {
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.qm-quote-meta span::before {
   content: '•';
   color: var(--qm-border);
   font-weight: bold;
}

.qm-quote-meta span:first-child::before {
   display: none;
}

.qm-quote-number {
   font-weight: 600;
   color: var(--qm-text-dark);
}

/* Quote Status */
.qm-quote-status {
   text-align: right;
   flex-shrink: 0;
}

.qm-quote-status small {
   display: block;
   margin-top: 4px;
   font-size: 12px;
   color: var(--qm-text-gray);
}

/* Quote Footer */
.qm-quote-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 15px;
   border-top: 1px solid var(--qm-border);
   gap: 15px;
}

.qm-quote-total strong {
   font-size: 20px;
   color: var(--qm-text-dark);
   font-weight: 700;
}

/* ============================================================================
   BADGES
   ========================================================================= */

.qm-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   box-sizing: border-box;
   min-height: 28px;
   padding: 6px 12px;
   border-radius: 4px;
   font-size: 14px;
   font-weight: 600;
   line-height: 1;
   transition: var(--qm-transition);
}

.qm-badge::before {
   content: '';
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: currentColor;
}

.qm-badge-success,
.qm-badge-signed,
.qm-badge-approved {
   background: #dcfce7;
   color: #16a34a;
}

.qm-badge-pending,
.qm-badge-warning {
   background: color-mix(in srgb, #f59e0b 25%, white);
   color: color-mix(in srgb, #f59e0b 75%, black);
}

.qm-badge-danger,
.qm-badge-rejected,
.qm-badge-expired {
   background: #fee2e2;
   color: #dc2626;
}

.qm-badge-secondary {
   background: rgba(110, 98, 229, 0.05);
   color: #646970;
}

.qm-badge-draft {
   background: rgba(110, 98, 229, 0.05);
   color: #646970;
}

/* ============================================================================
   BUTTONS
   ========================================================================= */

.qm-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px 20px;
   border-radius: var(--qm-radius);
   font-size: 14px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   text-decoration: none;
   transition: var(--qm-transition);
}

.qm-btn svg {
   width: 16px;
   height: 16px;
   fill: currentColor;
}

.qm-btn-primary {
   background: var(--qm-primary);
   color: #fff;
}

.qm-btn-primary:hover {
   background: var(--qm-primary-hover);
   transform: translateY(-2px);
   box-shadow: var(--qm-shadow-md);
   color: #fff;
}

.qm-btn-secondary {
   background: var(--qm-secondary-light);
   color: #0d9488;
}

.qm-btn-secondary:hover {
   background: var(--qm-secondary);
   color: #fff;
   transform: translateY(-2px);
}

.qm-btn-small {
   padding: 8px 16px;
   font-size: 13px;
}

.qm-btn-small:hover {
   transform: translateY(-2px);
   box-shadow: var(--qm-shadow-md);
}

.qm-btn-small:active {
   transform: translateY(0);
}

/* ============================================================================
   EMPTY STATE
   ========================================================================= */

.qm-no-quotes,
.qm-error {
   text-align: center;
   padding: 40px 20px;
   background: var(--qm-bg-light);
   border: 2px dashed var(--qm-border);
   border-radius: var(--qm-radius);
   color: var(--qm-text-gray);
   font-size: 14px;
}

.qm-error {
   background: #fef2f2;
   border-color: #fca5a5;
   color: #991b1b;
}

/* ============================================================================
   ANIMATIONS
   ========================================================================= */

@keyframes qm-fade-in {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.qm-quote-item,
.qm-stat-box,
.qm-quicklink-item {
   animation: qm-fade-in 0.4s ease-out backwards;
}

.qm-quote-item:nth-child(1),
.qm-stat-box:nth-child(1),
.qm-quicklink-item:nth-child(1) {
   animation-delay: 0.05s;
}

.qm-quote-item:nth-child(2),
.qm-stat-box:nth-child(2),
.qm-quicklink-item:nth-child(2) {
   animation-delay: 0.1s;
}

.qm-quote-item:nth-child(3),
.qm-stat-box:nth-child(3),
.qm-quicklink-item:nth-child(3) {
   animation-delay: 0.15s;
}

.qm-quote-item:nth-child(4),
.qm-stat-box:nth-child(4),
.qm-quicklink-item:nth-child(4) {
   animation-delay: 0.2s;
}

.qm-quote-item:nth-child(5),
.qm-stat-box:nth-child(5) {
   animation-delay: 0.25s;
}

/* ============================================================================
   LOADING STATE
   ========================================================================= */

.qm-loading {
   position: relative;
   pointer-events: none;
}

.qm-loading::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(2px);
   border-radius: var(--qm-radius);
}

/* ============================================================================
   RESPONSIVE - TABLET
   ========================================================================= */

@media (max-width: 768px) {
   .qm-dashboard {
      padding: 15px;
   }

   .qm-quote-header {
      flex-direction: column;
      gap: 12px;
   }

   .qm-quote-status {
      text-align: left;
   }

   .qm-quote-footer {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
   }

   .qm-stats-grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }

   .qm-stat-value {
      font-size: 28px;
   }

   .qm-quicklinks-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* ============================================================================
   RESPONSIVE - MOBILE
   ========================================================================= */

@media (max-width: 480px) {
   .qm-shortcode-list {
      gap: 15px;
   }

   .qm-quote-item {
      padding: 15px;
   }

   .qm-quote-info h3 {
      font-size: 16px;
   }

   .qm-quote-total strong {
      font-size: 18px;
   }

   .qm-stats-grid {
      grid-template-columns: 1fr;
      gap: 15px;
   }

   .qm-stat-box {
      padding: 20px;
   }

   .qm-stat-value {
      font-size: 26px;
   }

   .qm-quicklinks-grid {
      grid-template-columns: 1fr;
   }

   .qm-quicklink-item {
      flex-direction: row;
      justify-content: flex-start;
      padding: 16px;
   }
}

/* ============================================================================
   ACCESSIBILITY
   ========================================================================= */

.qm-btn:focus-visible,
.qm-btn-small:focus-visible,
.qm-quicklink-item:focus-visible {
   outline: 3px solid var(--qm-primary);
   outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

   .qm-quote-item,
   .qm-stat-box,
   .qm-btn,
   .qm-btn-small,
   .qm-badge,
   .qm-quicklink-item {
      animation: none !important;
      transition: none !important;
   }
}

/* ============================================================================
   PRINT STYLES
   ========================================================================= */

@media print {
   .qm-quote-item {
      box-shadow: none;
      border: 1px solid #ddd;
      page-break-inside: avoid;
      margin-bottom: 15px;
   }

   .qm-quote-item:hover {
      transform: none;
   }

   .qm-btn,
   .qm-btn-small,
   .qm-quicklinks-grid {
      display: none;
   }

   .qm-stats-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .qm-stat-box {
      box-shadow: none;
      border: 1px solid #ddd;
   }
}