/* =============================================================================

	STYLE.CSS  —  modernized admin skin (rewritten 2026, no library)

	The original 2009 colour theme has been replaced with a flat, modern look.
	Page LAYOUT/structure is still provided by main.css + 2col.css; this file is
	the "skin" and additionally flattens the legacy GIF-sprite backgrounds that
	main.css applies to the tray, menu, buttons, headers and login box.

	Functional helper classes live in mystyle.css / mycss.css and are untouched.

============================================================================= */

/* =============================================================================
DESIGN TOKENS
============================================================================= */
:root{
	--bg:#f3f4f6;
	--surface:#ffffff;
	--surface-2:#f8fafc;
	--surface-3:#f1f5f9;
	--text:#1f2933;
	--muted:#6b7280;
	--border:#e5e9f0;
	--border-strong:#cbd5e1;

	--primary:#2563eb;
	--primary-600:#1d4ed8;
	--primary-50:#eff6ff;
	--primary-100:#dbeafe;

	--danger:#dc2626;
	--danger-50:#fef2f2;
	--success:#16a34a;
	--success-50:#f0fdf4;
	--warning:#d97706;
	--warning-50:#fffbeb;
	--info:#0891b2;
	--info-50:#ecfeff;

	--dark:#111827;
	--dark-2:#1f2937;

	--radius:10px;
	--radius-sm:7px;
	--shadow-sm:0 1px 2px rgba(16,24,40,.06);
	--shadow:0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
	--shadow-lg:0 12px 28px -14px rgba(16,24,40,.45);
}

/* =============================================================================
BASE / TYPOGRAPHY
============================================================================= */
body{
	background-color:var(--bg);
	color:var(--text);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
a{color:var(--primary);}
a:hover,a:active,a:focus{color:var(--primary-600);}

/* slim, slick divider (fades at the edges) */
hr{
	border:0;
	height:1px;
	margin:0;
	background:linear-gradient(to right, transparent, var(--border-strong), transparent);
}

#content h2{color:var(--text);}
#content dl dt{color:var(--text);}
#content acronym, #content abbr, #content .help{border-bottom:1px dotted var(--border-strong);}
#content label.verror{color:var(--danger);}

/* =============================================================================
HTML - without styles
============================================================================= */
table.nostyle th, dl.nostyle dt{color:var(--text) !important;}

/* =============================================================================
TOP TRAY (dark bar)
============================================================================= */
#tray{
	background-color:var(--dark) !important; background-image:none !important;
	color:#cbd5e1;
	box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}
#tray a, #tray strong{color:#fff;}
#tray a:hover, #tray a:active, #tray a:focus{color:var(--primary-100);}
#tray #logout{text-transform:uppercase; letter-spacing:.04em;}

/* =============================================================================
MAIN NAV MENU  (flatten sprite tabs -> modern pill tabs)
============================================================================= */
#menu{
	background-color:var(--surface) !important; background-image:none !important;
	border-bottom:1px solid var(--border);
	box-shadow:var(--shadow-sm);
}
#menu ul li a{
	background:transparent !important; background-image:none !important;
	color:var(--text);
	border-radius:var(--radius-sm);
	margin-right:4px;
	transition:background-color .15s ease, color .15s ease;
}
#menu ul li a span{
	background:transparent !important; background-image:none !important;
	padding:8px 14px;
	border-radius:var(--radius-sm);
}
#menu ul li a:hover, #menu ul li a:active, #menu ul li a:focus{
	background:var(--primary-50) !important; color:var(--primary-600);
}
#menu ul li a:hover span,
#menu ul li#menu-active > a span,
#menu ul li#menu-active > div > a span{background:transparent !important;}
/* only the active item's OWN link is highlighted (not its dropdown children).
   dropdown parent's <a> is wrapped in a <div>, hence the two selectors. */
#menu ul li#menu-active > a,
#menu ul li#menu-active > div > a{
	background:var(--primary) !important; color:#fff; font-weight:600;
}
#menu ul li#menu-active > a span,
#menu ul li#menu-active > div > a span{color:#fff;}
#menu ul.f-right a{color:var(--danger);}
#menu ul.f-right a:hover{background:var(--danger-50) !important; color:var(--danger);}

/* dropdowns -> floating card */
#menu ul li.dropdown-on div.drop ul{
	border:1px solid var(--border);
	background:var(--surface);
	border-radius:var(--radius-sm);
	box-shadow:var(--shadow-lg);
	overflow:hidden;
	padding:4px;
}
#menu ul li.dropdown-on div.drop ul li a,
#menu ul li#menu-active.dropdown-on div.drop ul li a{
	border-bottom:0; background:transparent; color:var(--text);
	border-radius:6px;
}
/* active dropdown child = the current page within an open dropdown */
#menu ul li.dropdown-on div.drop ul li a.active,
#menu ul li#menu-active.dropdown-on div.drop ul li a.active{
	background:var(--primary-50); color:var(--primary-600); font-weight:600;
}
#menu ul li.dropdown-on div.drop ul li a:hover,
#menu ul li.dropdown-on div.drop ul li a:active,
#menu ul li.dropdown-on div.drop ul li a:focus{
	background:var(--primary-50) !important; color:var(--primary-600) !important;
}

/* =============================================================================
COLUMNS / CONTENT CARD
============================================================================= */
#cols{background-image:none !important;}
#content{
	border:1px solid var(--border);
	background:var(--surface);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
}
#content h1{
	background:var(--dark) !important; background-image:none !important;
	color:#fff; letter-spacing:0; font-weight:600;
	border-radius:var(--radius-sm);
}

#footer{color:var(--muted);}
#footer a{color:var(--muted);}
#footer a:hover, #footer a:active, #footer a:focus{color:var(--text);}

/* =============================================================================
TABLES
============================================================================= */
#content table{border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;}
#content table th{
	border-right:1px solid var(--border);
	background-color:var(--surface-3); color:#334155; font-weight:600;
	border-bottom:1px solid var(--border-strong);
}
#content table td{border:1px solid var(--border);}
#content table tr.bg td, #content table tr.odd td{background-color:var(--surface-2);}
#content table tr:hover td{background-color:var(--primary-50);}
#content table.tablesorter th.headerSortUp,
#content table.tablesorter th.headerSortDown{background-color:var(--primary-100); color:var(--primary-600);}

/* =============================================================================
FORMS / FIELDSETS / INPUTS / BUTTONS
============================================================================= */
#content fieldset{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);}
#content legend{
	background:var(--surface); color:var(--text); font-weight:600;
	padding:0 8px;
}

.input-text, .input-text-02,
#content input[type=text], #content input[type=password],
#content input[type=email], #content input[type=number],
#content textarea, #content select,
#aside select, #aside input[type=text]{
	padding:8px 10px;
	border:1px solid var(--border-strong);
	border-radius:var(--radius-sm);
	background:var(--surface);
	color:var(--text);
	transition:border-color .15s ease, box-shadow .15s ease;
}
.input-text:focus, .input-text-02:focus,
#content input:focus, #content textarea:focus, #content select:focus,
#aside select:focus, #aside input:focus{
	outline:0;
	border-color:var(--primary);
	box-shadow:0 0 0 3px var(--primary-100);
}

/* primary action buttons — base style for ALL native buttons (so bare
   <button> / <input type=button|submit|reset> without a class still look right) */
.input-submit, .input-submit-02,
button, input[type=button], input[type=submit], input[type=reset]{
	display:inline-block; text-align:center;
	box-sizing:border-box; vertical-align:middle;
	padding:11px 16px 7px;
	border:1px solid transparent; border-radius:var(--radius-sm);
	background:var(--primary); color:#fff; font-weight:600;
	font-family:inherit; font-size:inherit; line-height:normal;
	cursor:pointer;
	transition:background-color .15s ease;
}
.input-submit-02{padding:11px 12px 7px;} /* same height, just narrower */
.input-submit:hover, .input-submit-02:hover,
button:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover{background:var(--primary-600);}
button:disabled, input[type=button]:disabled, input[type=submit]:disabled, input[type=reset]:disabled{opacity:.6; cursor:not-allowed;}

/* validation states */
#content input.err, #content select.err, #content textarea.err{
	border:1px solid var(--danger); background:var(--danger-50); color:var(--text);
}
#content .err{color:var(--danger);}

/* =============================================================================
PAGE: LOGIN
============================================================================= */
#main-02{background-color:var(--surface);}

/* =============================================================================
PAGE: INDEX (dashboard shortcut boxes)
============================================================================= */
/* Linkuri utile cards: flat modern, 3 per row, with an icon badge (no image deps) */
#content .btn-box{float:left; width:33.33%; box-sizing:border-box; margin:0 0 10px 0; padding-right:10px;}
#content .btn-box .btn{
	position:relative;
	width:auto; box-sizing:border-box; min-height:64px;
	padding:12px 14px 12px 62px;
	background-color:var(--surface-2); background-image:none !important;
	border:1px solid var(--border); border-radius:var(--radius-sm);
}
/* icon badge (inline SVG data-URI: arrow-up-right = "open this section") */
#content .btn-box .btn::before{
	content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%);
	width:38px; height:38px; border-radius:9px;
	background:var(--primary-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
/* per-card icons (override just the icon image; badge bg/size stay from base) */
#content .btn-box.card-accounts .btn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");}
#content .btn-box.card-units .btn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01'/%3E%3Cpath d='M16 6h.01'/%3E%3Cpath d='M12 6h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3C/svg%3E");}
#content .btn-box.card-admins .btn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");}
#content .btn-box .btn-top, #content .btn-box .btn-bottom{display:none !important;}
#content .btn-box .btn dt{color:var(--text);}
#content .btn-box .btn dt a{color:var(--primary);}
#content .btn-box .btn dt a:hover, .btn-box .btn dt a:active, .btn-box .btn dt a:focus{color:var(--primary-600);}
#content .btn-box .btn dd a{color:var(--text);}
#content .btn-box .btn dd a:hover, #content .btn-box .btn dd a:active, #content .btn-box .btn dd a:focus{color:var(--primary-600);}

/* =============================================================================
ACTION BUTTONS (.btn / .btn-create / .btn-delete / .btn-info / .btn-list)
flatten sprite buttons -> modern solid buttons
============================================================================= */
#content a.btn, #content a.btn-create, #content a.btn-delete,
#content a.btn-info, #content a.btn-list{
	float:none !important; overflow:visible; /* main.css floats these left + height:37px -> misaligns with sibling buttons */
	background:var(--primary) !important; background-image:none !important;
	color:#fff !important; font-weight:600;
	box-sizing:border-box; vertical-align:middle;
	height:auto; padding:11px 16px 7px; border:1px solid transparent; border-radius:var(--radius-sm);
	display:inline-block; text-align:center; line-height:normal;
	transition:background-color .15s ease;
}
#content a.btn span, #content a.btn-create span, #content a.btn-delete span,
#content a.btn-info span, #content a.btn-list span{
	background:transparent !important; background-image:none !important;
	padding:0; color:#fff !important;
}
#content a.btn:hover, #content a.btn-create:hover,
#content a.btn-info:hover, #content a.btn-list:hover{background:var(--primary-600) !important;}
#content a.btn-delete{background:var(--danger) !important;}
#content a.btn-delete:hover{background:#b91c1c !important;}
/* secondary (neutral) button — Back / Cancel links */
#content a.btn-secondary{background:var(--surface-3) !important; color:var(--text) !important; border:1px solid var(--border-strong);}
#content a.btn-secondary:hover{background:var(--border) !important; color:var(--text) !important;}

/* sidebar "create" button */
#aside #btn-create a{
	background:var(--primary) !important; background-image:none !important;
	color:#fff !important; height:auto; border-radius:var(--radius-sm); font-weight:600;
}
#aside #btn-create a span{background:transparent !important; background-image:none !important; color:#fff !important;}
#aside #btn-create a:hover{background:var(--primary-600) !important;}

/* =============================================================================
PAGINATION / LABELS / TABS
============================================================================= */
#content .pagination{background-image:none !important; border-bottom:1px solid var(--border);}
#content .pagination.bottom{background-image:none !important; border-top:1px solid var(--border); border-bottom:0;}
#content .pagination .f-right a{border-radius:6px;}
#content .pagination .f-right a.pagination-active{background:var(--primary); color:#fff;}
#content .pagination .pagination-gap{display:inline-block; padding:2px 6px; color:var(--muted);}

#content .label{color:#fff; border-radius:999px; background-image:none !important; padding:3px 10px;}
#content .label-01{background-color:var(--danger);}
#content .label-02{background-color:var(--success);}
#content .label-03{background-color:var(--info);}
#content .label-04{background-color:var(--warning); color:#fff;}
#content .label-05{background-color:#475569;}

#content .tabs{border-bottom:1px solid var(--border);}
#content .tabs a{color:var(--text); background-image:none !important;}
#content .tabs a span{color:var(--text); background-image:none !important;}
#content .tabs .ui-tabs-selected a{color:var(--primary-600); font-weight:600;}
#content .tabs .ui-tabs-selected a span{color:var(--primary-600);}

#content .box-01{border:1px solid #fde68a; background:var(--warning-50); border-radius:var(--radius-sm);}
#content .box-01 a{color:var(--text);}
#content .box-01 a:hover, #content .box-01 a:active, #content .box-01 a:focus{color:var(--primary-600);}
#content .box-02{border:1px solid #fed7aa; background:#fff7ed; border-radius:var(--radius-sm);}

.high{color:var(--danger);}
.high-bg{background:#fef9c3;}
.low{color:var(--muted);}

/* =============================================================================
PAGE: GALLERY
============================================================================= */
#content .gallery{border:1px solid var(--primary-100); background:var(--primary-50); border-radius:var(--radius-sm);}
#content .gallery:hover, #content .gallery.hover{border:1px solid var(--border-strong); background:var(--surface-2);}

/* =============================================================================
PAGE: CALENDAR
============================================================================= */
#content #calendar td.day:hover, #content #calendar td.day.hover{border:1px solid var(--border-strong); background:var(--surface-2);}
#content #calendar td.today{border:3px solid var(--danger);}
#content #calendar td.note-01{background:#fef9c3;}
#content #calendar td.note-02{background:#dbeafe;}
#content #calendar td.note-03{background:#dcfce7;}
#content #calendar td.note-04{background:#ffedd5;}
#content #calendar td.note-05{background:var(--surface-2);}
#content #calendar td .day-num{background:var(--surface);}

#content #calendar-02 th{border:0; border-bottom:1px solid var(--border-strong);}
#content #calendar-02 td.day:hover, #content #calendar-02 td.day.hover{border:1px solid var(--border-strong); background:var(--surface-2);}
#content #calendar-02 td.today{border:3px solid var(--danger);}
#content #calendar-02 td.note-01{background:#fef9c3;}
#content #calendar-02 td.note-02{background:#dbeafe;}
#content #calendar-02 td.note-03{background:#dcfce7;}
#content #calendar-02 td.note-04{background:#ffedd5;}
#content #calendar-02 td.note-05{background:var(--surface-2);}
#content #calendar-02 td .day-actions{background:var(--surface);}

/* =============================================================================
ASIDE (left column / search / submenu)
============================================================================= */
#aside #logo img{border:1px solid var(--border); border-radius:var(--radius-sm);}
#aside #search fieldset{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);}
#aside #search fieldset a{color:var(--text);}
#aside #search fieldset a:hover, #aside #search fieldset a:active, #aside #search fieldset a:focus{color:var(--primary-600);}
/* quick-search: full-width fields + spacing (override main.css 130px input / button stuck to input) */
#aside #search fieldset .input-text,
#aside #search fieldset select{
	width:100% !important; box-sizing:border-box; display:block; margin:0;
}
#aside #search fieldset .input-submit-02{
	display:block; width:100%; box-sizing:border-box; margin-top:8px;
}
#aside #search fieldset label{ display:inline-block; margin:2px 8px 2px 0; }
#aside #search fieldset label input[type=radio]{ vertical-align:middle; margin-right:4px; }
#aside ul li a{border-bottom:1px solid var(--border); color:var(--text); border-radius:6px;}
#aside ul li a:hover, #aside ul li a:active, #aside ul li a:focus{background:var(--primary-50); color:var(--primary-600);}
#aside ul li#submenu-active a{background-color:var(--primary) !important; background-image:none !important; color:#fff;}
#aside ul ul li a, #aside ul li#submenu-active ul li a{border-bottom:1px solid var(--border); background-color:var(--surface-2); color:var(--text);}
#aside ul li ul li a{background-color:var(--surface-3);}
#aside ul ul li a:hover, #aside ul ul li a:active, #aside ul ul li a:focus,
#aside ul li#submenu-active ul li a:hover, #aside ul li#submenu-active ul li a:active, #aside ul li#submenu-active ul li a:focus{color:var(--primary-600);}

/* =============================================================================
MESSAGES (alerts)
============================================================================= */
.msg{border-radius:var(--radius-sm);}
.msg.warning{border:1px solid #fcd34d; border-left:4px solid var(--warning); background-color:var(--warning-50);}
.msg.warning a{color:var(--warning);} .msg.warning a:hover, .msg.warning a:active, .msg.warning a:focus{color:var(--text);}
.msg.info{border:1px solid #a5f3fc; border-left:4px solid var(--info); background-color:var(--info-50);}
.msg.done{border:1px solid #bbf7d0; border-left:4px solid var(--success); background-color:var(--success-50);}
.msg.error{border:1px solid #fecaca; border-left:4px solid var(--danger); background-color:var(--danger-50);}