/* Minification failed. Returning unminified contents. (8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (74,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (75,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (87,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-width' (89,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-900' (92,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (97,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-collapsed-width' (112,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (124,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (134,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (137,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (138,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (144,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (171,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (173,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (174,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (180,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (184,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-secondary' (185,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (196,21): run-time error CSS1030: Expected identifier, found '.' (196,33): run-time error CSS1031: Expected selector, found ')' (196,33): run-time error CSS1025: Expected comma or open brace, found ')' (202,21): run-time error CSS1030: Expected identifier, found '.' (202,33): run-time error CSS1031: Expected selector, found ')' (202,33): run-time error CSS1025: Expected comma or open brace, found ')' (207,28): run-time error CSS1030: Expected identifier, found '.' (207,40): run-time error CSS1031: Expected selector, found ')' (207,40): run-time error CSS1025: Expected comma or open brace, found ')' (212,28): run-time error CSS1030: Expected identifier, found '.' (212,40): run-time error CSS1031: Expected selector, found ')' (212,40): run-time error CSS1025: Expected comma or open brace, found ')' (217,21): run-time error CSS1030: Expected identifier, found '.' (217,33): run-time error CSS1031: Expected selector, found ')' (217,33): run-time error CSS1025: Expected comma or open brace, found ')' (221,21): run-time error CSS1030: Expected identifier, found '.' (221,33): run-time error CSS1031: Expected selector, found ')' (221,33): run-time error CSS1025: Expected comma or open brace, found ')' (234,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (237,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (244,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (249,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (276,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (278,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (279,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (289,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (352,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (356,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (360,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (390,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-secondary' (395,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (404,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (410,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (422,23): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-width' (424,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (428,23): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-collapsed-width' (435,18): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (436,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (437,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (443,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (457,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (465,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-900' (483,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (489,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (490,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (491,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (493,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (498,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (499,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (513,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (514,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (515,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (517,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (521,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (522,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-900' (531,22): run-time error CSS1039: Token not allowed after unary operator: '-danger' (532,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (570,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (571,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg' (572,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (582,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (588,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (595,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (604,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (611,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (615,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (629,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (630,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg' (635,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (636,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (641,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (647,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (652,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (656,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-secondary' (660,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-success' (664,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-warning' (668,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary' (674,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (683,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-900' (697,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (701,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (719,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (720,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg' (721,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (740,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (741,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (745,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (747,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (751,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (752,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (756,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (757,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (758,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (771,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (781,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (785,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (813,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (821,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (822,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (826,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (830,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (835,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (853,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (858,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (863,17): run-time error CSS1039: Token not allowed after unary operator: '-info' (868,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (883,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (888,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (893,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (900,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (911,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (928,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-secondary' (934,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-success' (947,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (954,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (961,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-secondary' (967,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-success' (980,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (981,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (982,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (984,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (991,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (992,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (996,22): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1011,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1012,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1013,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (1014,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (1016,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1021,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1022,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1026,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1027,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1028,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1037,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (1052,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (1054,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (1055,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1059,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (1063,33): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1068,33): run-time error CSS1039: Token not allowed after unary operator: '-warning' (1075,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1076,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (1080,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (1085,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1090,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (1096,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (1102,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (1108,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (1124,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1125,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg' (1126,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (1138,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (1147,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1148,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (1150,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (1151,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1152,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1158,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1179,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (1183,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1188,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-secondary' (1189,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1199,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (1200,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (1204,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1209,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (1210,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (1214,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1215,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1224,22): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1225,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1230,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1234,22): run-time error CSS1039: Token not allowed after unary operator: '-success' (1235,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1240,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1246,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (1284,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (1304,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (1331,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (1337,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1338,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (1340,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (1341,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1342,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1347,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1352,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (1353,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (1361,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1362,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (1372,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (1375,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (1376,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (1381,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (1413,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1419,24): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1424,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1431,24): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1436,24): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1441,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1461,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1462,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1463,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (1464,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (1478,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1483,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (1487,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1504,22): run-time error CSS1039: Token not allowed after unary operator: '-success' (1508,22): run-time error CSS1039: Token not allowed after unary operator: '-info' (1512,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (1521,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (1522,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg' (1553,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (1554,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (1556,24): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1569,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1570,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg' (1571,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (1573,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1580,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (1589,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (1596,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary' (1597,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (1601,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1619,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (1628,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (1648,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (1653,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (1658,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1671,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (1688,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (1696,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (1697,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (1709,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (1717,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (1756,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (1757,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (1772,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1778,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1784,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1801,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (1802,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (1853,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (1854,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (1866,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (1870,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1871,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1875,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1876,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1880,22): run-time error CSS1039: Token not allowed after unary operator: '-warning' (1881,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1885,22): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1886,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1890,22): run-time error CSS1039: Token not allowed after unary operator: '-info' (1891,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1895,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1896,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1901,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1906,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1910,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1911,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1916,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1940,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (1948,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1952,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (1956,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (1960,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1964,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (1988,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1989,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (1991,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1992,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1996,24): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (1997,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (2009,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2038,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2044,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2052,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2058,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2059,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (2060,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (2067,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2087,32): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2096,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (2097,29): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (2098,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (2099,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2121,17): run-time error CSS1039: Token not allowed after unary operator: '-info' (2126,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (2132,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (2137,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (2144,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2154,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (2160,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (2167,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2168,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg' (2169,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (2176,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2180,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (2187,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2192,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2198,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (2199,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2203,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (2207,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (2218,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (2223,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (2256,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (2262,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2263,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2264,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (2266,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (2270,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2271,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2285,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2296,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (2297,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (2299,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (2304,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2308,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (2312,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-secondary' (2313,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2323,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2328,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2340,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (2342,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (2343,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (2347,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2351,33): run-time error CSS1039: Token not allowed after unary operator: '-danger' (2362,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2363,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (2364,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2386,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (2392,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2403,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2435,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2455,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (2460,17): run-time error CSS1039: Token not allowed after unary operator: '-info' (2465,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (2470,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2476,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (2482,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2488,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (2513,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2514,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg' (2519,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl' (2550,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2562,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (2563,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (2569,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2573,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (2590,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2609,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2615,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (2624,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (2626,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (2631,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (2658,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2665,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-900' (2673,32): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2687,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (2694,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2712,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2713,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg' (2715,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (2728,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2734,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2740,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-900' (2750,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (2754,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (2764,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (2769,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (2774,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2962,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2977,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2982,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (2987,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (3005,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (3017,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (3018,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (3032,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (3039,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (3050,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (3051,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3077,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3106,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (3107,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (3118,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (3122,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (3126,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (3170,32): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (3183,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (3220,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (3222,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl' (3227,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary' (3230,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3264,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (3270,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (3277,30): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (3285,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (3298,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (3305,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (3315,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-secondary' (3316,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3367,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (3369,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (3370,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (3385,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (3396,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (3402,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (3407,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (3411,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (3416,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (3426,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (3459,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (3464,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (3469,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (3474,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (3479,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (3484,17): run-time error CSS1039: Token not allowed after unary operator: '-danger' (3489,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3502,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (3503,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg' (3505,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (3507,33): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (3512,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (3518,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3524,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (3532,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (3533,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (3535,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (3536,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (3540,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (3547,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary' (3548,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3559,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3565,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (3571,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (3585,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (3586,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (3590,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (3594,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (3595,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3599,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3600,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3605,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (3606,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3625,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (3632,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (3644,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (3668,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (3669,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (3671,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (3672,29): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (3679,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-sm' (3684,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3693,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (3699,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' */ /* ============================================ DEEPACK - Modern Dashboard Styles ============================================ */ /* CSS Variables */ :root { /* Colori Istituzionali Deepack */ --primary: rgb(1, 58, 87); /* Blu scuro */ --primary-dark: rgb(1, 45, 68); /* Blu ancora più scuro */ --primary-light: rgb(1, 75, 110); /* Blu leggermente più chiaro */ --secondary: rgb(47, 141, 177); /* Turchese */ --secondary-dark: rgb(35, 115, 150); --secondary-light: rgb(80, 170, 200); /* Functional Colors */ --success: #10B981; --warning: #F59E0B; --danger: #EF4444; --info: rgb(47, 141, 177); /* Neutrals */ --white: #FFFFFF; --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B; --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: rgb(1, 58, 87); /* Gradients */ --gradient-primary: linear-gradient(135deg, rgb(1, 58, 87) 0%, rgb(1, 80, 120) 100%); --gradient-secondary: linear-gradient(135deg, rgb(47, 141, 177) 0%, rgb(80, 170, 200) 100%); --gradient-success: linear-gradient(135deg, #10B981 0%, #34D399 100%); --gradient-warning: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); --gradient-danger: linear-gradient(135deg, #EF4444 0%, #F87171 100%); /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Layout */ --sidebar-width: 260px; --sidebar-collapsed-width: 70px; --header-height: 70px; --border-radius: 12px; --border-radius-sm: 8px; --border-radius-lg: 16px; /* Transitions */ --transition: all 0.3s ease; } /* Reset & Base */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 14px; scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--gray-100); color: var(--gray-800); line-height: 1.5; overflow-x: hidden; } /* ============================================ SIDEBAR ============================================ */ .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar-width); height: 100vh; background: var(--gray-900); display: flex; flex-direction: column; transition: var(--transition); z-index: 1000; } .sidebar.collapsed { width: var(--sidebar-collapsed-width); } .sidebar-header { padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .logo { display: flex; align-items: center; gap: 0.75rem; color: var(--white); font-size: 1.25rem; font-weight: 700; } .logo img { height: 36px; width: auto; } .logo i { font-size: 1.5rem; color: var(--secondary); } .sidebar.collapsed .logo { display: none; } .sidebar-toggle { background: transparent; border: none; color: var(--gray-400); cursor: pointer; padding: 0.5rem; border-radius: var(--border-radius-sm); transition: var(--transition); flex-shrink: 0; } .sidebar-toggle:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); } .sidebar.collapsed .sidebar-header { justify-content: center; padding: 1.5rem 0.75rem; } .sidebar-nav { flex: 1; padding: 1rem 0; overflow-y: auto; } .sidebar-nav ul { list-style: none; } .sidebar-nav li { margin: 0.25rem 0.75rem; } .sidebar-nav a { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; color: var(--gray-400); text-decoration: none; border-radius: var(--border-radius-sm); transition: var(--transition); font-weight: 500; } .sidebar-nav a:hover { background: rgba(255, 255, 255, 0.05); color: var(--white); } .sidebar-nav li.active a { background: var(--gradient-secondary); color: var(--white); box-shadow: 0 4px 12px rgba(47, 141, 177, 0.4); } .sidebar-nav a i { width: 20px; text-align: center; font-size: 1.1rem; } /* Nav items with add button */ .sidebar-nav li:has(.nav-add-btn) { display: flex; align-items: center; border-radius: var(--border-radius-sm); } .sidebar-nav li:has(.nav-add-btn) .nav-link-with-action { flex: 1; border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm); } .sidebar-nav li.active:has(.nav-add-btn) { background: var(--gradient-secondary); box-shadow: 0 4px 12px rgba(47, 141, 177, 0.4); } .sidebar-nav li.active:has(.nav-add-btn) .nav-link-with-action { background: none; box-shadow: none; } .sidebar-nav li:has(.nav-add-btn):hover { background: rgba(255, 255, 255, 0.05); } .sidebar-nav li:has(.nav-add-btn):hover .nav-link-with-action { background: none; } .sidebar-nav .nav-add-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-width: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--gray-400); text-decoration: none; font-size: 0.7rem; transition: var(--transition); margin-right: 0.5rem; padding: 0; } .sidebar-nav .nav-add-btn:hover { background: rgba(255, 255, 255, 0.25); color: var(--white); } .sidebar-nav li.active .nav-add-btn { background: rgba(255, 255, 255, 0.2); color: var(--white); } /* Section labels */ .nav-section-label { padding: 1.25rem 1rem 0.25rem 1rem; margin: 0 0.75rem; } .nav-section-label span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .sidebar.collapsed .nav-section-label span { display: none; } /* Submenu (second level) */ .nav-group-toggle { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; color: var(--gray-400); text-decoration: none; border-radius: var(--border-radius-sm); transition: var(--transition); font-weight: 500; cursor: pointer; width: 100%; background: none; border: none; } .nav-group-toggle:hover { background: rgba(255, 255, 255, 0.05); color: var(--white); } .nav-arrow { margin-left: auto; font-size: 0.7rem; transition: transform 0.3s ease; } .nav-group.open .nav-arrow { transform: rotate(180deg); } .nav-submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, overflow 0s 0.3s; padding-left: 0.5rem; } .nav-group.open .nav-submenu { max-height: calc(100vh - 250px); overflow-y: auto; transition: max-height 0.3s ease, overflow 0s 0s; } /* Scrollbar styling for dark sidebar submenu */ .nav-submenu::-webkit-scrollbar { width: 5px; } .nav-submenu::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } .nav-submenu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } .nav-submenu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } .nav-submenu-label { padding: 0.6rem 1rem 0.15rem 1.5rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); pointer-events: none; } .nav-submenu li { margin: 0.1rem 0; } .nav-submenu a { padding: 0.6rem 1rem 0.6rem 2.5rem; font-size: 0.85rem; gap: 0.5rem; color: var(--gray-400); } .nav-submenu a:hover { color: var(--white); } .nav-submenu li.active a { color: var(--white); font-weight: 600; } .sidebar.collapsed .nav-submenu { display: none; } .sidebar.collapsed .nav-arrow { display: none; } .sidebar.collapsed .sidebar-nav a span { display: none; } .sidebar-footer { padding: 1rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .user-info { display: flex; align-items: center; gap: 0.75rem; } .user-avatar { width: 40px; height: 40px; background: var(--gradient-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); } .user-details { display: flex; flex-direction: column; } .user-name { color: var(--white); font-weight: 600; font-size: 0.9rem; } .user-role { color: var(--gray-500); font-size: 0.75rem; } .sidebar.collapsed .user-details { display: none; } /* ============================================ MAIN CONTENT ============================================ */ .main-content { margin-left: var(--sidebar-width); min-height: 100vh; transition: var(--transition); } .sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-collapsed-width); } /* Header */ .header { position: sticky; top: 0; height: var(--header-height); background: var(--white); border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; z-index: 100; box-shadow: var(--shadow-sm); } .header-left { display: flex; align-items: center; gap: 1rem; } .menu-toggle { display: none; background: transparent; border: none; font-size: 1.25rem; color: var(--gray-600); cursor: pointer; padding: 0.5rem; } .page-title { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); } .header-right { display: flex; align-items: center; gap: 1.5rem; } .search-box { position: relative; display: flex; align-items: center; } .search-box i { position: absolute; left: 1rem; color: var(--gray-400); } .search-box input { width: 280px; padding: 0.625rem 1rem 0.625rem 2.5rem; border: 1px solid var(--gray-200); border-radius: var(--border-radius); background: var(--gray-50); font-size: 0.875rem; transition: var(--transition); } .search-box input:focus { outline: none; border-color: var(--secondary); background: var(--white); box-shadow: 0 0 0 3px rgba(47, 141, 177, 0.2); } .header-actions { display: flex; gap: 0.5rem; } .icon-btn { position: relative; width: 40px; height: 40px; border: none; background: var(--gray-100); border-radius: var(--border-radius-sm); color: var(--gray-600); cursor: pointer; transition: var(--transition); } .icon-btn:hover { background: var(--gray-200); color: var(--gray-900); } .icon-btn .badge { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; background: var(--danger); color: var(--white); font-size: 0.65rem; font-weight: 600; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* Page Content */ .page-content { padding: 1.5rem 2rem; } .page { display: none; animation: fadeIn 0.3s ease; } .page.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ CARDS ============================================ */ .card { background: var(--white); border-radius: var(--border-radius-lg); box-shadow: var(--shadow); margin-bottom: 1.5rem; overflow: hidden; } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--gray-100); } .card-header h3 { font-size: 1rem; font-weight: 600; color: var(--gray-800); display: flex; align-items: center; gap: 0.5rem; } .card-header h3 i { color: var(--secondary); } .card-actions { display: flex; gap: 0.75rem; } .view-all { color: var(--secondary); text-decoration: none; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; transition: var(--transition); } .view-all:hover { color: var(--secondary-dark); } /* ============================================ STATS CARDS ============================================ */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; } .stat-card { background: var(--white); border-radius: var(--border-radius-lg); padding: 1.5rem; display: flex; align-items: flex-start; gap: 1rem; box-shadow: var(--shadow); transition: var(--transition); } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .stat-icon { width: 65px; height: 65px; border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--white); } .stat-icon.blue { background: var(--gradient-secondary); } .stat-icon.green { background: var(--gradient-success); } .stat-icon.orange { background: var(--gradient-warning); } .stat-icon.purple { background: var(--gradient-primary); } .stat-info h3 { font-size: 0.8rem; font-weight: 500; color: var(--gray-500); margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.5px; } .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.25rem; line-height:1; } .stat-change { font-size: 0.8rem; font-weight: 500; display: flex; align-items: center; gap: 0.25rem; } .stat-change.positive { color: var(--success); } .stat-change.negative { color: var(--danger); } /* ============================================ CHARTS ============================================ */ .charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } .charts-row .chart-card:only-child { grid-column: span 2; } .chart-card { background: var(--white); border-radius: var(--border-radius-lg); box-shadow: var(--shadow); } .chart-card.large { grid-column: span 1; } .chart-container { padding: 1.5rem; height: 300px; } .chart-filters { display: flex; gap: 0.5rem; } .filter-btn { padding: 0.375rem 0.875rem; border: 1px solid var(--gray-200); background: var(--white); border-radius: 20px; font-size: 0.75rem; font-weight: 500; color: var(--gray-600); cursor: pointer; transition: var(--transition); } .filter-btn:hover { border-color: var(--secondary); color: var(--secondary); } .filter-btn.active { background: var(--secondary); border-color: var(--secondary); color: var(--white); } .chart-legend { display: flex; gap: 1rem; } .legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--gray-600); } .legend-color { width: 12px; height: 12px; border-radius: 3px; } .legend-color.blue { background: var(--secondary); } .legend-color.gray { background: var(--gray-300); } /* ============================================ DASHBOARD BOTTOM SECTION ============================================ */ .dashboard-bottom { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; } /* ============================================ DATA TABLES ============================================ */ .table-responsive { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid var(--gray-100); } .data-table th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-500); background: var(--gray-50); } .data-table tbody tr { transition: var(--transition); } .data-table tbody tr:hover { background: var(--gray-50); } .data-table td { font-size: 0.875rem; color: var(--gray-700); } .data-table.full-width { min-width: 100%; } /* Status Badges */ .status { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; } .status.confirmed { background: rgba(16, 185, 129, 0.1); color: var(--success); } .status.pending { background: rgba(245, 158, 11, 0.1); color: var(--warning); } .status.shipped { background: rgba(59, 130, 246, 0.1); color: var(--info); } .status.delivered { background: rgba(47, 141, 177, 0.1); color: var(--secondary); } /* Badges */ .badge { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } .badge-regular { background: rgba(1, 58, 87, 0.1); color: var(--primary); } .badge-calloff { background: rgba(245, 158, 11, 0.1); color: var(--warning); } .badge-trial { background: rgba(16, 185, 129, 0.1); color: var(--success); } /* Progress Bar */ .progress-bar-container { position: relative; height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; min-width: 120px; } .progress-bar-container span { position: absolute; right: -80px; top: -4px; font-size: 0.75rem; color: var(--gray-600); white-space: nowrap; } .progress-bar-container.inline { display: inline-flex; align-items: center; min-width: 100px; } .progress-bar-container.inline span { position: static; margin-left: 0.5rem; } .progress-bar { height: 100%; background: var(--gradient-secondary); border-radius: 4px; transition: width 0.5s ease; } .progress-bar.complete { background: var(--gradient-success); } .progress-stacked { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 100px; } .progress-stacked .progress-label { font-size: 0.75rem; color: var(--gray-600); white-space: nowrap; } .progress-stacked .progress-track { width: 100%; height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; } .progress-stacked .progress-track .progress-bar { height: 100%; background: var(--gradient-secondary); border-radius: 4px; transition: width 0.5s ease; } .progress-stacked .progress-track .progress-bar.complete { background: var(--gradient-success); } /* Action Buttons */ .action-buttons { display: flex; gap: 0.5rem; } .action-btn { width: 32px; height: 32px; border: none; background: var(--gray-100); border-radius: var(--border-radius-sm); color: var(--gray-600); cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .action-btn:hover { background: var(--secondary); color: var(--white); } .action-btn.danger:hover { background: var(--danger); } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; } .pagination-btn { min-width: 36px; height: 36px; border: 1px solid var(--gray-200); background: var(--white); border-radius: var(--border-radius-sm); color: var(--gray-600); cursor: pointer; transition: var(--transition); font-weight: 500; } .pagination-btn:hover:not(:disabled) { border-color: var(--secondary); color: var(--secondary); } .pagination-btn.active { background: var(--secondary); border-color: var(--secondary); color: var(--white); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pagination-ellipsis { color: var(--gray-400); } /* ============================================ ALERTS PANEL ============================================ */ .alerts-list { padding: 1rem; } .alert-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border-radius: var(--border-radius); margin-bottom: 0.75rem; background: var(--gray-50); transition: var(--transition); } .alert-item:hover { background: var(--gray-100); } .alert-item.urgent { border-left: 3px solid var(--danger); background: rgba(239, 68, 68, 0.05); } .alert-item.warning { border-left: 3px solid var(--warning); background: rgba(245, 158, 11, 0.05); } .alert-icon { width: 40px; height: 40px; background: var(--gray-200); border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; color: var(--gray-600); } .alert-item.urgent .alert-icon { background: rgba(239, 68, 68, 0.1); color: var(--danger); } .alert-item.warning .alert-icon { background: rgba(245, 158, 11, 0.1); color: var(--warning); } .alert-content h4 { font-size: 0.9rem; font-weight: 600; color: var(--gray-800); margin-bottom: 0.25rem; } .alert-content p { font-size: 0.8rem; color: var(--gray-500); margin-bottom: 0.25rem; } .alert-date { font-size: 0.75rem; color: var(--gray-400); } /* ============================================ FILTERS BAR ============================================ */ .page-header { margin-bottom: 1.5rem; } .filters-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; padding: 1rem 1.5rem; background: var(--white); border-radius: var(--border-radius-lg); box-shadow: var(--shadow); } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; } .filter-group label { font-size: 0.75rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; } .filter-select, .filter-input { min-width: 180px; padding: 0.625rem 1rem; border: 1px solid var(--gray-200); border-radius: var(--border-radius-sm); font-size: 0.875rem; color: var(--gray-700); background: var(--white); transition: var(--transition); } .filter-select:focus, .filter-input:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(47, 141, 177, 0.2); } .filter-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border: none; border-radius: var(--border-radius-sm); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: var(--transition); text-decoration: none; } .btn-primary { background: var(--gradient-secondary); color: var(--white); box-shadow: 0 4px 12px rgba(47, 141, 177, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(47, 141, 177, 0.4); } .btn-secondary { background: var(--gray-100); color: var(--gray-700); } .btn-secondary:hover { background: var(--gray-200); } .btn-outline { background: transparent; border: 1px solid var(--gray-300); color: var(--gray-700); } .btn-outline:hover { border-color: var(--secondary); color: var(--secondary); } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; } .btn-danger { background: var(--danger); color: var(--white); } .btn-danger:hover { background: #DC2626; color: var(--white); } .btn-success { background: var(--success); color: var(--white); } .btn-success:hover { background: #059669; color: var(--white); } /* Alerts */ .alert { padding: 1rem 1.25rem; border-radius: var(--border-radius-sm); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; } .alert-success { background: rgba(16, 185, 129, 0.1); color: #065F46; border: 1px solid rgba(16, 185, 129, 0.2); } .alert-danger { background: rgba(239, 68, 68, 0.1); color: #991B1B; border: 1px solid rgba(239, 68, 68, 0.2); } /* Empty state */ .empty-state { grid-column: 1 / -1; text-align: center; padding: 3rem; } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; padding: 1rem 0; } .pagination-info { font-size: 0.85rem; color: var(--gray-500); } .pagination-buttons { display: flex; align-items: center; gap: 0.375rem; } .pagination-buttons .btn { text-align: center; padding: 0.375rem 0.625rem; } .pagination-current { pointer-events: none; } .pagination-dots { padding: 0.375rem 0.25rem; color: var(--gray-400); font-size: 0.85rem; } /* ============================================ FORMS ============================================ */ .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 1.5rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group.full-width { grid-column: span 3; } .form-group label { font-size: 0.8rem; font-weight: 600; color: var(--gray-600); } .form-control { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--gray-200); border-radius: var(--border-radius-sm); font-size: 0.875rem; color: var(--gray-700); background: var(--white); transition: var(--transition); } .form-control:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(47, 141, 177, 0.2); } .form-control:read-only { background: var(--gray-50); color: var(--gray-500); } .checkbox-group { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--gray-200); border-radius: var(--border-radius-sm); max-height: 120px; overflow-y: auto; } .checkbox-group label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--gray-700); cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--border-radius-sm); background: var(--gray-50); white-space: nowrap; } .checkbox-group label:hover { background: var(--gray-100); } .checkbox-group input[type="checkbox"] { margin: 0; } .form-control-sm { padding: 0.5rem 0.75rem; font-size: 0.8rem; } textarea.form-control { resize: vertical; min-height: 80px; } .form-row { display: flex; gap: 1rem; margin-bottom: 0.75rem; } .form-row .form-group { margin-bottom: 0; } /* Required fields & validation */ .form-group label .required, .form-group label .obbligatorio, .filter-group label .required, .data-table th .required { color: var(--danger); font-weight: 700; } .form-control.input-error, .tag-input-container.input-error .form-control { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15); } .field-validation-error { color: var(--danger); font-size: 0.78rem; margin-top: 0.25rem; display: block; } .form-control.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); } .form-control.is-invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); } .field-error { color: var(--danger); font-size: 0.75rem; margin-top: -0.25rem; display: none; } .field-error.show { display: block; } /* Autocomplete */ .autocomplete-wrapper { position: relative; } .autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--border-radius-sm); box-shadow: var(--shadow-lg); z-index: 100; display: none; max-height: 200px; overflow-y: auto; } .autocomplete-dropdown.show { display: block; } .autocomplete-item { padding: 0.75rem 1rem; cursor: pointer; transition: var(--transition); font-size: 0.875rem; } .autocomplete-item:hover { background: var(--gray-50); } .autocomplete-item strong { color: var(--secondary); } /* Color Select */ .color-select { display: flex; align-items: center; gap: 0.5rem; } .color-dot { width: 12px; height: 12px; border-radius: 50%; } .color-dot.green { background: var(--success); } .color-dot.blue { background: var(--info); } .color-dot.gray { background: var(--gray-400); } /* Form Actions */ .form-actions { display: flex; justify-content: flex-end; gap: 1rem; padding: 1.5rem; background: var(--gray-50); border-radius: var(--border-radius-lg); } /* Order Lines Table */ .order-lines-table .form-control { min-width: 81px; } .order-lines-table select.form-control { min-width: 100px; } .card.card-righe-ordine { overflow: visible; } .order-lines-wrapper { overflow-x: auto; } .order-lines-wrapper .tag-input-container { position: relative; } .order-lines-wrapper .tag-dropdown { z-index: 1100; min-width: 280px; position: fixed; } .order-lines-table select:disabled { background-color: var(--gray-100); color: var(--gray-400); cursor: not-allowed; border-color: var(--gray-200); } /* ============================================ CLIENTS PAGE ============================================ */ .clients-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .client-card { background: var(--white); border-radius: var(--border-radius-lg); box-shadow: var(--shadow); padding: 1rem 1.25rem; transition: var(--transition); min-width: 0; overflow: hidden; } .client-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .client-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--gray-100); min-height: 60px; } .client-avatar { width: 40px; height: 40px; background: var(--gradient-primary); border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-size: 0.85rem; transition: background 0.3s ease; } .card-accent-1 .client-avatar { background: linear-gradient(135deg, #DC2626, #F87171); } .card-accent-2 .client-avatar { background: linear-gradient(135deg, #D97706, #FBBF24); } .card-accent-3 .client-avatar { background: linear-gradient(135deg, #2563EB, #60A5FA); } .client-info { flex: 1; min-width: 0; } .client-info h3 { font-size: 13px; font-weight: 600; color: var(--gray-800); margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .client-code { font-size: 0.75rem; color: var(--gray-500); font-weight: 500; } .client-status { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: opacity 0.2s; } .client-status:hover { opacity: 0.75; } .client-status.active { background: rgba(16, 185, 129, 0.1); color: var(--success); } .client-status.warning { background: rgba(245, 158, 11, 0.1); color: var(--warning); } .client-status.inactive { background: rgba(239, 68, 68, 0.1); color: var(--danger); } .client-details { margin-bottom: 0.5rem; } .detail-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0; font-size: 0.85rem; color: var(--gray-600); min-width: 0; } .detail-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .detail-row-address span { font-size: 11px; } .detail-row i { width: 16px; color: var(--gray-400); } .client-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--gray-50); border-radius: var(--border-radius-sm); min-height: 75px; margin-bottom: 0.5rem; } .client-stat { text-align: center; } .client-stat .stat-label { display: block; font-size: 0.7rem; color: var(--gray-500); text-transform: uppercase; margin-bottom: 0.25rem; } .client-stat .stat-value { font-size: 12px; font-weight: 700; color: var(--gray-800); } .client-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .client-actions .btn { flex: 1 1 calc(50% - 0.25rem); justify-content: center; padding: 0.375rem 0.5rem; font-size: 11px; white-space: nowrap; } /* Avatar allineato al centro verticale nell'header */ .client-header .client-avatar { margin-top: 4px; } /* Card Accent - bordo colorato per classificazione */ .card-accent-1 { border: 2px solid #DC2626; } /* Caldo - Rosso */ .card-accent-2 { border: 2px solid #D97706; } /* Tiepido - Arancio */ .card-accent-3 { border: 2px solid #2563EB; } /* Freddo - Blu */ /* Classificazione Controls - bottoni icona tondi */ .class-controls { display: flex; gap: 6px; align-items: center; } .class-btn { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--gray-100); color: var(--gray-400); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all 0.2s ease; } .class-btn:hover { transform: scale(1.15); } .class-btn-fire.active { background: #DC2626; color: var(--white); box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4); } .class-btn-sun.active { background: #D97706; color: var(--white); box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4); } .class-btn-snowflake.active { background: #2563EB; color: var(--white); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4); } /* Sottoclassificazione Controls - medaglie piccole */ .sub-controls { display: flex; gap: 4px; align-items: center; margin-top: 4px; } .sub-btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--gray-100); color: var(--gray-300); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; transition: all 0.2s ease; } .sub-btn:hover { transform: scale(1.15); } .sub-btn-oro.active { background: linear-gradient(135deg, #FDF0C0, #F5D060); color: #7A5C00; box-shadow: 0 2px 6px rgba(212, 160, 23, 0.4); } .sub-btn-argento.active { background: linear-gradient(135deg, #E8E8E8, #C0C0C0); color: #4A4A4A; box-shadow: 0 2px 6px rgba(160, 160, 160, 0.4); } .sub-btn-bronzo.active { background: linear-gradient(135deg, #F0D0A8, #CD7F32); color: #5C3317; box-shadow: 0 2px 6px rgba(205, 127, 50, 0.4); } /* Classification wrapper per allineare a destra */ .class-wrapper { display: flex; flex-direction: column; align-items: flex-end; } /* Action Bar - bottoni azione icon-only */ .action-bar { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .action-icon-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--gray-100); color: var(--gray-500); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.2s ease; text-decoration: none; } .action-icon-btn:hover { transform: scale(1.1); box-shadow: var(--shadow-md); } .action-icon-btn.action-ordine:hover { background: var(--secondary); color: var(--white); } .action-icon-btn.action-dettagli:hover { background: var(--primary); color: var(--white); } .action-icon-btn.action-modifica:hover { background: var(--warning); color: var(--white); } .action-icon-btn.action-elimina:hover { background: var(--danger); color: var(--white); } .action-icon-btn.action-indirizzi:hover { background: var(--info); color: var(--white); } .action-icon-btn.action-contatti:hover { background: var(--primary); color: var(--white); } .action-icon-btn.action-bancari:hover { background: #6f42c1; color: var(--white); } .action-icon-btn.action-campi:hover { background: #e67e22; color: var(--white); } .action-icon-btn.action-agenti:hover { background: var(--primary); color: var(--white); } .action-icon-btn.action-note:hover { background: #f59e0b; color: var(--white); } /* Edit inline card */ .client-nome-row { display: flex; align-items: center; gap: 0.35rem; } .client-nome-row .client-nome { margin: 0; } .client-code-row { display: flex; align-items: center; gap: 0.35rem; } .btn-edit-inline { background: none; border: none; cursor: pointer; color: var(--gray-400); font-size: 1rem; padding: 0.25rem; line-height: 1; transition: color 0.2s; } .btn-edit-inline:hover { color: var(--primary); } .btn-save-inline { color: var(--success); } .btn-save-inline:hover { color: var(--success); } .btn-cancel-inline { color: var(--danger); } .btn-cancel-inline:hover { color: var(--danger); } .edit-inline-form { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .edit-inline-input { font-size: 0.8rem !important; padding: 0.2rem 0.4rem !important; height: auto !important; } .edit-inline-code { flex: 1; min-width: 0; } /* Indirizzo Card (dentro modal indirizzi) */ .indirizzo-card { padding: 1rem 1.25rem; border: 1px solid var(--gray-200); border-radius: var(--border-radius-sm); margin-bottom: 0.75rem; background: var(--white); transition: var(--transition); } .indirizzo-card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); } .indirizzo-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; } .indirizzo-card-header strong { font-size: 0.9rem; color: var(--primary); } .indirizzo-card-actions { display: flex; gap: 0.35rem; } .indirizzo-card-actions .action-icon-btn { width: 28px; height: 28px; font-size: 12px; } /* Indirizzi Modal - Sezioni */ .ind-section { margin-bottom: 1.5rem; } .ind-section:last-child { margin-bottom: 0; } .ind-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--gray-200); } .ind-section-header h4 { font-size: 0.95rem; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 0.5rem; margin: 0; } .ind-section-header h4 i { color: var(--secondary); } /* Form box dentro sezione indirizzi */ .ind-form-box { padding: 1rem 1.25rem; border: 1px solid var(--gray-200); border-radius: var(--border-radius-sm); background: var(--gray-50); margin-top: 0.5rem; } .ind-form-title { font-size: 0.85rem; font-weight: 600; color: var(--primary); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem; } .ind-form-options { display: flex; flex-wrap: wrap; gap: 1.25rem; padding: 0.75rem 0 0.25rem; } .ind-form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--gray-200); } /* Empty state dentro sezione indirizzi */ .ind-empty-state { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--gray-50); border: 1px dashed var(--gray-300); border-radius: var(--border-radius-sm); color: var(--gray-500); font-size: 0.85rem; } /* Badge per indirizzi */ .ind-badges { display: flex; align-items: center; gap: 0.4rem; } .ind-badge { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 4px; display: inline-flex; align-items: center; } .ind-badge-info { background: rgba(47, 141, 177, 0.12); color: var(--info); } .ind-badge-success { background: rgba(16, 185, 129, 0.12); color: var(--success); } /* Dettagli dentro la card indirizzo */ .ind-card-address { font-size: 0.85rem; color: var(--gray-600); margin-top: 0.35rem; } .ind-card-address i { color: var(--gray-400); margin-right: 0.25rem; font-size: 0.8rem; } .ind-card-extra { font-size: 0.8rem; color: var(--gray-500); margin-top: 0.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; } .ind-card-extra i { font-size: 0.7rem; color: var(--gray-400); margin-right: 0.15rem; } .ind-separator { margin: 0 0.4rem; color: var(--gray-300); } /* ============================================ DATA TABLE (Prodotti, etc.) ============================================ */ .table-container { background: var(--white); border-radius: var(--border-radius-lg); box-shadow: var(--shadow); overflow: hidden; } .data-table { width: 100%; border-collapse: collapse; background: var(--white); } .data-table thead { background: var(--gray-50); } .data-table th { padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.03em; text-align: left; line-height: 1; border-bottom: 2px solid var(--gray-100); } .data-table td { padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--gray-700); border-bottom: 1px solid var(--gray-100); } .data-table tbody tr:hover { background: var(--gray-50); } .data-table .text-muted { color: var(--gray-400); font-size: 0.8rem; } /* ============================================ SUPPLIERS PAGE ============================================ */ .rating { display: flex; align-items: center; gap: 0.25rem; color: var(--warning); } .rating span { margin-left: 0.5rem; color: var(--gray-600); font-weight: 600; } .flag { font-size: 1.25rem; margin-right: 0.5rem; } /* ============================================ CRM PAGE ============================================ */ .crm-layout { display: grid; grid-template-columns: 1fr 1.5fr; grid-template-rows: auto auto; gap: 1.5rem; } .calendar-card { grid-row: span 2; } .calendar-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; } .calendar-header h4 { font-size: 1rem; font-weight: 600; color: var(--gray-800); } .calendar-nav { width: 32px; height: 32px; border: 1px solid var(--gray-200); background: var(--white); border-radius: var(--border-radius-sm); cursor: pointer; transition: var(--transition); } .calendar-nav:hover { border-color: var(--secondary); color: var(--secondary); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 1.5rem 1.5rem; } .calendar-day-header { text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--gray-500); padding: 0.5rem; text-transform: uppercase; } .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--gray-700); border-radius: var(--border-radius-sm); cursor: pointer; transition: var(--transition); position: relative; } .calendar-day:hover { background: var(--gray-100); } .calendar-day.other-month { color: var(--gray-300); } .calendar-day.today { background: var(--gradient-secondary); color: var(--white); font-weight: 600; } .calendar-day.has-event::after { content: ''; position: absolute; bottom: 4px; width: 6px; height: 6px; background: var(--secondary); border-radius: 50%; } .calendar-day.today.has-event::after { background: var(--white); } /* Visits List */ .visits-list { padding: 1rem; } .visit-item { display: flex; gap: 1rem; padding: 1rem; border-radius: var(--border-radius); margin-bottom: 0.75rem; background: var(--gray-50); transition: var(--transition); } .visit-item:hover { background: var(--gray-100); } .visit-item.urgent { border-left: 3px solid var(--danger); background: rgba(239, 68, 68, 0.05); } .visit-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 50px; padding: 0.5rem; background: var(--secondary); border-radius: var(--border-radius-sm); color: var(--white); } .visit-date .day { font-size: 1.25rem; font-weight: 700; line-height: 1; } .visit-date .month { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; } .visit-details { flex: 1; } .visit-details h4 { font-size: 0.9rem; font-weight: 600; color: var(--gray-800); margin-bottom: 0.5rem; } .visit-details p { font-size: 0.75rem; color: var(--gray-500); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .visit-type { display: inline-block; padding: 0.25rem 0.5rem; background: rgba(47, 141, 177, 0.1); color: var(--secondary); font-size: 0.7rem; font-weight: 600; border-radius: 4px; margin-top: 0.5rem; } .visit-actions { display: flex; flex-direction: column; gap: 0.5rem; } /* Activity Timeline */ .activity-timeline { padding: 1rem 1.5rem; } .activity-item { display: flex; gap: 1rem; padding-bottom: 1.5rem; position: relative; } .activity-item::before { content: ''; position: absolute; left: 18px; top: 40px; bottom: 0; width: 2px; background: var(--gray-200); } .activity-item:last-child::before { display: none; } .activity-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; } .activity-icon.visit { background: rgba(16, 185, 129, 0.1); color: var(--success); } .activity-icon.call { background: rgba(59, 130, 246, 0.1); color: var(--info); } .activity-icon.email { background: rgba(245, 158, 11, 0.1); color: var(--warning); } .activity-icon.order { background: rgba(1, 58, 87, 0.1); color: var(--primary); } .activity-content h4 { font-size: 0.85rem; font-weight: 600; color: var(--gray-800); margin-bottom: 0.25rem; } .activity-content p { font-size: 0.8rem; color: var(--gray-500); margin-bottom: 0.25rem; } .activity-time { font-size: 0.7rem; color: var(--gray-400); } /* ============================================ MODAL ============================================ */ .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; z-index: 2000; padding: 2rem; } .modal.show { display: flex; } .modal-content { background: var(--white); border-radius: var(--border-radius-lg); width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); } .modal-content.modal-landscape { max-width: 95vw; width: 95vw; max-height: 90vh; overflow-y: auto; } .modal-content.modal-print-ordine { max-width: 1000px; width: 1000px; max-height: 90vh; overflow-y: auto; } .print-ordine-content .data-table th { background: #fff !important; color: #000; text-transform: none; font-size: 12px; letter-spacing: normal; } /* Documenti Allegati */ .doc-allegato-row { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--gray-100); } .doc-allegato-row:last-child { border-bottom: none; } .doc-allegato-row .action-btn { background: none; border: none; cursor: pointer; padding: 0.4rem; border-radius: var(--border-radius-sm); transition: var(--transition); font-size: 0.9rem; text-decoration: none; } .doc-allegato-row .action-btn:hover { background: var(--gray-100); } .doc-allegato-row .action-btn.danger { color: var(--danger); } .doc-allegato-row .action-btn.danger:hover { background: #FEE2E2; } /* Badge conteggio allegati */ .btn-allegati { position: relative; overflow: visible !important; } .btn-allegati .badge-count { position: absolute; top: -7px; right: -7px; background: var(--secondary); color: #fff; font-size: 0.6rem; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; padding: 0 4px; pointer-events: none; z-index: 1; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--gray-100); } .modal-header h3 { font-size: 1.1rem; font-weight: 600; color: var(--gray-800); } .modal-close { width: 32px; height: 32px; border: none; background: transparent; font-size: 1.5rem; color: var(--gray-400); cursor: pointer; transition: var(--transition); line-height: 1; } .modal-close:hover { color: var(--gray-600); } .modal-body { padding: 1.5rem; } .modal-body .form-group { margin-bottom: 1rem; } /* Detail grid for read-only modals */ .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 2rem; } .detail-field { display: flex; flex-direction: column; gap: 0.15rem; } .detail-label { font-size: 0.75rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.03em; } .detail-value { font-size: 0.9rem; color: var(--gray-900); } .modal-footer { display: flex; justify-content: flex-end; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--gray-100); } .checkbox-group { display: flex; flex-direction: column; gap: 0.5rem; } .checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--gray-700); cursor: pointer; } .checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--secondary); } /* ============================================ REPORT / BI PAGE ============================================ */ .report-filters { margin-bottom: 1.5rem; } .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; } .kpi-card { background: var(--white); border-radius: var(--border-radius-lg); padding: 1.5rem; box-shadow: var(--shadow); } .kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .kpi-title { font-size: 0.8rem; font-weight: 500; color: var(--gray-500); text-transform: uppercase; } .kpi-icon { font-size: 1.25rem; color: var(--secondary); } .kpi-value { font-size: 2rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.5rem; } .kpi-comparison { font-size: 0.8rem; font-weight: 500; } .kpi-comparison.positive { color: var(--success); } .kpi-comparison.negative { color: var(--danger); } .kpi-chart { height: 60px; margin-top: 1rem; } /* Trends */ .trend-up { color: var(--success); font-weight: 600; } .trend-down { color: var(--danger); font-weight: 600; } .trend-stable { color: var(--gray-500); font-weight: 600; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1200px) { .stats-grid, .kpi-grid { grid-template-columns: repeat(2, 1fr); } .charts-row { grid-template-columns: 1fr; } .dashboard-bottom { grid-template-columns: 1fr; } .form-grid { grid-template-columns: repeat(2, 1fr); } .form-group.full-width { grid-column: span 2; } .crm-layout { grid-template-columns: 1fr; } .calendar-card { grid-row: span 1; } .clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 992px) { .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .client-actions { flex-wrap: wrap; } .client-actions .btn { flex: 1 1 calc(50% - 0.25rem); } .action-bar { flex-wrap: wrap; } } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; } .menu-toggle { display: block; } .header { padding: 0 1rem; } .search-box { display: none; } .page-content { padding: 1rem; } .stats-grid, .kpi-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .form-group.full-width { grid-column: span 1; } .filters-bar { flex-direction: column; align-items: stretch; } .filter-group { width: 100%; } .filter-select, .filter-input { width: 100%; } .clients-grid { grid-template-columns: 1fr; } .form-row { flex-direction: column; } .form-row .form-group { flex: 1 1 100% !important; width: 100% !important; } .modal { padding: 1rem; } .modal-content { max-width: 100% !important; } .detail-grid { grid-template-columns: 1fr; } .client-header { flex-wrap: wrap; } .action-bar { gap: 0.35rem; } .action-icon-btn { width: 30px; height: 30px; font-size: 12px; } .class-wrapper { width: 100%; align-items: flex-start; margin-top: 0.25rem; } .class-controls { gap: 4px; } .pagination-buttons { flex-wrap: wrap; } .visit-item { flex-direction: column; } .visit-date { flex-direction: row; gap: 0.5rem; width: fit-content; } .visit-actions { flex-direction: row; } } /* Checkbox styling */ input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--secondary); cursor: pointer; } .checkbox-select-all { margin: 0; } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } /* Fornitori cell (badge + troncamento + hover popup) */ .fornitori-cell { position: relative; display: flex; align-items: center; gap: 0.35rem; cursor: default; max-width: 100%; } .fornitori-cell .cell-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; color: var(--gray-700); min-width: 0; } .data-table td { overflow: visible; } .fornitori-cell ul { display: none; position: fixed; z-index: 1001; background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 0.4rem 0; list-style: none; min-width: 180px; max-width: 300px; max-height: 250px; overflow-y: auto; } .fornitori-cell li { padding: 0.3rem 0.75rem; font-size: 0.8rem; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fornitori-cell li:hover { background: var(--gray-50); } /* Badge count (numero cerchiato) */ .badge-count { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-width: 22px; background: var(--secondary); color: var(--white); border-radius: 50%; font-size: 0.7rem; font-weight: 700; vertical-align: middle; } /* ============================================ TAG INPUT (Fornitori) ============================================ */ .tag-input-container { position: relative; } .tag-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; } .tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.5rem; background: var(--primary); color: white; border-radius: 4px; font-size: 0.8rem; font-weight: 500; } .tag-remove { background: none; border: none; color: white; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.15rem; opacity: 0.7; } .tag-remove:hover { opacity: 1; } .tag-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--gray-200); border-radius: var(--border-radius-sm); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-height: 200px; overflow-y: auto; z-index: 1000; } .tag-dropdown-item { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.85rem; border-bottom: 1px solid var(--gray-100); } .tag-dropdown-item:hover { background: var(--gray-50); } .tag-dropdown-item.disabled { color: var(--gray-400); cursor: default; font-style: italic; } /* Ordini table: single-line cells */ #ordiniTableContainer .data-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ordiniTableContainer .data-table td.cell-wrap { white-space: normal; overflow: visible; text-overflow: unset; } /* Ordini chiusi: riga verde */ .data-table tr.ordine-chiuso td { background-color: #e6f4ea !important; color: #1a7431; } /* Print Styles */ @media print { .sidebar, .header, .filters-bar, .btn, .action-buttons { display: none !important; } .main-content { margin-left: 0; } .page-content { padding: 0; } .card { box-shadow: none; border: 1px solid var(--gray-200); } } /* ============================================ LOGIN PAGE ============================================ */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--gray-100); padding: 20px; } .login-container { width: 100%; max-width: 420px; } /* Fatture - righe selezionabili */ .riga-fattura { opacity: 0.55; transition: opacity 0.2s, background-color 0.2s; } .riga-fattura.riga-selezionata { opacity: 1; background-color: #e8f4e8 !important; } .riga-fattura:hover { opacity: 0.85; cursor: pointer; } .riga-fattura.riga-selezionata:hover { opacity: 1; background-color: #d4ecd4 !important; } .riga-fattura .riga-saldo-check { width: 16px; height: 16px; cursor: pointer; } .login-card { background: var(--white); border-radius: 16px; box-shadow: var(--shadow-xl); overflow: hidden; } .login-header { background: var(--gradient-primary); padding: 40px 30px 30px; text-align: center; color: var(--white); } .login-header .login-logo { width: 60px; height: auto; margin-bottom: 12px; } .login-header h1 { font-size: 1.8rem; font-weight: 700; margin: 0 0 6px; letter-spacing: 0.5px; } .login-header p { font-size: 0.9rem; opacity: 0.8; margin: 0; } .login-form { padding: 30px; } .login-form .form-group { margin-bottom: 20px; } .login-form .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; } .login-form .form-group label i { margin-right: 6px; color: var(--secondary); } .login-form .form-control { width: 100%; padding: 10px 14px; font-size: 0.95rem; border: 1.5px solid var(--gray-300); border-radius: 8px; transition: border-color 0.2s, box-shadow 0.2s; outline: none; box-sizing: border-box; } .login-form .form-control:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(47, 141, 177, 0.15); } .login-form .remember-me { margin-bottom: 24px; } .login-form .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--gray-600); cursor: pointer; } .login-form .checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--secondary); } .btn-login { width: 100%; padding: 12px; font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; background: var(--gradient-secondary); color: var(--white); cursor: pointer; transition: opacity 0.2s, transform 0.1s; } .btn-login:hover { opacity: 0.9; } .btn-login:active { transform: scale(0.98); } .btn-login i { margin-right: 8px; } .alert.alert-danger { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 0.85rem; } .alert.alert-danger .validation-summary ul { margin: 0; padding-left: 16px; list-style: none; } .alert.alert-danger .validation-summary ul li::before { content: none; } /* ============================================ HEADER DROPDOWN ============================================ */ .header-dropdown { position: relative; } .header-dropdown .dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--white); border-radius: 10px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); padding: 6px 0; z-index: 1000; } .header-dropdown .dropdown-menu.show { display: block; } .header-dropdown .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 0.9rem; color: var(--gray-700); text-decoration: none; transition: background 0.15s; cursor: pointer; border: none; background: none; width: 100%; text-align: left; } .header-dropdown .dropdown-item:hover { background: var(--gray-50); } .header-dropdown .dropdown-item i { width: 18px; text-align: center; color: var(--gray-500); font-size: 0.9rem; } .header-dropdown .dropdown-item.text-danger { color: var(--danger); } .header-dropdown .dropdown-item.text-danger i { color: var(--danger); } .header-dropdown .dropdown-divider { height: 1px; background: var(--gray-200); margin: 4px 0; } .logout-form { display: inline; margin: 0; } .icon-btn-logout { color: var(--danger) !important; transition: opacity 0.2s; } .icon-btn-logout:hover { opacity: 0.7; } /* ============================================ UTENTI - ACTION BUTTONS ============================================ */ .btn-action { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 6px; cursor: pointer; font-size: 0.8rem; transition: opacity 0.15s, transform 0.1s; margin: 0 2px; } .btn-action:hover { opacity: 0.8; transform: scale(1.1); } .btn-action-edit { background: rgba(47, 141, 177, 0.12); color: var(--secondary); } .btn-action-key { background: rgba(245, 158, 11, 0.12); color: var(--warning); } .btn-action-tag { background: rgba(100, 116, 139, 0.12); color: var(--gray-500); } .btn-action-ban { background: rgba(239, 68, 68, 0.10); color: var(--danger); } .btn-action-activate { background: rgba(16, 185, 129, 0.12); color: var(--success); } .btn-action-delete { background: rgba(239, 68, 68, 0.10); color: var(--danger); } .btn-action-clienti { background: rgba(1, 58, 87, 0.12); color: var(--primary); } /* ============================================ HELP PAGE ============================================ */ .help-page { } .help-intro { display: flex; align-items: flex-start; gap: 1.25rem; background: var(--white); border-radius: var(--border-radius-lg); padding: 1.5rem 2rem; box-shadow: var(--shadow); margin-bottom: 2rem; border-left: 4px solid var(--secondary); } .help-intro-icon { font-size: 2rem; color: var(--secondary); margin-top: 0.15rem; } .help-intro h2 { font-size: 1.15rem; color: var(--primary); margin-bottom: 0.35rem; } .help-intro p { font-size: 0.9rem; color: var(--gray-600); line-height: 1.6; } .help-step { display: flex; gap: 1.25rem; margin-bottom: 1.25rem; background: var(--white); border-radius: var(--border-radius); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-sm); transition: var(--transition); } .help-step:hover { box-shadow: var(--shadow-md); } .help-step-number { flex-shrink: 0; width: 38px; height: 38px; background: var(--gradient-primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; } .help-step-content h3 { font-size: 1rem; color: var(--primary); margin-bottom: 0.2rem; } .help-step-subtitle { font-size: 0.8rem; color: var(--gray-400); margin-bottom: 0.5rem; } .help-step-content p { font-size: 0.88rem; color: var(--gray-600); line-height: 1.6; } .help-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; } .help-tag { display: inline-block; padding: 0.25rem 0.7rem; background: var(--gray-100); color: var(--gray-600); border-radius: 20px; font-size: 0.78rem; text-decoration: none; transition: var(--transition); } .help-tag:hover { background: var(--secondary); color: var(--white); } .help-tag-action { background: var(--primary); color: var(--white); font-weight: 600; } .help-tag-action:hover { background: var(--primary-dark); color: var(--white); } .help-tag-action i { margin-right: 0.3rem; font-size: 0.7rem; } .help-checklist { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; } .help-checklist li { font-size: 0.85rem; color: var(--gray-600); display: flex; align-items: center; gap: 0.5rem; } .help-checklist li i { color: var(--secondary); font-size: 0.75rem; width: 16px; text-align: center; } .help-note { display: flex; align-items: flex-start; gap: 0.75rem; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--border-radius-sm); padding: 1rem 1.25rem; margin-top: 1.5rem; font-size: 0.85rem; color: #92400E; } .help-note > i { margin-top: 0.1rem; font-size: 1rem; } .help-dev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .help-dev-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; background: var(--white); border-radius: var(--border-radius); padding: 1.5rem; box-shadow: var(--shadow-sm); border: 1px dashed var(--gray-200); } .help-dev-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--white); } .help-dev-info { flex: 1; } .help-dev-info h4 { font-size: 0.95rem; color: var(--gray-800); margin-bottom: 0.2rem; } .help-dev-info p { font-size: 0.82rem; color: var(--gray-500); line-height: 1.5; } .help-dev-badge { flex-shrink: 0; padding: 0.3rem 0.75rem; background: #FEF3C7; color: #B45309; border-radius: 20px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }