/**
 * ==========================================================================
 * VERIMUS DESIGN SYSTEM - ALERTS & NOTIFICATIONS
 * ==========================================================================
 * 
 * Alert, notice, and notification styling.
 * 
 * Alert Classes:
 * - .v-alert             = Base alert
 * - .v-alert--{type}     = Type variants (success, warning, error, info)
 * - .alert-{type}        = Bootstrap compatibility
 * 
 * Notice Classes:
 * - .notice-container    = Full-width notice banner
 * - .v-notice            = Card-style notice
 * 
 * Toast Classes:
 * - Toastr styling overrides
 * 
 * Depends on: _variables.css
 * ==========================================================================
 */

/* ==========================================================================
   BASE ALERT
   ========================================================================== */

   .v-alert,
   .alert {
     position: relative;
     display: flex;
     align-items: flex-start;
     gap: var(--spacing-3);
     padding: var(--spacing-4);
     background-color: var(--gray-100);
     border: none;
     border-radius: var(--radius-lg);
     font-size: var(--font-size-sm);
     color: var(--text-primary);
   }
   
   /* Alert icon */
   .v-alert-icon,
   .alert-icon {
     flex-shrink: 0;
     width: var(--icon-size-lg);
     height: var(--icon-size-lg);
   }
   
   /* Alert content */
   .v-alert-content,
   .alert-content {
     flex: 1;
     min-width: 0;
   }
   
   /* Alert title */
   .v-alert-title {
     font-weight: var(--font-weight-semibold);
     margin-bottom: var(--spacing-1);
   }
   
   /* Alert message */
   .v-alert-message {
     color: var(--text-secondary);
   }
   
   /* Dismissible alert */
   .v-alert-close,
   .alert .btn-close {
     position: absolute;
     top: var(--spacing-3);
     right: var(--spacing-3);
     padding: var(--spacing-1);
     background: transparent;
     border: none;
     cursor: pointer;
     opacity: 0.7;
     transition: opacity var(--transition-base);
   }
   
   .v-alert-close:hover,
   .alert .btn-close:hover {
     opacity: 1;
   }
   
   /* ==========================================================================
      ALERT VARIANTS
      ========================================================================== */
   
   /* Success */
   .v-alert--success,
   .alert-success {
     background-color: var(--color-success-light);
     color: var(--color-success-dark);
   }
   
   .v-alert--success .v-alert-icon,
   .alert-success .alert-icon {
     color: var(--color-success);
   }
   
   /* Warning */
   .v-alert--warning,
   .alert-warning {
     background-color: var(--color-warning-light);
     color: var(--color-warning-dark);
   }
   
   .v-alert--warning .v-alert-icon,
   .alert-warning .alert-icon {
     color: var(--color-warning-dark);
   }
   
   /* Error/Danger */
   .v-alert--error,
   .v-alert--danger,
   .alert-danger,
   .alert-error {
     background-color: var(--color-error-light);
     color: var(--color-error-dark);
   }
   
   .v-alert--error .v-alert-icon,
   .v-alert--danger .v-alert-icon,
   .alert-danger .alert-icon {
     color: var(--color-error);
   }
   
   /* Info */
   .v-alert--info,
   .alert-info {
     background-color: var(--color-info-light);
     color: var(--color-info-dark);
   }
   
   .v-alert--info .v-alert-icon,
   .alert-info .alert-icon {
     color: var(--color-info);
   }
   
   /* Primary */
   .v-alert--primary,
   .alert-primary {
     background-color: rgba(255, 128, 48, 0.1);
     color: var(--color-primary);
   }
   
   /* Light/Muted */
   .v-alert--light,
   .alert-light {
     background-color: var(--gray-100);
     color: var(--text-secondary);
   }
   
   /* ==========================================================================
      ALERT VARIANTS - BORDERED
      ========================================================================== */
   
   .v-alert--bordered {
     border-left: 4px solid currentColor;
     border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
   }
   
   .v-alert--bordered.v-alert--success {
     border-left-color: var(--color-success);
   }
   
   .v-alert--bordered.v-alert--warning {
     border-left-color: var(--color-warning);
   }
   
   .v-alert--bordered.v-alert--error {
     border-left-color: var(--color-error);
   }
   
   .v-alert--bordered.v-alert--info {
     border-left-color: var(--color-info);
   }
   
   /* ==========================================================================
      INLINE ALERT (Compact)
      ========================================================================== */
   
   .v-alert--inline {
     display: inline-flex;
     padding: var(--spacing-2) var(--spacing-3);
     font-size: var(--font-size-xs);
   }
   
   /* ==========================================================================
      NOTICE CONTAINER (Full-width Banner)
      ========================================================================== */
   
   .notice-container {
     position: relative;
     padding: var(--spacing-6);
     background-color: var(--color-primary);
     background-size: cover;
     background-position: center;
     border-radius: var(--radius-xl);
     color: var(--white);
     overflow: hidden;
   }
   
   .notice-container-header-top-wrapper {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--spacing-4);
   }
   
   .notice-name {
     font-size: var(--font-size-2xl);
     font-weight: var(--font-weight-bold);
     margin-bottom: var(--spacing-2);
   }
   
   .notice-sub-title {
     font-size: var(--font-size-base);
     opacity: 0.9;
     margin-bottom: var(--spacing-4);
   }
   
   .notice-content {
     max-width: 60%;
   }
   
   .notice-content-button {
     margin-top: var(--spacing-4);
   }
   
   .notice-sign {
     font-style: italic;
     opacity: 0.8;
     margin-top: var(--spacing-4);
   }
   
   /* Close button for notice */
   .close-event-box {
     position: absolute;
     top: var(--spacing-4);
     right: var(--spacing-4);
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: rgba(255, 255, 255, 0.2);
     border: none;
     border-radius: var(--radius-full);
     color: var(--white);
     cursor: pointer;
     transition: background-color var(--transition-base);
   }
   
   .close-event-box:hover {
     background-color: rgba(255, 255, 255, 0.3);
   }
   
   /* Show notice button (when hidden) */
   .show-notice-button {
     position: fixed;
     bottom: var(--spacing-4);
     right: var(--spacing-4);
     z-index: var(--z-fixed);
   }
   
   /* ==========================================================================
      CARD-STYLE NOTICE
      ========================================================================== */
   
   .v-notice {
     background-color: var(--card-bg);
     border: var(--card-border);
     border-radius: var(--radius-lg);
     padding: var(--spacing-4);
   }
   
   .v-notice--success {
     border-left: 4px solid var(--color-success);
   }
   
   .v-notice--warning {
     border-left: 4px solid var(--color-warning);
   }
   
   .v-notice--error {
     border-left: 4px solid var(--color-error);
   }
   
   .v-notice--info {
     border-left: 4px solid var(--color-info);
   }
   
   /* ==========================================================================
      TASK MESSAGE
      ========================================================================== */
   
   .task-message {
     position: relative;
     background-color: rgba(255, 128, 48, 0.07);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-md);
     padding: var(--spacing-4);
   }
   
   .task-message h3,
   .task-message h4 {
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-semibold);
     margin-bottom: var(--spacing-2);
   }
   
   .task-message p {
     font-size: var(--font-size-sm);
     color: var(--text-secondary);
     line-height: 1.5;
     margin-bottom: var(--spacing-2);
   }
   
   .task-message > *:last-child {
     margin-bottom: 0;
   }
   
   .task-message a.verimus-btn {
     font-size: var(--font-size-sm);
     padding: var(--btn-padding-y) var(--btn-padding-x-sm);
   }
   
   .task-message a.verimus-btn:hover {
     text-decoration: none;
   }
   
   /* Dismiss button for task-message and tip cards */
   .task-message .dismiss-tip-card,
   .hr-command-tip .dismiss-tip-card,
   .dismiss-tip-card {
     position: absolute;
     top: var(--spacing-2);
     right: var(--spacing-3);
     background: transparent;
     border: 0;
     outline: 0;
     box-shadow: none;
     appearance: none;
     -webkit-appearance: none;
     cursor: pointer;
     color: var(--text-muted);
     font-size: var(--font-size-lg);
     line-height: 1;
     padding: var(--spacing-1);
     opacity: 0.7;
     transition: opacity var(--transition-base);
   }
   
   .dismiss-tip-card:hover {
     opacity: 1;
     color: var(--text-primary);
   }
   
   /* HR Command Tip - similar styling to task-message */
   .hr-command-tip {
     position: relative;
     background-color: rgba(255, 128, 48, 0.07);
     padding: var(--spacing-5);
     border-radius: var(--radius-md);
   }
   
   .hr-command-tip-dismiss {
     position: absolute;
     top: var(--spacing-3);
     right: var(--spacing-3);
     background: none;
     border: none;
     font-size: var(--font-size-xl);
     line-height: 1;
     color: var(--text-secondary);
     cursor: pointer;
     padding: 4px 8px;
     border-radius: var(--radius-sm);
     opacity: 0.6;
     transition: opacity 0.2s;
   }
   .hr-command-tip-dismiss:hover {
     opacity: 1;
     color: var(--text-primary);
   }
   
   .hr-command-tip a.verimus-btn {
     background-color: var(--color-secondary);
     border-color: var(--color-secondary);
   }
   
   .hr-command-tip a.verimus-btn:hover {
     background-color: var(--color-primary);
     text-decoration: none;
   }
   
   /* ==========================================================================
      ERROR MESSAGE
      ========================================================================== */
   
   .error-message,
   .custom-error-message {
     color: var(--color-error);
     font-size: var(--font-size-sm);
     margin-top: var(--spacing-2);
   }
   
   .success-message {
     color: var(--color-success);
     font-size: var(--font-size-sm);
     margin-top: var(--spacing-2);
   }
   
   /* ==========================================================================
      AUTH FORM MESSAGES
      ========================================================================== */
   
   .auth-form-error {
     background-color: var(--color-error-light);
     color: var(--color-error);
     padding: var(--spacing-3);
     border-radius: var(--radius-md);
     font-size: var(--font-size-sm);
     margin-bottom: var(--spacing-4);
   }
   
   .auth-form-msg {
     background-color: var(--color-success-light);
     color: var(--color-success);
     padding: var(--spacing-3);
     border-radius: var(--radius-md);
     font-size: var(--font-size-sm);
     margin-bottom: var(--spacing-4);
   }
   
   /* ==========================================================================
      WORDPRESS ADMIN NOTICES
      ========================================================================== */
   
   .notice {
     padding: var(--spacing-3) var(--spacing-4);
     border-radius: var(--radius-md);
     margin-bottom: var(--spacing-4);
   }
   
   .notice-success {
     background-color: var(--color-success-light);
     border-left: 4px solid var(--color-success);
   }
   
   .notice-error {
     background-color: var(--color-error-light);
     border-left: 4px solid var(--color-error);
   }
   
   .notice-warning {
     background-color: var(--color-warning-light);
     border-left: 4px solid var(--color-warning);
   }
   
   .notice-info {
     background-color: var(--color-info-light);
     border-left: 4px solid var(--color-info);
   }
   
   /* ==========================================================================
      TOASTR OVERRIDES
      ========================================================================== */
   
   .toast-container {
     z-index: var(--z-toast) !important;
   }
   
   #toast-container > div {
     border-radius: var(--radius-lg) !important;
     box-shadow: var(--shadow-lg) !important;
     padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 50px !important;
     font-family: inherit !important;
     background-position: 15px center !important;
     background-repeat: no-repeat !important;
     background-clip: border-box !important;
   }
   
   .toast-title {
     font-weight: var(--font-weight-semibold) !important;
     margin-bottom: var(--spacing-1) !important;
   }
   
   .toast-message {
     font-size: var(--font-size-sm) !important;
   }
   
   .toast-success {
     background-color: var(--color-success) !important;
   }
   
   .toast-error {
     background-color: var(--color-error) !important;
   }
   
   .toast-warning {
     background-color: var(--color-warning) !important;
     color: var(--gray-900) !important;
   }
   
   .toast-info {
     background-color: var(--color-info) !important;
   }
   
   .toast-close-button {
     font-size: var(--font-size-lg) !important;
     opacity: 0.8 !important;
   }
   
   .toast-close-button:hover {
     opacity: 1 !important;
   }
   
   /* ==========================================================================
      DARK MODE
      ========================================================================== */
   
   .dark-mode .v-alert,
   .dark-mode .alert {
     background-color: var(--dark-bg-tertiary);
     color: var(--dark-text-primary);
   }
   
   .dark-mode .v-alert--success,
   .dark-mode .alert-success {
     background-color: rgba(67, 160, 71, 0.2);
     color: var(--color-success-text-dark);
   }
   
   .dark-mode .v-alert--warning,
   .dark-mode .alert-warning {
     background-color: rgba(255, 179, 0, 0.2);
     color: var(--color-warning-text-dark);
   }
   
   .dark-mode .v-alert--error,
   .dark-mode .v-alert--danger,
   .dark-mode .alert-danger {
     background-color: rgba(220, 53, 69, 0.2);
     color: var(--color-error-text-dark);
   }
   
   .dark-mode .v-alert--info,
   .dark-mode .alert-info {
     background-color: rgba(30, 136, 229, 0.2);
     color: var(--color-info-text-dark);
   }
   
   .dark-mode .v-notice {
     background-color: var(--dark-bg-secondary);
     border-color: var(--dark-border);
   }
   
   .dark-mode .task-message {
     background-color: var(--dark-bg-tertiary);
   }
   
   .dark-mode .task-message h3 {
     color: var(--dark-text-primary);
   }
   
   .dark-mode .task-message p {
     color: var(--dark-text-secondary);
   }
   
   /* ==========================================================================
      RESPONSIVE
      ========================================================================== */
   
   @media screen and (max-width: 767px) {
     .notice-container {
       padding: var(--spacing-4);
     }
     
     .notice-content {
       max-width: 100%;
     }
     
     .notice-name {
       font-size: var(--font-size-lg);
     }
     
     .notice-sub-title {
       font-size: var(--font-size-sm);
     }
   }