/* NORTH CRM - Frontend CSS (Customer Portal) */
/* Uses CSS variables from north-platform for theme inheritance */

:root {
    /* Fallback colors if not overridden by parent theme or portal scope */
    --north-color-primary: var(--north-portal-primary, #2271b1);
    --north-color-bg: var(--north-portal-bg, #fff);
    --north-color-bg-light: var(--north-portal-surface, #f9f9f9);
    --north-color-text: var(--north-portal-text, #333);
    --north-color-text-muted: var(--north-portal-muted, #666);
    --north-color-border: var(--north-portal-border, #ddd);
    --north-color-border-light: var(--north-portal-border, #e0e0e0);
}

.crm-notes-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.crm-note-item {
    background: var(--north-color-bg-light, #f9f9f9);
    border-left: 4px solid var(--north-color-primary, #2271b1);
    padding: 20px;
    border-radius: 4px;
}

.crm-note-item h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--north-color-text, #333);
}

.note-content {
    margin-bottom: 10px;
    line-height: 1.6;
    color: var(--north-color-text, #333);
}

.note-meta {
    font-size: 12px;
    color: var(--north-color-text-muted, #666);
    font-style: italic;
}

.crm-documents-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.crm-document-item {
    background: var(--north-color-bg, #fff);
    border: 1px solid var(--north-color-border, #ddd);
    border-radius: 4px;
    padding: 15px;
    text-align: center;
}

.crm-document-item:hover {
    border-color: var(--north-color-primary, #2271b1);
}

/* Combined profile */
.crm-profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.crm-profile-grid .profile-card {
    background: var(--north-color-bg, #fff);
    border: 1px solid var(--north-color-border, #ddd);
    border-radius: 6px;
    padding: 16px;
}
/* Single column at all sizes to avoid cramped layout */

/* My Account menu grouping for Support */
.woocommerce-MyAccount-navigation-link--crm-support a {
    font-weight: 600;
}
.woocommerce-MyAccount-navigation-link--crm-tracking,
.woocommerce-MyAccount-navigation-link--crm-reclamation,
.woocommerce-MyAccount-navigation-link--crm-return,
.woocommerce-MyAccount-navigation-link--crm-error-delivery {
    padding-left: 12px;
}

/* Mobile accordion for My Account navigation */
@media (max-width: 782px) {
  .woocommerce-MyAccount-navigation ul { padding:0; margin:0; }
  .woocommerce-MyAccount-navigation li { border-bottom:1px solid var(--north-color-border-light, #eee); }
  .woocommerce-MyAccount-navigation a { display:flex; justify-content:space-between; align-items:center; }
  .woocommerce-MyAccount-navigation a:after { content:'+'; font-weight:600; }
  .woocommerce-MyAccount-navigation li.open > a:after { content:'−'; }
  .woocommerce-MyAccount-navigation li ul { display:none; }
}

/* Support hub */
.crm-support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.support-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--north-color-bg, #fff);
    border: 1px solid var(--north-color-border, #ddd);
    border-radius: 6px;
    padding: 16px;
    text-decoration: none;
    color: var(--north-color-text, #333);
    transition: border-color 0.2s ease;
}
.support-card:hover {
    border-color: var(--north-color-primary, #2271b1);
}
.support-card .icon { font-size: 22px; }
.support-card .title { font-weight: 600; color: #222; }
.support-card .desc { color: #555; font-size: 13px; }

/* My Account navigation: force vertical on mobile/tablet */
@media (max-width: 1080px) {
    .woocommerce-MyAccount-navigation ul {
        display: block;
    }
    .woocommerce-MyAccount-navigation li {
        width: 100%;
        margin: 0;
    }
    .woocommerce-MyAccount-navigation a {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* Dashboard spacing tweaks for smaller screens */
@media (max-width: 1080px) {
    .dashboard-stats { gap: 16px; }
    .stat-card { padding: 16px; }
    .stat-icon { font-size: 40px; }
    .quick-actions { padding: 18px; }
    .actions-grid { gap: 12px; }
    .action-button { padding: 16px; }
}

@media (max-width: 782px) {
    .dashboard-stats { gap: 12px; }
    .stat-card { padding: 14px; }
    .stat-value { font-size: 22px; }
    .stat-icon { font-size: 34px; }
    .quick-actions { padding: 16px; margin-bottom: 28px; }
    .actions-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
    .action-button { padding: 14px; }
}