/* Reset default css*/
* {
	padding: 0;
	margin: 0;
}

/* arrows that show where a column will be moved. Looks ugly. We don't want this. */
.col-move-bottom, .col-move-top {
	background-image: none !important;
}

/* column headers */
.x-grid3-header {
	background: $background-color-main;
	border-bottom: 1px solid $grey;
	padding: 0;
}

#mail-grid .x-grid3-header {
	padding-left: $padding-small;
}

td.x-grid3-hd-over .x-grid3-hd-inner,
td.sort-desc .x-grid3-hd-inner,
td.sort-asc .x-grid3-hd-inner,
td.x-grid3-hd-menu-open .x-grid3-hd-inner {
	background: $background-color-main;
}

.x-grid3-hd-row {
	td {
		padding: ($grid-header-height - $button-small-height)/2 0;
		border-color: $background-color-main;
		position: relative;

		.x-grid3-hd-inner {
			line-height: $font-default-line-height;
			display: inline-block;
			border: 1px solid $background-color-main;
			border-radius: 2px;
			padding: ($button-small-height - $font-default-line-height - 2px)/2 $padding-medium; /* substract 2px for the borders */
			font-weight: bold;
			overflow: visible; /* needed for the .x-grid3-hd-btn to be visible when we place it outside of the button */
			background: $background-color-main;
			max-width: 100%;
			box-sizing: border-box;

			.zarafa-x-grid3-hd-title {
				overflow: hidden;
				text-overflow: ellipsis;

				.x-grid3-hd-checker {
					width: 15px;
				}
			}

			.x-grid3-hd-btn {
				border: 1px solid $grey;
				border-radius: 2px;
				background-color: $background-color-main;
				width: 16px;
				height: $button-small-height - 2px !important; /* overwriting the inline styled height that extjs gives this element */
				right: -20px;
				top: -1px; /* needed because the parent has a border */
			}
		}
	}
	td:hover .x-grid3-hd-inner,
	td:hover .x-grid3-hd-inner .x-grid3-hd-btn{
		border-color: $grey2;
	}
	td:not(.k-unsortable):active .x-grid3-hd-inner,
	td:not(.k-unsortable):active .x-grid3-hd-inner .x-grid3-hd-btn{
		background-color: $grey3;
	}

	td.sort-desc .x-grid3-hd-inner,
	td.sort-asc .x-grid3-hd-inner {
		padding-right: 9px + 2*$padding-medium; /* some extra padding to place the sort icon */
	}

	td.sort-desc .x-grid3-sort-icon,
	td.sort-asc .x-grid3-sort-icon{
		width: 9px;
		height: 5px;
		position: absolute;
		right: $padding-medium;
		top: (($button-small-height - 5px)/2 - 1px);
	}

	td.sort-desc .x-grid3-hd-inner,
	td.sort-asc .x-grid3-hd-inner,
	td.sort-desc .x-grid3-hd-inner .x-grid3-hd-btn,
	td.sort-asc .x-grid3-hd-inner .x-grid3-hd-btn {
		border-color: $grey;
		background-color: $grey3;
	}
	td.sort-desc:not(.k-unsortable):active .x-grid3-hd-inner,
	td.sort-asc:not(.k-unsortable):active .x-grid3-hd-inner,
	td.sort-desc:not(.k-unsortable):active .x-grid3-hd-inner .x-grid3-hd-btn,
	td.sort-asc:not(.k-unsortable):active .x-grid3-hd-inner .x-grid3-hd-btn {
		background-color: $grey4;
	}

	/* Icon only columns */
	td.zarafa-icon-column {
		.x-grid3-hd-inner {
			height: 24px;
			width: 22px;
			padding: 0;
			text-align: center;

			.zarafa-x-grid3-hd-title {
				text-overflow: clip;

				/* reposition the icon headers */
				p {
					position: relative;
					display: inline-block;
					min-width: 20px;

					.title {
						display: none;
					}
				}
			}
		}
	}

	td.zarafa-icon-column.sort-asc,
	td.zarafa-icon-column.sort-desc {
		p {
			display: none;
		}

		.x-grid3-sort-icon {
			margin: 0;
		}
	}
}

/****************************************************************************
* Icons in the 'Show columns' menu
****************************************************************************/
.x-menu{
	.x-menu-check-item {
		/* check/uncheck images are 14 px wide */
		padding-left: $padding-small + 14px + $padding-medium;

		.x-menu-item-text {
			p {
				padding-left: 20px;
				background-position: 2px center !important;
			}
		}
	}
}

/******************************************************************************
 * Empty text
 ******************************************************************************/
.k-addressbookmainpanel-grid .emptytext {
	font-size: $font-size-large !important;
	color: $grey6;
	margin-top: 150px;
}

/******************************************************************************
 * Group headers
 ******************************************************************************/
.x-grid-group-hd {
	border: none;
	background: $grey;
	padding: $padding-small $padding-small;

	div.x-grid-group-title {
		color: $font-color-dark;
		background-image : none;
		font-weight: normal;
	}
}

/******************************************************************************
 * Grid columns
 ******************************************************************************/
.x-grid3-row.zarafa-calendar-grid-row {
	border-left: 1px solid;
}

.x-grid3-row {
	border-top: none;
	border-left: none;
	border-color: $grey;
	background-clip: content-box !important;

	.x-grid3-cell {
		&:first-child .x-grid3-cell-inner{
			min-width: 25px;
			padding-left: 5px;
		}

		.x-grid3-cell-inner {
			line-height: 100%;
			padding: $padding-large ($padding-medium + 1px);
			position: relative;
		}

		&.x-grid3-td-column_icon.k-conversation_header {
			cursor: pointer;
		}
	}
	
	&.k-depth-1.line_circle_l {
		background-position: 11px -23px !important;
	}

	&.line_circle_end.k-last-conversation-item.k-depth-1 {
		background-position: 11px -34px !important;
		background-origin: content-box;
	}

	// Styling for right preview mode.
	.zarafa-grid-body-container {
		.k-conversation-icon-container {
			position: absolute;
			padding-top: $padding-small;
	
			// Span for conversation arrow icon
			.k-conversation-icon{
				display: block;
				padding: 0 1.5px;
				width: 23px;
				height: 15px;
				cursor: pointer;
			}
		}
	}
	
	&.k-conversation-header.k-depth-0 {
		&.arrow_right_l {
			background-position: 14px 34px !important;
		}
		&.line_arrow_down_l {
			background-position: 11px 34px !important;	
		}
	}
	
	// Styling for bottom preview and no preview mode.
	&.k-conversation-header.k-depth-0:not(.k-compact-row) { 
		&.arrow_right_l, &.line_arrow_down_l {
			background-position-y: 19px !important;
		}
	}

	// Only lower the padding of counter cell for bottom preview and no preview mode.
	.x-grid3-td-column_icon.k-conversation_header {
		.x-grid3-cell-inner {
			padding-top: $padding-small;
		}
	}

	.k-conversation-count {
		color: $kopano-blue;
		font-weight: bold;
		padding-left : 2px;

		&.k-two-digit-counter {
			position: relative;
    		left: -4px;
		}
	}

	&.k-depth-1 {
		.x-grid3-cell-inner {
			padding: $padding-small ($padding-medium + 1px);
			line-height: 20px;
		}

		.k-icon {
			float: left;
			width: 20px;
			height: 20px;
			padding-right: $padding-medium;
			background-position-x: left !important;
		}

		.x-grid3-row-body {
			padding-left: 26px;
		}
	}

	/*
	 * exception for the categories column which has labels that will be truncated when too long
	 * so truncating the cell itself will cause strange behaviour.
	 */
	.x-grid3-cell-inner.x-grid3-col-categories	{
		text-overflow: clip;
	}

	.k-from-other-folder.mail-received {
		font-style: italic;
	}

	.x-grid3-row-body-tr {
		.zarafa-grid-body-container {
			overflow: hidden;
			word-wrap: break-word;

			.grid_compact {
				line-height: $font-line-height-mail-grid-compact;
				min-height: $font-line-height-mail-grid-compact; /* we need this for when there is no title set */
				max-height: $font-line-height-mail-grid-compact; /* added 1px because letters get cut off at the bottom otherwise */
				padding-bottom: 0px;
				padding-top: $padding-small + 1px;
				
				// Styling for displaying elipsis for message body as subject
				white-space: nowrap;
  				overflow: hidden;
  				text-overflow: ellipsis;
			}

			.grid_compact_left {
				padding-left: 30px;
			}

			.grid_compact_subject_cell {
				color : $grid-subject-color;
				max-height: 2 * $font-line-height-mail-grid-compact;
				overflow: hidden;
			}
		}
	}

	/* reposition checkboxes (size of checkbox is 15x15) */
	.x-grid3-check-col-td,
	.x-grid3-td-checker {
		background: transparent;

		.x-grid3-cell-inner {
			padding-top: ($font-default-size + 2*$padding-large - 15) / 2 !important; /* important is needed because Ext also added it */
		}
	}
}

.x-grid3-row.x-grid3-row-expanded {
	.x-grid3-cell-inner {
		padding-bottom: $padding-large - 4px;
	}

	.x-grid3-row-body {
		padding-bottom: $padding-large;
	}
}
.x-grid3-row.x-grid3-row-expanded.with-categories {
	.x-grid3-row-body {
		padding-bottom: $padding-large - $padding-small;
	}
}

.x-grid3-row-over {
	background: $grid-hover-color;
	border-color: $grey; /* Ext wants to make the hovered border darker, we don't */
}
.x-grid3-row-selected {
	background: $grid-active-color !important; /* Ext uses important, so we also must do that */
}

/* Flags */
.x-grid3-row:not(.x-grid3-row-over) .x-grid3-col.icon_flag,
.x-grid3-row.k-conversation-header .x-grid3-col.icon_flag {
		background-image: none !important;
}

/* Mail grid */
#mail-grid,
#calendar_grid,
#contact-gridview,
#task-grid,
#note-gridview,
#unread-mail-widget {
	.x-grid3-row {
		border-left-color: transparent;
	}

	.mail_unread {
		div {
			font-weight: bold;
			overflow: hidden;
		}
	}
}

/* Override ExtJS selected grid */
.x-grid3-body .x-grid3-row-selected .x-grid3-col.x-grid3-td-checker {
	background-image: none;
}

/* Task grid Due tasks row */
.zarafa-task-overdue {
	color: $red1;
}

/* Task grid Completed tasks row */
.zarafa-task-complete {
	color: $grey6;
	.k-task-complete {
		text-decoration: line-through;
	}
}

/******************************************************************************
 * Grid with no column headers
 ******************************************************************************/
.x-grid-panel.k-no-column-headers {
	.x-grid3-header {
		display: none;
	}
}

.x-grid3 .zarafa-grid-button-container {
	position: absolute;
	right: 0;
	top: 0;
	padding: ($font-default-size + 2 * $padding-large - $button-small-height)/2  0 ($font-default-size + 2 * $padding-large - $button-small-height)/2 $padding-small;
	background-color: $background-color-main;
}
.x-grid3 .x-grid3-row-over .zarafa-grid-button-container {
	background-color: $grid-hover-color;
}
.x-grid3 .x-grid3-row-selected .zarafa-grid-button-container {
	background-color: $grid-active-color;
}
.x-grid3 .zarafa-grid-button {
	width: $button-small-height;
	height: $button-small-height;
	float: left;
	margin-left: $padding-small;
	cursor: pointer;
	display: none;
}
.x-grid3 .x-grid3-row-over .zarafa-grid-button {
	display: block;
}
/* Fixed categories cannot be edited or deleted because they are used
   to map old flags to categories */
.x-grid3-row-over .k-category-fixed .k-grid-button-edit,
.x-grid3-row-over .k-category-fixed .k-grid-button-delete {
	display: none;
}
/* Additional categories cannot be edited or deleted because they are
   defined by the admin */
.x-grid3-row-over .k-category-additional .k-grid-button-edit,
.x-grid3-row-over .k-category-additional .k-grid-button-delete {
	display: none;
}

.x-grid3 .zarafa-pinned .k-grid-button-pin {
	display: block;
}
.k-categories-grid .x-grid-editor {
	padding-top: 1px;
}

.k-categories-grid .x-grid3-col-color {
	position: relative;
}

.k-categories-grid .k-colorpicker-ct {
	display: none;
	margin: -2px 0 -2px 0;
}
.k-categories-grid .x-grid3-row-over .x-grid3-col-color,
.k-categories-grid .x-grid3-col-color.k-menu-visible {
	svg {
		display: none;
	}

	.k-colorpicker-ct {
		display: block;
	}
}

.k-slider
{
	position : absolute;
	z-index : 9001;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);
	padding-left: $padding-extra-large;
	padding-right: $padding-extra-large;
	background-color: #FFFFFF;
	height: 30px;
	line-height: 2.5;
}

/* Read items */
.x-grid3-row.x-grid3-row-expanded.mail_read > table, .x-grid3-row.x-grid3-row-collapsed.mail_read > table {
	border-left: 4px solid $white !important;
}

/* x-grid-3 should have a little more padding */
.x-grid3-row {
	padding-right: $padding-small;
}

/* hover read item */
.x-grid3-row.x-grid3-row-expanded.mail_read.x-grid3-row-over > table, .x-grid3-row.x-grid3-row-collapsed.mail_read.x-grid3-row-over > table {
	border-left: 4px solid $grid-hover-color !important;
}

/* Hover selected item */
.x-grid3-row.x-grid3-row-expanded.mail_read.x-grid3-row-selected.x-grid3-row-over > table, .x-grid3-row.x-grid3-row-collapsed.mail_read.x-grid3-row-selected > table {
	border-left: 4px solid $grid-active-color !important;
}

.x-grid3-row.x-grid3-row-expanded.mail_read.x-grid3-row-selected > table {
	border-left: 4px solid $grid-active-color !important;
}

/* Unread items */
.x-grid3-row.x-grid3-row-collapsed.mail_unread > table, .x-grid3-row.x-grid3-row-expanded.mail_unread > table {
	border-left: 4px solid transparent !important;
}

/* Unread borders */
.k-unreadborders {

	/* Unread items */
	.x-grid3-row.x-grid3-row-collapsed.mail_unread > table, .x-grid3-row.x-grid3-row-expanded.mail_unread > table {
		border-left: 4px solid $kopano-blue !important;
	}
}

.k-grid-info {
	display: none;
	line-height: $font-default-size + $padding-small;
	text-align: center;
	color: $grid-info-font-color;
    background-color: $grid-info-bg-color;
	padding: $padding-large;
	margin: 0px 1px 3px -1px;
}
.k-grid-info.k-show {
	display: block;
}

.k-developer-insertion-point {
	color: $dark-grey2;
	border: solid 1px;
	background: $white;
	font-size: $font-size-small;
	padding: 2px 4px;
	margin: 0px 4px;
	width: auto;
}
