@import "./base.css";
@import '../components/modal/modal.css';

@layer components {
	.kiro-account-dashboard-skeleton,
	.kiro-account-dashboard-section {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-kiro-md);
	}

	.kiro-account-dashboard-section {
		font-weight: var(--font-weight-kiro-normal);
		color: var(--color-kiro-text-secondary);
		font-size: var(--font-size-kiro-xs)
	}

	.kiro-account-dashboard-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.kiro-account-dashboard-label {
		font-size: var(--font-size-kiro-lg);
		font-weight: var(--font-weight-kiro-medium);
		color: var(--color-kiro-text-primary);
	}

	/* Generic Layout Components */
	.kiro-flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kiro-flex-col {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-kiro-xxs);
		flex: 1;
		margin-left: var(--spacing-kiro-md);
		margin-right: var(--spacing-kiro-md);
	}

	/* Generic Text Components */
	.kiro-text-secondary {
		font-size: var(--font-size-kiro-xs);
		font-weight: var(--font-weight-kiro-normal);
		color: var(--color-kiro-text-secondary);
	}

	/* User Info */
	.kiro-account-dashboard-user-info {
		display: flex;
		gap: var(--spacing-kiro-sm);
	}

	/* User ID Copy Component Styles */
	.kiro-user-id {
		display: flex;
	}

	.kiro-user-id-container {
		position: relative;
	}

	.kiro-user-id-text {
		cursor: pointer;
		text-decoration: underline;
	}

	.kiro-user-id-success-checkmark {
		color: #22c55e;
		margin-left: 4px;
	}

	.kiro-user-id-tooltip {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		background-color: #2d2d2d;
		color: white;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 12px;
		white-space: nowrap;
		z-index: 1000;
		margin-top: 4px;
	}

	.kiro-user-id-copy-button {
		cursor: pointer;
		padding: 4px;
		border: none;
		border-radius: 4px;
		background: transparent;
		transition: background-color 0.2s ease;
	}

	.kiro-user-id-copy-button:hover {
		background: rgba(255, 255, 255, 0.1);
	}

	.kiro-clipboard-textarea {
		position: fixed;
		left: -999999px;
		top: -999999px;
		opacity: 0;
	}

	/* Generic Card Components */
	.kiro-card {
		background-color: var(--vscode-editor-background);
		border: 1px solid var(--vscode-widget-border);
		border-radius: var(--border-radius-kiro-md);
		padding: var(--spacing-kiro-md);
	}

	.kiro-card-section {
		padding: var(--spacing-kiro-md);
		border-bottom: 1px solid var(--vscode-widget-border);

		&:last-child {
			border-bottom: none;
		}
	}

	/* Generic Flex Utilities */
	.kiro-flex {
		display: flex;
	}

	.kiro-items-center {
		align-items: center;
	}

	.kiro-justify-center {
		justify-content: center;
	}

	/* Generic Spacing Utilities */
	.kiro-gap-xs {
		gap: var(--spacing-kiro-xs);
	}
	.kiro-gap-sm {
		gap: var(--spacing-kiro-sm);
	}
	.kiro-gap-md {
		gap: var(--spacing-kiro-md);
	}
	.kiro-gap-lg {
		gap: var(--spacing-kiro-lg);
	}

	.kiro-p-xs {
		padding: var(--spacing-kiro-xs);
	}
	.kiro-p-sm {
		padding: var(--spacing-kiro-sm);
	}
	.kiro-p-md {
		padding: var(--spacing-kiro-md);
	}
	.kiro-p-lg {
		padding: var(--spacing-kiro-lg);
	}

	.kiro-m-xs {
		margin: var(--spacing-kiro-xs);
	}
	.kiro-m-sm {
		margin: var(--spacing-kiro-sm);
	}
	.kiro-m-md {
		margin: var(--spacing-kiro-md);
	}
	.kiro-m-lg {
		margin: var(--spacing-kiro-lg);
	}

	/* Usage Summary */
	.kiro-usage-summary-no-data {
		display: flex;
		justify-content: center;
		padding-block: var(--spacing-kiro-md);
		color: var(--vscode-foreground);
	}

	.kiro-usage-summary-estimated-usage {
		display: flex;
		align-items: baseline;
		gap: var(--spacing-kiro-xs);
	}

	.kiro-subscription-badge {
		padding: var(--spacing-kiro-xxs) var(--spacing-kiro-sm);
		font-size: var(--font-size-kiro-sm);
		font-weight: var(--font-weight-kiro-bold);
		border-radius: var(--border-radius-kiro-xs);
	}

	.kiro-subscription-badge--basic {
		background-color: var(--color-kiro-free-subscription);
		color: var(--vscode-editor-background);
	}

	.kiro-subscription-badge--premium {
		background-color: var(--color-kiro-purple-primary);
		color: white;
	}

	/* Welcome Bonus */
	.kiro-welcome-bonus-container {
		border-radius: var(--border-radius-kiro-md);
		padding: var(--spacing-kiro-sm);
		background: var(--color-kiro-purple-background);
	}

	.kiro-welcome-bonus-table-wrapper {
		overflow: hidden;
	}

	.kiro-welcome-bonus-table {
		width: 100%;
		table-layout: fixed;
	}

	.kiro-welcome-bonus-table th {
		font-weight: var(--font-weight-kiro-bold);
		font-size: var(--font-size-kiro-sm);
		color: var(--vscode-foreground);
	}

	.kiro-welcome-bonus-table td {
		padding-top: var(--spacing-kiro-sm);
		color: var(--vscode-foreground);
		font-weight: var(--font-weight-kiro-normal);
		font-size: var(--font-size-kiro-xs);
	}

	.kiro-welcome-bonus-icon-cell {
		width: 24px;
		text-align: right;
		padding-top: var(--spacing-kiro-xs);
		padding-right: var(--spacing-kiro-sm);
	}

	.kiro-welcome-bonus-icon {
		color: var(--color-kiro-purple-primary);
		font-size: 16px;
	}

	.kiro-welcome-bonus-type-cell {
		text-align: left;
		padding-left: var(--spacing-kiro-xs);
		padding-right: var(--spacing-kiro-xs);
		word-break: break-word;
		overflow-wrap: anywhere;
	}
	.kiro-welcome-bonus-table th:not(.kiro-welcome-bonus-icon-cell) {
		border-bottom: 1px solid var(--vscode-widget-border);
	}

	.kiro-welcome-bonus-expiry-cell {
		white-space: nowrap;
		padding-left: var(--spacing-kiro-sm);
		padding-right: var(--spacing-kiro-sm);
		text-align: right;
	}

	.kiro-welcome-bonus-usage-cell {
		padding-left: var(--spacing-kiro-sm);
		padding-right: var(--spacing-kiro-sm);
		text-align: right;
	}

	.kiro-welcome-bonus-empty-cell {
		padding-top: var(--spacing-kiro-sm);
		padding-left: var(--spacing-kiro-sm);
		padding-right: var(--spacing-kiro-sm);
	}

	/* Usage Breakdown */
	.kiro-usage-breakdown {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-kiro-sm);
		font-weight: var(--font-weight-kiro-normal);
	}

	.kiro-usage-breakdown--disabled .kiro-account-dashboard-label {
		color: var(--color-kiro-text-muted);
	}

	.kiro-usage-breakdown-stats {
		color: var(--color-kiro-text-secondary)
	}

	.kiro-usage-breakdown--disabled .kiro-usage-breakdown-stats {
		color: var(--color-kiro-text-muted);
	}

	.kiro-progress-bar-container {
		height: 8px;
		border-radius: 4px;
		background-color: var(--vscode-widget-border);
	}

	.kiro-progress-bar {
		height: 8px;
		border-radius: 4px;
		transition: var(--kiro-transition);
	}

	.kiro-usage-breakdown--disabled .kiro-progress-bar {
		background: repeating-linear-gradient(
			90deg,
			var(--vscode-disabledForeground) 0px,
			var(--vscode-disabledForeground) 4px,
			var(--vscode-widget-border) 4px,
			var(--vscode-widget-border) 8px
		);
	}

	/* Extra Credits (prepaid packages) */
	.kiro-extra-credits {
		/* Tighter gap between the "Extra credits" header and the list than the
		   default section spacing. */
		gap: var(--spacing-kiro-sm);
	}

	.kiro-extra-credits-overflow {
		font-size: var(--font-size-kiro-xs);
		color: var(--color-kiro-text-secondary);
	}

	.kiro-extra-credits-overflow-link {
		color: var(--vscode-textLink-foreground);
		cursor: pointer;
		text-decoration: underline;
	}

	.kiro-extra-credits-overflow-link:hover {
		color: var(--vscode-textLink-activeForeground);
	}

	.kiro-extra-credits-list {
		display: flex;
		flex-direction: column;
	}

	/* Each package and the buy link are rows separated by divider lines. */
	.kiro-extra-credit-item,
	.kiro-extra-credits-buy {
		padding-block: var(--spacing-kiro-sm);
		border-bottom: 1px solid var(--vscode-widget-border);
	}

	.kiro-extra-credit-item-usage {
		color: var(--color-kiro-text-primary);
	}

	.kiro-extra-credit-item-remaining {
		color: var(--color-kiro-text-primary);
	}

	.kiro-extra-credits-buy {
		justify-content: flex-start;
		border-bottom: none;
	}

	/* Accented call-to-action, matching the design. Uses the editor's link
	   color (not the button fill) so it tracks the theme's link hue. */
	.kiro-extra-credits-buy > a {
		color: var(--vscode-textLink-foreground);
		font-weight: var(--font-weight-kiro-bold);
	}

	.kiro-extra-credits-buy > a:hover {
		color: var(--vscode-textLink-activeForeground);
	}

	/* Overage Settings */
	.kiro-overage-label,
	.kiro-overage-description {
		display: flex;
		flex-direction: column;
	}

	.kiro-overage-status {
		display: flex;
		align-items: center;
		gap: var(--spacing-kiro-sm);
	}

	/* Overages Toggle */
	.kiro-overage-toggle {
		cursor: pointer;
	}

	.kiro-overage-toggle--disabled {
		cursor: not-allowed;
	}

	.kiro-overage-toggle-input {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.kiro-overage-toggle-track {
		position: relative;
		width: 44px;
		height: 24px;
		border-radius: 12px;
		transition: var(--kiro-transition);
	}

	.kiro-overage-toggle-track--on {
		background-color: var(--vscode-toggleSwitch-onBackground);
	}

	.kiro-overage-toggle-track--off {
		background-color: var(--vscode-toggleSwitch-offBackground);
	}

	.kiro-overage-toggle-thumb {
		position: absolute;
		top: 2px;
		left: 2px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		transition: var(--kiro-transition);
	}

	.kiro-overage-toggle-thumb--on {
		transform: translateX(20px);
		background-color: var(--vscode-toggleSwitch-onForeground);
	}

	.kiro-overage-toggle-thumb--off {
		transform: translateX(0px);
		background-color: var(--vscode-toggleSwitch-offForeground);
	}

	.kiro-overage-toggle--disabled .kiro-overage-toggle-track--on,
	.kiro-overage-toggle--disabled .kiro-overage-toggle-track--off {
		background-color: var(--vscode-toggleSwitch-disabledBackground);
	}

	.kiro-overage-toggle--disabled .kiro-overage-toggle-thumb--on,
	.kiro-overage-toggle--disabled .kiro-overage-toggle-thumb--off {
		background-color: var(--vscode-toggleSwitch-disabledForeground);
	}

	.kiro-overage-enterprise-contact {
		display: flex;
		align-items: center;
		gap: var(--spacing-kiro-xs);
	}

	.kiro-overage-table-wrapper {
		border-radius: var(--border-radius-kiro-md);
		overflow: hidden;
	}

	.kiro-overage-table {
		width: 100%;
		font-size: var(--font-size-kiro-sm);
	}

	.kiro-overage-table-header {
		background-color: var(--vscode-list-hoverBackground);
		border-bottom: 1px solid var(--vscode-widget-border);
	}

	.kiro-overage-table th {
		padding: var(--spacing-kiro-sm) var(--spacing-kiro-sm);
		font-weight: var(--font-weight-kiro-medium);
		color: var(--vscode-foreground);
	}

	.kiro-overage-table-header-left {
		text-align: left;
	}

	.kiro-overage-table-header-right {
		text-align: right;
	}

	.kiro-overage-table-row--total {
		background-color: var(--vscode-list-hoverBackground);
		border-top: 1px solid var(--vscode-widget-border);
	}

	.kiro-overage-table-row--single-resource:not(:nth-of-type(1)) {
		border-top: 1px solid var(--vscode-widget-border);
	}

	.kiro-overage-table td {
		padding: var(--spacing-kiro-xs) var(--spacing-kiro-xs);
		color: var(--vscode-foreground);
		font-weight: var(--font-weight-kiro-normal);
	}

	.kiro-overage-table-cell-left {
		text-align: left;
	}

	.kiro-overage-table-cell-right {
		text-align: right;
	}

	.kiro-overage-table-cell--total {
		font-weight: var(--font-weight-kiro-medium);
	}

	/* Plan Actions Components */
	.kiro-support-link {
		color: var(--color-kiro-text-muted);
		text-decoration: underline;
		font-size: var(--font-size-kiro-sm);
		transition: var(--kiro-transition);
		cursor: pointer;
		text-align: center;
	}

	.kiro-support-link:hover {
		color: var(--color-kiro-text-primary);
	}

	/* Profile Link */
	.kiro-account-dashboard-profile-link.kiro-modal-link > a {
		text-decoration: none;
		& > span {
			text-decoration: underline;
		}
	}

	/* Sign In Prompt */
	.kiro-account-dashboard-sign-in {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--spacing-kiro-lg);
		font-weight: var(--font-weight-kiro-normal);
		color: var(--color-kiro-text-secondary);

		h1 {
			font-size: var(--font-size-kiro-xxl);
			font-weight: var(--font-weight-kiro-medium);
			color: var(--color-kiro-text-primary);
		}

		p {
			padding-inline: calc(var(--spacing-kiro-xl) * 2);
			text-align: center;
		}
	}
}
