/* Dictaphone Core layout */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        .container {
            max-width: 100%;
            padding: 1rem;
        }

        @media (min-width: 768px) {
            .container {
                max-width: 90%;
            }
        }

        @media (min-width: 1200px) {
            .container {
                max-width: 1140px;
            }
        }

        /* Card styling */
        .card {
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .card-header {
            padding: 1rem;
        }

        .card-body {
            padding: 1.25rem;
        }

        /* Form elements */
        .form-control {
            width: 100%;
            max-width: 100%;
        }

        textarea.form-control {
            min-height: 100px;
        }

        /* Buttons */
        .btn {
            margin: 0.25rem;
            white-space: nowrap;
        }

        .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        /* Modal adjustments */
        .modal-dialog {
            margin: 1rem;
            width: calc(100% - 2rem);
            max-width: 500px;
        }

        .modal-content {
            max-height: 90vh;
            overflow-y: auto;
        }

        /* List groups */
        .list-group-item {
            padding: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .list-group-item i {
            width: 20px;
            text-align: center;
        }

        /* Alerts */
        .alert {
            margin-bottom: 1rem;
            word-wrap: break-word;
        }

        /* Badges */
        .badge {
            font-size: 0.875rem;
            padding: 0.5em 0.75em;
        }

        /* Icons */
        .fa, .fas, .fab {
            margin-right: 0.5rem;
        }

        /* Copy functionality */
        .copy-feedback {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 1rem;
            background-color: rgba(40, 167, 69, 0.9);
            color: white;
            border-radius: 4px;
            display: none;
            z-index: 1050;
            animation: fadeInOut 2s ease-in-out;
        }

        @keyframes fadeInOut {
            0% { opacity: 0; transform: translateY(-20px); }
            15% { opacity: 1; transform: translateY(0); }
            85% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-20px); }
        }

		.copy-button {
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 10;
		}
		.textarea-container {
			position: relative;
			margin-top: 0.5rem;
		}

        /* Recording indicator */
        .recording-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #dc3545;
            border-radius: 50%;
            margin-right: 8px;
            animation: pulse 1.5s infinite;
        }

        /* Button layout */
		.button-container {
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}

        .button-group {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        /* Utility classes */
        .text-break {
            word-break: break-word !important;
        }

        .flex-wrap-reverse {
            flex-wrap: wrap-reverse !important;
        }

        /* Small screen adjustments */
        @media (max-width: 576px) {
            .card-header h3 {
                font-size: 1.25rem;
            }

            .btn {
                padding: 0.375rem 0.75rem;
                font-size: 0.875rem;
            }

            .list-group-item {
                padding: 0.5rem;
                font-size: 0.875rem;
            }

            .modal-body {
                padding: 1rem;
            }

            .badge {
                font-size: 0.75rem;
            }

            .copy-feedback {
                top: 10px;
                right: 10px;
                left: 10px;
                text-align: center;
            }

			.button-container {
				flex-wrap: wrap;
			}
			
			.button-container .btn {
				font-size: 0.875rem;
			}

            .button-group {
                justify-content: space-between;
            }
			#recordingIndicator {
				width: 100%;
				margin-top: 0.5rem;
			}
        }

        /* Medium screen adjustments */
        @media (min-width: 577px) and (max-width: 991px) {
            .card-header h3 {
                font-size: 1.5rem;
            }
        }

        /* Help section styling */
        #firefoxHelp .alert {
            margin: 0;
        }

        #firefoxHelp ol {
            padding-left: 1.25rem;
        }

        #firefoxHelp ul {
            padding-left: 1.25rem;
            margin-bottom: 0.5rem;
        }

        #firefoxHelp li {
            margin-bottom: 0.5rem;
        }

        /* Status indicators */
        .status-active {
            background-color: #28a745;
        }

        /* Accessibility improvements */
        :focus {
            outline: 2px solid #0d6efd;
            outline-offset: 2px;
        }

        @media (prefers-reduced-motion: reduce) {
            .recording-indicator {
                animation: none;
            }
        }

        /* Dark mode support */
        @media (prefers-color-scheme: dark) {
            .bg-light {
                background-color: #343a40 !important;
            }

            .card {
                background-color: #2b3035;
                border-color: #454d55;
            }

            .card-header {
                background-color: #212529;
                border-bottom-color: #454d55;
            }

            .modal-content {
                background-color: #2b3035;
                border-color: #454d55;
            }

            .list-group-item {
                background-color: #2b3035;
                border-color: #454d55;
                color: #fff;
            }

            .text-muted {
                color: #adb5bd !important;
            }
        }

        /* Print styles */
        @media print {
            .no-print {
                display: none !important;
            }

            .card {
                border: none !important;
                box-shadow: none !important;
            }

            .card-body {
                padding: 0 !important;
            }
        }