:root { --sidebar-width: 260px; --bg-dark: #29307a; --bg-light: #f8f9fa; }
        body { background-color: var(--bg-light); font-family: 'Nunito', sans-serif; overflow-x: hidden; }
        
      	/* Base button */
      .btn-primary {
        background-color: var(--bg-dark);
        border-color: var(--bg-dark);
        color: #fff;
      }

      /* Hover */
      .btn-primary:hover {
        background-color: #1f255f; /* slightly darker */
        border-color: #1f255f;
      }

      /* Focus */
      .btn-primary:focus,
      .btn-primary.focus {
        background-color: #1f255f;
        border-color: #1f255f;
        box-shadow: 0 0 0 0.25rem rgba(41, 48, 122, 0.5);
      }

      /* Active / pressed */
      .btn-primary:active,
      .btn-primary.active,
      .show > .btn-primary.dropdown-toggle {
        background-color: #181d4a;
        border-color: #181d4a;
      }

      /* Disabled */
      .btn-primary:disabled,
      .btn-primary.disabled {
        background-color: var(--bg-dark);
        border-color: var(--bg-dark);
        opacity: 0.65;
      }

      /* Outline version */
      .btn-outline-primary {
        color: var(--bg-dark);
        border-color: var(--bg-dark);
      }

      .btn-outline-primary:hover {
        background-color: var(--bg-dark);
        color: #fff;
        border-color: var(--bg-dark);
      }	
        /* Sidebar Styling */
        .sidebar { width: var(--sidebar-width); background: var(--bg-dark); height: 100vh; position: fixed; color: #fff; transition: all 0.3s; z-index: 1000; }
        .sidebar .nav-link { color: #a0aec0; padding: 12px 25px; display: flex; align-items: center; gap: 10px; transition: 0.3s; }
        .sidebar .nav-link:hover, .sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,0.05); border-left: 4px solid #3182ce; }
        .sidebar .nav-link i { font-size: 1.2rem; }
        .sidebar-heading { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #718096; padding: 20px 25px 10px; }

        /* Main Content */
        .main-content { margin-left: var(--sidebar-width); min-height: 100vh; transition: all 0.3s; }
        .header { background: #fff; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0; }
        
        /* Stats Cards */
        .stat-card { border: none; border-radius: 12px; transition: transform 0.2s; background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
        .stat-card:hover { transform: translateY(-5px); }
        .stat-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
 
        .sidebar-brand {
            display: flex;
            align-items: center;
            gap: 10px;
          	background-color: #fff;
        }

        .sidebar-logo {
            height: 105px;
            object-fit: contain;
            flex-shrink: 0;
        }

    .form-check-input:checked {
        background-color: var(--bg-dark);
        border-color: var(--bg-dark);
    }
    
    .email-template,.template-preview img {
        display: block;
        max-width: 600px;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }