/* =============================================
   HMDev Licensing — Global Styles
   ============================================= */

:root {
    --hmdev-dark-bg: #21252B;
    --hmdev-navy: #2A313C;
    --hmdev-cyan: #35B4E9;
    --hmdev-slate: #3F4D5C;
    --hmdev-light-slate: #8590A3;
    --hmdev-off-white: #FFFFFF;
    --hmdev-success: #4CAF50;
    --hmdev-warning: #FF9800;
    --hmdev-error: #F44336;
    --hmdev-info: #2196F3;
    --hmdev-font-primary: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    --hmdev-font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    --hmdev-spacing-xs: 4px;
    --hmdev-spacing-sm: 8px;
    --hmdev-spacing-md: 16px;
    --hmdev-spacing-lg: 24px;
    --hmdev-spacing-xl: 32px;
    --hmdev-spacing-xxl: 48px;
    --hmdev-border-radius-sm: 4px;
    --hmdev-border-radius-md: 8px;
    --hmdev-border-radius-lg: 12px;
    --hmdev-shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
    --hmdev-shadow-md: 0 4px 8px rgba(0,0,0,0.3);
    --hmdev-shadow-lg: 0 8px 16px rgba(0,0,0,0.4);
}

/* ---- Reset / Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background-color: var(--hmdev-dark-bg);
    color: var(--hmdev-off-white);
    font-family: var(--hmdev-font-primary);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
}

a { color: var(--hmdev-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout Utilities ---- */
.d-flex         { display: flex; }
.justify-center { justify-content: center; }
.text-center    { text-align: center; }
.text-light     { color: var(--hmdev-light-slate); }
.w-100          { width: 100%; }
.gap-3          { gap: var(--hmdev-spacing-md); }
.mb-3           { margin-bottom: var(--hmdev-spacing-md); }
.mb-4           { margin-bottom: var(--hmdev-spacing-lg); }
.mt-2           { margin-top: var(--hmdev-spacing-sm); }
.mt-3           { margin-top: var(--hmdev-spacing-md); }
.mt-4           { margin-top: var(--hmdev-spacing-lg); }
.lead           { font-size: 1.2rem; color: var(--hmdev-light-slate); }
.display-1      { font-size: 3rem; font-weight: 700; line-height: 1.2; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hmdev-spacing-sm);
    padding: 10px 20px;
    border: none;
    border-radius: var(--hmdev-border-radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { opacity: 0.9; transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-primary   { background-color: var(--hmdev-cyan); color: var(--hmdev-dark-bg); }
.btn-secondary { background-color: var(--hmdev-slate); color: var(--hmdev-off-white); }
.btn-outline   { background: transparent; border: 1px solid var(--hmdev-cyan); color: var(--hmdev-cyan); }
.btn-outline:hover { background-color: var(--hmdev-cyan); color: var(--hmdev-dark-bg); }
.btn-danger    { background-color: var(--hmdev-error); color: #fff; }
.btn-sm        { padding: 6px 14px; font-size: 0.8rem; }
.btn-lg        { padding: 14px 28px; font-size: 1rem; }
.btn-block     { width: 100%; }
.btn:disabled  { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---- Cards ---- */
.card {
    background-color: var(--hmdev-navy);
    border: 1px solid var(--hmdev-slate);
    border-radius: var(--hmdev-border-radius-lg);
    padding: var(--hmdev-spacing-lg);
    box-shadow: var(--hmdev-shadow-sm);
}
.card-header  { margin-bottom: var(--hmdev-spacing-md); padding-bottom: var(--hmdev-spacing-md); border-bottom: 1px solid var(--hmdev-slate); }
.card-title   { font-size: 1.1rem; font-weight: 600; color: var(--hmdev-off-white); margin: 0 0 4px; }
.card-subtitle { font-size: 0.85rem; color: var(--hmdev-light-slate); margin: 0; }

/* ---- Forms ---- */
.form-group {
    margin-bottom: var(--hmdev-spacing-md);
}
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--hmdev-light-slate);
}
.form-control, .form-select {
    width: 100%;
    padding: 10px 14px;
    background-color: var(--hmdev-dark-bg);
    border: 1px solid var(--hmdev-slate);
    border-radius: var(--hmdev-border-radius-md);
    color: var(--hmdev-off-white);
    font-size: 0.9rem;
    font-family: var(--hmdev-font-primary);
    transition: border-color 0.2s;
    outline: none;
}
.form-control:focus, .form-select:focus {
    border-color: var(--hmdev-cyan);
    box-shadow: 0 0 0 2px rgba(53, 180, 233, 0.15);
}
.form-control::placeholder { color: var(--hmdev-light-slate); }
.form-text  { font-size: 0.8rem; color: var(--hmdev-light-slate); margin-top: 4px; }
.form-row   { display: flex; gap: var(--hmdev-spacing-md); }
.form-row .form-group { flex: 1; }
.form-check { display: flex; align-items: flex-start; gap: var(--hmdev-spacing-sm); }
.form-check-input { width: 16px; height: 16px; accent-color: var(--hmdev-cyan); margin-top: 2px; flex-shrink: 0; }
.form-check-label { font-size: 0.85rem; color: var(--hmdev-light-slate); }

/* ---- Alerts ---- */
.alert {
    padding: var(--hmdev-spacing-md);
    border-radius: var(--hmdev-border-radius-md);
    margin-bottom: var(--hmdev-spacing-md);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: var(--hmdev-spacing-sm);
}
.alert-success { background-color: rgba(76, 175, 80, 0.15); border: 1px solid var(--hmdev-success); color: var(--hmdev-success); }
.alert-error   { background-color: rgba(244, 67, 54, 0.15); border: 1px solid var(--hmdev-error); color: var(--hmdev-error); }
.alert-warning { background-color: rgba(255, 152, 0, 0.15); border: 1px solid var(--hmdev-warning); color: var(--hmdev-warning); }
.alert-info    { background-color: rgba(33, 150, 243, 0.15); border: 1px solid var(--hmdev-info); color: var(--hmdev-info); }

/* ---- Badges ---- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-cyan    { background-color: rgba(53, 180, 233, 0.15); color: var(--hmdev-cyan); }
.badge-info    { background-color: rgba(33, 150, 243, 0.15); color: var(--hmdev-info); }
.badge-success { background-color: rgba(76, 175, 80, 0.15); color: var(--hmdev-success); }
.badge-warning { background-color: rgba(255, 152, 0, 0.15); color: var(--hmdev-warning); }
.badge-danger  { background-color: rgba(244, 67, 54, 0.15); color: var(--hmdev-error); }

/* ---- Spinner ---- */
.spinner-border {
    display: inline-block;
    width: 2rem; height: 2rem;
    border: 0.25em solid rgba(255,255,255,0.3);
    border-top-color: var(--hmdev-cyan);
    border-radius: 50%;
    animation: spinner-spin 0.75s linear infinite;
}
.spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.15em; }
.spinner { display: flex; justify-content: center; align-items: center; padding: var(--hmdev-spacing-xl); }
@keyframes spinner-spin { to { transform: rotate(360deg); } }

/* ---- Validation ---- */
.validation-summary { color: var(--hmdev-error); font-size: 0.85rem; }
.validation-message { color: var(--hmdev-error); font-size: 0.8rem; margin-top: 4px; }
.invalid         { border-color: var(--hmdev-error) !important; }
.valid           { border-color: var(--hmdev-success) !important; }

/* ---- Auth Pages ---- */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hmdev-spacing-lg);
    background-color: var(--hmdev-dark-bg);
}
.auth-card {
    background-color: var(--hmdev-navy);
    border: 1px solid var(--hmdev-slate);
    border-radius: var(--hmdev-border-radius-lg);
    padding: var(--hmdev-spacing-xxl);
    width: 100%;
    max-width: 440px;
    box-shadow: var(--hmdev-shadow-lg);
}
.auth-header   { text-align: center; margin-bottom: var(--hmdev-spacing-xl); }
.auth-header h1 { font-size: 1.8rem; font-weight: 700; color: var(--hmdev-off-white); margin: 0 0 8px; }
.auth-subtitle { color: var(--hmdev-light-slate); font-size: 0.9rem; }
.auth-body     { display: flex; flex-direction: column; gap: 0; }
.auth-footer   { text-align: center; margin-top: var(--hmdev-spacing-lg); font-size: 0.85rem; color: var(--hmdev-light-slate); }
.auth-link     { color: var(--hmdev-cyan); }

/* ---- Logout Page ---- */
.logout-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.logout-card      { text-align: center; max-width: 400px; padding: var(--hmdev-spacing-xxl); }
.logout-icon      { font-size: 3rem; color: var(--hmdev-cyan); margin-bottom: var(--hmdev-spacing-lg); }

/* ---- Hero / Landing ---- */
.hero-section {
    padding: var(--hmdev-spacing-xxl) var(--hmdev-spacing-lg);
    text-align: center;
    background: linear-gradient(135deg, var(--hmdev-navy) 0%, var(--hmdev-dark-bg) 100%);
}
.features-section, .pricing-header, .faq-section, .product-section, .cta-section, .products-section {
    padding: var(--hmdev-spacing-xxl) var(--hmdev-spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}
.features-grid, .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--hmdev-spacing-lg); }
.faq-grid       { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--hmdev-spacing-lg); }

/* ---- Pricing ---- */
.pricing-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--hmdev-spacing-lg); padding: var(--hmdev-spacing-xl) var(--hmdev-spacing-lg); max-width: 1200px; margin: 0 auto; }
.tier-card      { background-color: var(--hmdev-navy); border: 1px solid var(--hmdev-slate); border-radius: var(--hmdev-border-radius-lg); padding: var(--hmdev-spacing-xl); position: relative; transition: transform 0.2s, box-shadow 0.2s; }
.tier-card:hover { transform: translateY(-4px); box-shadow: var(--hmdev-shadow-lg); }
.tier-header    { margin-bottom: var(--hmdev-spacing-lg); }
.tier-name      { font-size: 1.3rem; font-weight: 700; margin: 0 0 8px; }
.tier-price     { margin-bottom: var(--hmdev-spacing-md); }
.price-amount   { font-size: 2.5rem; font-weight: 700; color: var(--hmdev-cyan); }
.price-period   { font-size: 0.9rem; color: var(--hmdev-light-slate); }
.tier-features  { list-style: none; padding: 0; margin: 0 0 var(--hmdev-spacing-lg); display: flex; flex-direction: column; gap: 10px; }
.tier-features li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.tier-features li i { color: var(--hmdev-cyan); }
.tier-actions   { margin-top: auto; }
.tier-billing   { font-size: 0.8rem; color: var(--hmdev-light-slate); text-align: center; margin-top: 8px; }
.billing-toggle { display: flex; align-items: center; justify-content: center; gap: var(--hmdev-spacing-md); margin: var(--hmdev-spacing-lg) 0; }
.featured-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background-color: var(--hmdev-cyan); color: var(--hmdev-dark-bg); padding: 4px 16px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }

/* ---- Account Pages ---- */
.account-container  { display: flex; min-height: calc(100vh - 64px); }
.account-content    { flex: 1; padding: var(--hmdev-spacing-xl); overflow-y: auto; }

/* ---- Admin Pages ---- */
.admin-container    { display: flex; min-height: calc(100vh - 64px); }
.admin-layout       { display: flex; min-height: 100%; }
.admin-content      { flex: 1; padding: var(--hmdev-spacing-xl); overflow-y: auto; }
.admin-header       { margin-bottom: var(--hmdev-spacing-xl); }
.admin-header h1    { font-size: 1.8rem; font-weight: 700; margin: 0 0 8px; }
.admin-subtitle     { color: var(--hmdev-light-slate); }
.admin-sidebar      { width: 220px; background-color: var(--hmdev-navy); border-right: 1px solid var(--hmdev-slate); padding: var(--hmdev-spacing-lg) 0; flex-shrink: 0; }
.admin-nav          { display: flex; flex-direction: column; }
.nav-item {
    display: flex; align-items: center; gap: var(--hmdev-spacing-sm);
    padding: 12px var(--hmdev-spacing-lg);
    color: var(--hmdev-light-slate);
    cursor: pointer;
    transition: all 0.15s;
    border: none; background: none; width: 100%; text-align: left; font-size: 0.9rem;
    text-decoration: none;
}
.nav-item:hover     { background-color: rgba(53, 180, 233, 0.08); color: var(--hmdev-off-white); }
.nav-item.active    { background-color: rgba(53, 180, 233, 0.15); color: var(--hmdev-cyan); border-right: 3px solid var(--hmdev-cyan); }
.nav-item i         { width: 18px; text-align: center; }

/* ---- Blazor Error UI ---- */
#blazor-error-ui {
    background: var(--hmdev-error);
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #fff;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.5rem; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .form-row { flex-direction: column; }
    .pricing-grid, .features-grid { grid-template-columns: 1fr; }
    .admin-sidebar { display: none; }
    .auth-card { padding: var(--hmdev-spacing-lg); }
    .display-1 { font-size: 2rem; }
}